<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.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-input/paper-input.html">
<link rel="import" href="chrome://md-settings/people_page/sync_private_api.html">

<dom-module id="settings-manage-profile">
  <link rel="import" type="css"
      href="chrome://md-settings/settings_shared.css">
  <link rel="import" type="css" href="manage_profile.css">
  <template>
    <div class="settings-box">
      <paper-input value="{{profileName}}" pattern=".*\S.*" auto-validate
          on-blur="onProfileNameChanged_">
      </paper-input>
      <div id="availableIcons">
        <template is="dom-repeat" items="[[availableIconUrls]]">
          <paper-button toggles active="{{isActiveIcon_(item, profileIconUrl)}}"
              on-tap="onIconTap_" data-icon-url$="[[item]]">
            <img src="[[item]]">
          </paper-button>
        </template>
      </div>
    </div>
  </template>
  <script src="manage_profile.js"></script>
</dom-module>
