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

<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys/iron-a11y-keys.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="../global_scroll_target_behavior.html">
<link rel="import" href="../prefs/prefs.html">
<link rel="import" href="../prefs/prefs_behavior.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="../settings_vars_css.html">

<dom-module id="settings-edit-dictionary-page">
  <template>
    <style include="settings-shared">
      :host {
        display: flex;
        flex-direction: column;
      }

      #newWord {
        width: 100%;
        --cr-input-width: var(--settings-input-max-width);
      }

      iron-list .word {
        flex: 1;
      }
    </style>
    <div class="settings-box first">
      <iron-a11y-keys id="keys" keys="enter esc"
          on-keys-pressed="onKeysPress_"></iron-a11y-keys>
      <cr-input id="newWord" value="{{newWordValue_}}"
          placeholder="$i18n{addDictionaryWordLabel}"
          invalid="[[isWordInvalid_(newWordValue_)]]"
          error-message="[[isWordInvalid_(newWordValue_,
              '$i18nPolymer{addDictionaryWordDuplicateError}',
              '$i18nPolymer{addDictionaryWordLengthError}')]]"
          spellcheck="false">
        <paper-button class="secondary-button" on-click="onAddWordTap_"
            disabled="[[disableAddButton_(newWordValue_)]]" id="addWord"
            slot="suffix">
          $i18n{addDictionaryWordButton}
        </paper-button>
      </cr-input>
    </div>
    <div class="settings-box continuation block">
      <h2>$i18n{customDictionaryWords}</h2>
    </div>
    <div class="list-frame">
      <template is="dom-if" if="[[hasWords_]]">
        <iron-list id="list" items="[[words_]]" preserve-focus
            scroll-target="[[subpageScrollTarget]]">
          <template>
            <div class="list-item">
              <div class="word text-elide">[[item]]</div>
              <paper-icon-button-light class="icon-clear">
                <button on-click="onRemoveWordTap_" tabindex$="[[tabIndex]]">
                </button>
              </paper-icon-button-light>
            </div>
          </template>
        </iron-list>
      </template>
      <div id="noWordsLabel" class="list-item" hidden$="[[hasWords_]]">
        $i18n{noCustomDictionaryWordsFound}
      </div>
    </div>
  </template>
  <script src="edit_dictionary_page.js"></script>
</dom-module>