<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.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.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="languages.html">

<dom-module id="settings-manage-languages-page">
  <link rel="import" type="css"
      href="chrome://md-settings/settings_shared.css">
  <link rel="import" type="css" href="manage_languages_page.css">
  <template>
    <settings-languages languages="{{languages}}"></settings-languages>
    <div class="settings-box content">
      <h2 i18n-content="enabledLanguages"></h2>
      <div>
        <template is="dom-repeat" items="{{languages.enabledLanguages}}">
          <paper-item class="split">
            <div class="language-name"
                title="[[item.language.nativeDisplayName]]"
                >[[item.language.displayName]]</div>
            <paper-icon-button icon="clear" on-tap="onRemoveLanguageTap_"
                hidden$="[[!canRemoveLanguage_(item.language.code, prefs.intl.app_locale.value)]]">
            </paper-icon-button>
          </paper-item>
        </template>
      </div>
      <h2 i18n-content="allLanguages"></h2>
      <iron-list items="{{availableLanguages_}}" as="item">
        <template>
          <paper-item on-tap="onAddLanguageTap_">
            <div class="language-name">
              <span>[[item.displayName]]</span> -
              <span>[[item.nativeDisplayName]]</span>
            </div>
            <iron-icon icon="done" hidden$="[[!item.enabled]]">
            </iron-icon>
          </paper-item>
        </template>
      </iron-list>
    </div>
  </template>
  <script src="manage_languages_page.js"></script>
</dom-module>

