import { html } from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
export function getTemplate() {
    return html `<!--_html_template_start_--><style include="shared-style">
  :host {
    --color-password-upload-data-background: var(--google-blue-50);
  }

  @media (prefers-color-scheme: dark) {
    :host {
      --color-password-upload-data-background: var(--google-grey-800);
    }
  }

  .dialog-title {
    font-size: 1.125rem;
    font-weight: 500;
    padding-top: 20px;
  }

  #accountInfo {
    margin-top: 16px;
    margin-bottom: 16px;
  }

  #avatar {
    border-radius: 50%;
    height: 16px;
    margin-inline-end: 10px;
    width: 16px;
  }

  #subtitle {
    word-break: break-word;
  }

  #passwordsSection {
    background-color: var(--color-password-upload-data-background);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    padding: 10px 16px;
  }

  #passwordsTitle {
    color: var(--cr-primary-text-color);
    font-size: 1rem;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
  }

  #buttonRow {
    column-gap: 8px;
  }

  div[slot='body'] {
    max-height: 40vh;
  }
</style>

<cr-dialog id="dialog">
  <h1 slot="title" class="dialog-title">$i18n{movePasswordsDialogTitle}</h1>
  <div slot="body">
    <div id="subtitle">[[descriptionString]]</div>
    <div id="accountInfo" class="flex-centered">
      <img id="avatar" src="[[avatarImage]]">
      <div id="accountEmail" class="label">[[accountEmail]]</div>
    </div>
    <template is="dom-if" if="[[!hasOnlyOneDeviceCredential]]" restamp>
      <div id="passwordsSection">
        <h2 id="passwordsTitle" class="text-elide">[[passwordsTitle]]</h2>
        <template is="dom-repeat" id="passwords" scroll-target="dialog-body"
              items="[[passwords]]">
            <password-preview-item password-id="[[item.id]]"
                username="[[item.username]]" password="[[item.password]]"
                on-change="onPasswordPreviewItemChange_" checked>
            </password-preview-item>
        </template>
      </div>
    </template>
  </div>
  <div id="buttonRow" slot="button-container">
    <cr-button class="tonal-button" on-click="onCancelClick_">
      $i18n{cancel}
    </cr-button>
    <cr-button id="acceptButton"
        class="action-button" on-click="onAcceptButtonClick_"
        disabled="[[!selectedPasswordIds_.length]]">
      $i18n{movePasswordsDialogSaveButton}
    </cr-button>
  </div>
</cr-dialog>
<!--_html_template_end_-->`;
}
