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

<link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
<link rel="import" href="../controls/settings_dropdown_menu.html">
<link rel="import" href="../controls/settings_slider.html">
<link rel="import" href="../controls/settings_toggle_button.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>
    <template is="dom-if" if="[[hasInternalKeyboard_]]">
      <div class="settings-box first" id="internalSearchKey">
        <div class="start">$i18n{keyboardKeySearch}</div>
        <settings-dropdown-menu label="$i18n{keyboardKeySearch}"
            pref="{{prefs.settings.language.xkb_remap_search_key_to}}"
            menu-options="[[keyMapTargets_]]">
        </settings-dropdown-menu>
      </div>
    </template>
    <div class="settings-box">
      <div class="start">$i18n{keyboardKeyCtrl}</div>
      <settings-dropdown-menu label="$i18n{keyboardKeyCtrl}"
          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 label="$i18n{keyboardKeyAlt}"
          pref="{{prefs.settings.language.xkb_remap_alt_key_to}}"
          menu-options="[[keyMapTargets_]]">
      </settings-dropdown-menu>
    </div>
    <div class="settings-box">
      <div class="start">$i18n{keyboardKeyEscape}</div>
      <settings-dropdown-menu label="$i18n{keyboardKeyEscape}"
          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 label="$i18n{keyboardKeyBackspace}"
          pref="{{prefs.settings.language.remap_backspace_key_to}}"
          menu-options="[[keyMapTargets_]]">
      </settings-dropdown-menu>
    </div>
    <template is="dom-if" if="[[hasAssistantKey_]]">
      <div class="settings-box" id="assistantKey">
        <div class="start">$i18n{keyboardKeyAssistant}</div>
        <settings-dropdown-menu label="$i18n{keyboardKeyAssistant}"
            pref="{{prefs.settings.language.xkb_remap_assistant_key_to}}"
            menu-options="[[keyMapTargets_]]">
        </settings-dropdown-menu>
      </div>
    </template>
    <template is="dom-if" if="[[showCapsLock_]]">
      <div class="settings-box" id="capsLockKey">
        <div class="start">$i18n{keyboardKeyCapsLock}</div>
        <settings-dropdown-menu label="$i18n{keyboardKeyCapsLock}"
            pref="{{prefs.settings.language.remap_caps_lock_key_to}}"
            menu-options="[[keyMapTargets_]]">
        </settings-dropdown-menu>
      </div>
    </template>
    <template is="dom-if" if="[[showExternalMetaKey_]]">
      <div class="settings-box" id="externalMetaKey">
        <div class="start">
          [[getExternalMetaKeyLabel_(hasInternalKeyboard_)]]
        </div>
        <settings-dropdown-menu
            label="[[getExternalMetaKeyLabel_(hasInternalKeyboard_)]]"
            pref="{{prefs.settings.language.remap_external_meta_key_to}}"
            menu-options="[[keyMapTargets_]]">
        </settings-dropdown-menu>
      </div>
    </template>
    <template is="dom-if" if="[[showAppleCommandKey_]]">
      <div class="settings-box" id="externalCommandKey">
        <div class="start">
          [[getExternalCommandKeyLabel_(hasInternalKeyboard_)]]
        </div>
        <settings-dropdown-menu
            label="[[getExternalCommandKeyLabel_(hasInternalKeyboard_)]]"
            pref="{{prefs.settings.language.remap_external_command_key_to}}"
            menu-options="[[keyMapTargets_]]">
        </settings-dropdown-menu>
      </div>
    </template>
    <settings-toggle-button
        pref="{{prefs.settings.language.send_function_keys}}"
        label="$i18n{keyboardSendFunctionKeys}"
        sub-label="$i18n{keyboardSendFunctionKeysDescription}">
    </settings-toggle-button>
    <settings-toggle-button
        pref="{{prefs.settings.language.xkb_auto_repeat_enabled_r2}}"
        label="$i18n{keyboardEnableAutoRepeat}">
    </settings-toggle-button>
    <iron-collapse
        opened="[[prefs.settings.language.xkb_auto_repeat_enabled_r2.value]]">
      <div class="settings-box continuation embedded">
        <div class="start" id="repeatDelayLabel">$i18n{keyRepeatDelay}</div>
        <settings-slider id="delaySlider"
            pref="{{prefs.settings.language.xkb_auto_repeat_delay_r2}}"
            ticks="[[autoRepeatDelays_]]"
            disabled="[[
                !prefs.settings.language.xkb_auto_repeat_enabled_r2.value]]"
            aria-labelledby="repeatDelayLabel"
            label-min="$i18n{keyRepeatDelayLong}"
            label-max="$i18n{keyRepeatDelayShort}">
        </settings-slider>
      </div>
      <div class="settings-box continuation embedded">
        <div class="start" id="repeatRateLabel">$i18n{keyRepeatRate}</div>
        <settings-slider id="repeatRateSlider"
            pref="{{
                prefs.settings.language.xkb_auto_repeat_interval_r2}}"
            ticks="[[autoRepeatIntervals_]]"
            disabled="[[
                !prefs.settings.language.xkb_auto_repeat_enabled_r2.value]]"
            aria-labelledby="repeatRateLabel"
            label-min="$i18n{keyRepeatRateSlow}"
            label-max="$i18n{keyRepeatRateFast}">
        </settings-slider>
      </div>
    </iron-collapse>
    <cr-link-row id="keyboardShortcutViewer" class="hr"
        on-click="onShowKeyboardShortcutViewerTap_"
        label="$i18n{showKeyboardShortcutViewer}" external></cr-link-row>
    <cr-link-row class="hr" on-click="onShowLanguageInputTap_"
        label="$i18n{keyboardShowLanguageAndInput}"></cr-link-row>
  </template>
  <script src="keyboard.js"></script>
</dom-module>
