<link rel="import" href="chrome://resources/cr_elements/cr_slider/cr_slider.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="/controls/settings_checkbox.html">
<link rel="import" href="/controls/settings_dropdown_menu.html">
<link rel="import" href="/i18n_setup.html">
<link rel="import" href="/route.html">
<link rel="import" href="/settings_shared_css.html">

<dom-module id="settings-keyboard">
  <template>
    <style include="settings-shared"></style>
    <div class="settings-box first">
      <div class="start">$i18n{keyboardKeySearch}</div>
      <settings-dropdown-menu
          pref="{{prefs.settings.language.xkb_remap_search_key_to}}"
          menu-options="[[keyMapTargets_]]">
      </settings-dropdown-menu>
    </div>
    <div class="settings-box">
      <div class="start">$i18n{keyboardKeyCtrl}</div>
      <settings-dropdown-menu
          pref="{{prefs.settings.language.xkb_remap_control_key_to}}"
          menu-options="[[keyMapTargets_]]">
      </settings-dropdown-menu>
    </div>
    <div class="settings-box">
      <div class="start">$i18n{keyboardKeyAlt}</div>
      <settings-dropdown-menu
          pref="{{prefs.settings.language.xkb_remap_alt_key_to}}"
          menu-options="[[keyMapTargets_]]">
      </settings-dropdown-menu>
    </div>
    <template is="dom-if" if="[[showCapsLock_]]">
      <div class="settings-box" id="capsLockKey">
        <div class="start">$i18n{keyboardKeyCapsLock}</div>
        <settings-dropdown-menu
            pref="{{prefs.settings.language.remap_caps_lock_key_to}}"
            menu-options="[[keyMapTargets_]]">
        </settings-dropdown-menu>
      </div>
    </template>
    <template is="dom-if" if="[[showDiamondKey_]]">
      <div class="settings-box" id="diamondKey">
        <div class="start">$i18n{keyboardKeyDiamond}</div>
        <settings-dropdown-menu
            pref="{{prefs.settings.language.remap_diamond_key_to}}"
            menu-options="[[keyMapTargets_]]">
        </settings-dropdown-menu>
      </div>
    </template>
    <div class="settings-box">
      <div class="start">$i18n{keyboardKeyEscape}</div>
      <settings-dropdown-menu
          pref="{{prefs.settings.language.remap_escape_key_to}}"
          menu-options="[[keyMapTargets_]]">
      </settings-dropdown-menu>
    </div>
    <div class="settings-box">
      <div class="start">$i18n{keyboardKeyBackspace}</div>
      <settings-dropdown-menu
          pref="{{prefs.settings.language.remap_backspace_key_to}}"
          menu-options="[[keyMapTargets_]]">
      </settings-dropdown-menu>
    </div>
    <div class="settings-box">
      <settings-checkbox
          pref="{{prefs.settings.language.send_function_keys}}"
          label="$i18n{keyboardSendFunctionKeys}"
          sub-label="$i18n{keyboardSendFunctionKeysDescription}">
      </settings-checkbox>
    </div>
    <div class="settings-box">
      <settings-checkbox
          pref="{{prefs.settings.language.xkb_auto_repeat_enabled_r2}}"
          label="$i18n{keyboardEnableAutoRepeat}">
      </settings-checkbox>
    </div>
    <iron-collapse
        opened="[[prefs.settings.language.xkb_auto_repeat_enabled_r2.value]]">
      <div class="settings-box continuation settings-checkbox-spacer">
        <div class="start" id="repeatDelayLabel">$i18n{keyRepeatDelay}</div>
        <div class="layout horizontal center">
          <div>$i18n{keyRepeatDelayLong}</div>
          <cr-slider id="delaySlider" class="always-on" snaps
              value="{{prefs.settings.language.xkb_auto_repeat_delay_r2.value}}"
              tick-values="[[autoRepeatDelays_]]"
              disabled="[[!prefs.settings.language.xkb_auto_repeat_enabled_r2.value]]"
              aria-labelledby="repeatDelayLabel">
          </cr-slider>
          <div>$i18n{keyRepeatDelayShort}</div>
        </div>
      </div>
      <div class="settings-box continuation settings-checkbox-spacer">
        <div class="start" id="repeatRateLabel">$i18n{keyRepeatRate}</div>
        <div class="layout horizontal center">
          <div>$i18n{keyRepeatRateSlow}</div>
          <cr-slider id="repeatRateSlider" class="always-on" snaps
              value="{{prefs.settings.language.xkb_auto_repeat_interval_r2.value}}"
              tick-values="[[autoRepeatIntervals_]]"
              disabled="[[!prefs.settings.language.xkb_auto_repeat_enabled_r2.value]]"
              aria-labelledby="repeatRateLabel">
          </cr-slider>
          <div>$i18n{keyRepeatRateFast}</div>
        </div>
      </div>
    </iron-collapse>
    <div id="keyboardOverlay" class="settings-box"
        on-tap="onShowKeyboardShortcutsOverlayTap_" actionable>
      $i18n{showKeyboardShortcutsOverlay}
    </div>
    <div class="settings-box" on-tap="onShowLanguageInputTap_" actionable>
      $i18n{keyboardShowLanguageAndInput}
    </div>
  </template>
  <script src="keyboard.js"></script>
</dom-module>
