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

<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="../i18n_setup.html">
<link rel="import" href="../settings_shared_css.html">

<if expr="chromeos">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
<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="tts_subpage.html">
</if>

<dom-module id="settings-a11y-page">
  <template>
    <style include="settings-shared"></style>
<if expr="chromeos">
    <settings-animated-pages id="pages" current-route="{{currentRoute}}"
        section="a11y" focus-config="[[focusConfig_]]">
      <neon-animatable route-path="default">
        <settings-toggle-button id="optionsInMenuToggle"
            label="$i18n{optionsInMenuLabel}"
            pref="{{prefs.settings.a11y.enable_menu}}">
        </settings-toggle-button>
        <div id="subpage-trigger" class="settings-box two-line"
            on-click="onManageAccessibilityFeaturesTap_" actionable>
          <div class="start">
            $i18n{manageAccessibilityFeatures}
            <div class="secondary" id="themesSecondary">
              $i18n{moreFeaturesLinkDescription}
            </div>
          </div>
          <paper-icon-button-light class="subpage-arrow">
            <button aria-label="$i18n{manageAccessibilityFeatures}"
                aria-describedby="themesSecondary"></button>
          </paper-icon-button-light>
        </div>
      </neon-animatable>

      <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>
    </settings-animated-pages>
</if>

<if expr="not chromeos">
    <a class="settings-box first two-line inherit-color no-outline"
        tabindex="-1" target="_blank"
        href="https://chrome.google.com/webstore/category/collection/accessibility">
      <div class="start">
        $i18n{moreFeaturesLink}
        <div class="secondary" id="moreFeaturesSecondary">
          $i18n{a11yWebStore}
        </div>
      </div>
      <paper-icon-button-light actionable class="icon-external">
        <button aria-label="$i18n{moreFeaturesLink}"
            aria-describedby="moreFeaturesSecondary"></button>
      </paper-icon-button-light>
    </a>
</if>

  </template>
  <script src="a11y_page.js"></script>
</dom-module>
