<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/cr_profile_avatar_selector/cr_profile_avatar_selector.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
<link rel="import" href="../i18n_setup.html">
<link rel="import" href="manage_profile_browser_proxy.html">
<link rel="import" href="../route.html">
<link rel="import" href="../settings_shared_css.html">

<dom-module id="settings-manage-profile">
  <template>
    <style include="settings-shared">
      cr-input {
        --cr-input-error-display: none;
      }

      #selector {
        margin: 16px 48px;
      }
    </style>
    <div class="settings-box first">
      <cr-input id="name" value="[[profileName]]" pattern=".*\S.*"
          on-change="onProfileNameChanged_" on-keydown="onProfileNameKeydown_"
          disabled="[[isProfileNameDisabled_(syncStatus)]]" maxlength="500"
          auto-validate required spellcheck="false">
      </cr-input>
    </div>
    <template is="dom-if" if="[[isProfileShortcutSettingVisible_]]">
      <div class="settings-box first">
        <div id="showShortcutLabel" class="start">$i18n{showShortcutLabel}</div>
        <cr-toggle id="hasShortcutToggle"
            checked="{{hasProfileShortcut_}}"
            on-change="onHasProfileShortcutChange_"
            aria-labelledby="showShortcutLabel">
        </cr-toggle>
      </div>
    </template>
    <cr-profile-avatar-selector id="selector" avatars="[[availableIcons]]"
        selected-avatar="{{profileAvatar_}}" ignore-modified-key-events>
    </cr-profile-avatar-selector>
  </template>
  <script src="manage_profile.js"></script>
</dom-module>
