<div id="manage-profile-overlay" class="page" hidden>
  <div class="close-button"></div>
  <!-- Dialog for managing profiles. -->
  <div id="manage-profile-overlay-manage" hidden>
    <h1 i18n-content="manageProfile"></h1>
    <div id="manage-profile-content" class="content-area">
      <div id="manage-profile-icon-label"
          i18n-content="manageProfilesIconLabel">
      </div>
      <grid id="manage-profile-icon-grid"></grid>
      <div id="manage-profile-name-input-container">
        <label>
          <span id="manage-profile-name-label" for="manage-profile-name"
              i18n-content="manageProfilesNameLabel">
          </span>
          <input id="manage-profile-name" type="text" required>
        </label>
      </div>
      <div id="manage-profile-error-bubble" hidden></div>
    </div>
    <div class="action-area">
      <div class="action-area-shortcut-container">
        <button id="remove-shortcut-button"
            i18n-content="removeProfileShortcutButton" hidden>
        </button>
        <button id="add-shortcut-button"
            i18n-content="createProfileShortcutButton" hidden>
        </button>
      </div>
      <div class="button-strip">
        <button id="manage-profile-cancel" i18n-content="cancel"></button>
        <button id="manage-profile-ok" i18n-content="ok"
            class="default-button"></button>
      </div>
    </div>
  </div>
  <!-- Dialog for deleting profiles. -->
  <div id="manage-profile-overlay-delete" hidden>
    <h1 i18n-content="deleteProfileTitle"></h1>
    <div class="content-area">
      <div id="delete-profile-message"></div>
      <div id="delete-managed-profile-addendum"
          i18n-values=".innerHTML:deleteManagedProfileAddendum" hidden>
      </div>
    </div>
    <div class="action-area button-strip">
      <button id="delete-profile-cancel" i18n-content="cancel"></button>
      <button id="delete-profile-ok" class="default-button"
          i18n-content="deleteProfileOK"></button>
    </div>
  </div>
  <!-- Dialog for creating profiles. -->
  <div id="manage-profile-overlay-create" hidden>
    <h1 i18n-content="createProfileTitle"></h1>
    <div id="create-profile-content" class="content-area">
      <div id="create-profile-instructions"></div>
      <grid id="create-profile-icon-grid"></grid>
      <div id="create-profile-name-input-container">
        <label>
          <span id="create-profile-name-label" for="create-profile-name"
              i18n-content="manageProfilesNameLabel">
          </span>
          <input id="create-profile-name" type="text" required>
        </label>
      </div>
      <div id="create-profile-error-bubble" hidden></div>
    </div>
    <div class="content-area">
      <div id="create-shortcut-container" class="checkbox" hidden>
        <label>
          <input id="create-shortcut" type="checkbox">
          <span for="create-shortcut"
              i18n-content="createProfileShortcutCheckbox">
          </span>
        </label>
      </div>
      <div id="create-profile-managed-container" class="checkbox" hidden>
        <label>
          <input id="create-profile-managed" type="checkbox">
          <span id="create-profile-managed-signed-in">
            <span id="create-profile-managed-signed-in-label"></span>
            <span id="create-profile-managed-account-details-out-of-date-label"
                hidden>
            </span>
            <button id="create-profile-managed-signed-in-learn-more-link"
                class="link-button" i18n-content="learnMore">
            </button>
            <button id="create-profile-managed-sign-in-again-link"
                class="link-button"
                i18n-content="manageProfilesManagedSignInAgainLink" hidden>
            </button>
          </span>
          <span id="create-profile-managed-not-signed-in" hidden>
            <span id="create-profile-managed-not-signed-in-label"
                i18n-content="manageProfilesManagedNotSignedInLabel">
            </span>
            <button id="create-profile-managed-not-signed-in-link"
                class="link-button"
                i18n-content="manageProfilesManagedNotSignedInLink">
            </button>
          </span>
        </label>
        <label>
          <span id="select-existing-managed-profile">
            <input id="select-existing-managed-profile-checkbox"
                type="checkbox">
            <span id="select-existing-managed-profile-label"
                for="select-existing-managed-profile-checkbox"
                i18n-content="manageProfilesSelectExistingManagedProfileLabel">
            </span>
          </span>
        </label>
        <label>
          <select id="choose-existing-managed-profile">
          </select>
        </label>
        <span id="create-profile-managed-indicator"
            class="bubble-button controlled-setting-indicator">
        </span>
      </div>
    </div>
    <div class="action-area">
      <div id="create-profile-throbber" class="throbber"></div>
      <div class="button-strip">
        <button id="create-profile-cancel" i18n-content="cancel"></button>
        <button id="create-profile-ok" i18n-content="createProfileConfirm"
            class="default-button">
        </button>
      </div>
    </div>
  </div>
</div>