<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="captions_browser_proxy.html">
<link rel="import" href="captions_subpage.html">
<link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="../i18n_setup.html">
<link rel="import" href="../settings_shared_css.html">

<if expr="chromeos">
<link rel="import" href="manage_a11y_page.html">
<link rel="import" href="../controls/settings_toggle_button.html">
<link rel="import" href="../settings_page/settings_animated_pages.html">
<link rel="import" href="../settings_page/settings_subpage.html">
<link rel="import" href="switch_access_subpage.html">
<link rel="import" href="tts_subpage.html">
</if>

<dom-module id="settings-a11y-page">
  <template>
    <style include="settings-shared"></style>
    <template is="dom-if" if="[[showCaptionSettings_]]">
      <cr-link-row class="hr" id="captions" label="$i18n{captionsTitle}"
          on-click="onCaptionsClick_">
      </cr-link-row>
    </template>
    <settings-animated-pages id="pages" current-route="{{currentRoute}}"
        section="a11y" focus-config="[[focusConfig_]]">
<if expr="not chromeos">
      <div route-path="default">
      <settings-toggle-button
          id="a11yImageLabels"
          hidden$="[[!showAccessibilityLabelsSetting_]]"
          pref="{{prefs.settings.a11y.enable_accessibility_image_labels}}"
          on-change="onToggleAccessibilityImageLabels_"
          label="$i18n{accessibleImageLabelsTitle}"
          sub-label="$i18n{accessibleImageLabelsSubtitle}">
      </settings-toggle-button>
      <cr-link-row class="hr" label="$i18n{moreFeaturesLink}"
          on-click="onMoreFeaturesLinkClick_" sub-label="$i18n{a11yWebStore}"
          external>
      </cr-link-row>
      </div>
</if>
<if expr="chromeos or is_linux or is_win">
      <template is="dom-if" if="[[showCaptionSettings_]]">
        <template is="dom-if" route-path="/captions">
          <settings-subpage
              associated-control="[[$$('#captions')]]"
              page-title="$i18n{captionsTitle}">
            <settings-captions prefs="{{prefs}}"></settings-captions>
          </settings-subpage>
        </template>
      </template>
</if>
<if expr="chromeos">
      <template is="dom-if" if="[[pageVisibility.webstoreLink]]">
        <div route-path="default">
          <settings-toggle-button
              id="a11yImageLabels"
              hidden$="[[!showAccessibilityLabelsSetting_]]"
              pref="{{prefs.settings.a11y.enable_accessibility_image_labels}}"
              on-change="onToggleAccessibilityImageLabels_"
              label="$i18n{accessibleImageLabelsTitle}"
              sub-label="$i18n{accessibleImageLabelsSubtitle}">
          </settings-toggle-button>
          <settings-toggle-button id="optionsInMenuToggle"
              label="$i18n{optionsInMenuLabel}"
              pref="{{prefs.settings.a11y.enable_menu}}">
          </settings-toggle-button>
          <cr-link-row class="hr" id="subpage-trigger"
              label="$i18n{manageAccessibilityFeatures}"
              on-click="onManageAccessibilityFeaturesTap_"
              sub-label="$i18n{moreFeaturesLinkDescription}">
          </cr-link-row>
        </div>
        <template is="dom-if" route-path="/manageAccessibility">
          <settings-subpage
              associated-control="[[$$('#subpage-trigger')]]"
              page-title="$i18n{manageAccessibilityFeatures}">
            <settings-manage-a11y-page prefs="{{prefs}}">
            </settings-manage-a11y-page>
          </settings-subpage>
        </template>
        <template is="dom-if" route-path="/manageAccessibility/tts">
          <settings-subpage
              associated-control="[[$$('#subpage-trigger')]]"
              page-title="$i18n{manageTtsSettings}">
            <settings-tts-subpage prefs="{{prefs}}">
            </settings-tts-subpage>
          </settings-subpage>
        </template>
        <template is="dom-if" route-path="/manageAccessibility/switchAccess">
          <settings-subpage associated-control="[[$$('#subpage-trigger')]]"
              page-title="$i18n{manageSwitchAccessSettings}">
            <settings-switch-access-subpage prefs="{{prefs.settings.a11y}}">
            </settings-switch-access-subpage>
          </settings-subpage>
        </template>
      </template>
</if>
    </settings-animated-pages>
<if expr="chromeos">
    <cr-link-row class="hr" label="$i18n{moreFeaturesLink}"
        on-click="onMoreFeaturesLinkClick_" sub-label="$i18n{a11yWebStore}"
        hidden="[[pageVisibility.webstoreLink]]" external>
    </cr-link-row>
</if>
  </template>
  <script src="a11y_page.js"></script>
</dom-module>
