// Copyright 2026 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import { html } from '//resources/lit/v3_0/lit.rollup.js';
export function getHtml() {
    // clang-format off
    return html `<!--_html_template_start_-->

<!--
  Use the 'consent-description' attribute to annotate all the UI elements
  that are part of the text the user reads before consenting to the Sync
  data collection . Similarly, use 'consent-confirmation' on UI elements on
  which user clicks to indicate consent.
-->

<div class="main-container tangible-sync-style
    ${this.getMaybeDialogClass_()}">
  <div id="contentContainer" class="${this.getAnimationClass_()}">
    <div id="avatarContainer">
      <img class="loading-spinner"
          src="chrome://resources/images/throbber_small.svg"
          ?hidden="${!this.isPending_()}">
      <img id="avatar" alt="" src="${this.accountImageSrc_}"
          ?hidden="${this.isPending_()}">
      <div id="badge" class="work-badge"
          ?hidden="${this.shouldHideEnterpriseBadge_()}">
        <cr-icon icon="cr:domain" aria-hidden="true"></cr-icon>
      </div>
    </div>
    <h1 class="title" consent-description>
      $i18n{syncConfirmationTitle}
    </h1>
    <div class="subtitle" consent-description>
      $i18n{syncConfirmationSyncInfoTitle}
    </div>
    <div id="syncBenefitsList">
      ${this.syncBenefitsList_.map(item => html `
        <div class="sync-benefit">
          <cr-icon class="sync-benefit-icon" icon="${item.iconName}"
              aria-hidden="true">
          </cr-icon>
          <div class="sync-benefit-text" consent-description>
            ${this.i18n(item.title)}
          </div>
        </div>
      `)}
    </div>
    <div class="sync-info-desc secondary"
          ?hidden="${this.useClickableSyncInfoDesc_}" consent-description>
      $i18n{syncConfirmationSyncInfoDesc}
    </div>
    <localized-link class="sync-info-desc secondary"
        consent-description
        ?hidden="${!this.useClickableSyncInfoDesc_}"
        localized-string="$i18n{syncConfirmationSyncInfoDesc}"
        @link-clicked="${this.onDisclaimerLinkClicked_}">
    </localized-link>
    <div class="action-row ${this.getAnimationClass_()}
        ${this.getMaybeDialogClass_()}">
      ${this.anyButtonClicked_ ? html `<div class="spinner"></div>` : ''}
      <div class="action-container ${this.getMaybeDialogClass_()}">
        <cr-button id="confirmButton"
            class="${this.getConfirmButtonClass_()}"
            @click="${this.onConfirmClick_}"
            ?disabled="${this.anyButtonClicked_}" consent-confirmation
            ?autofocus="${this.isModalDialog_}">
          $i18n{syncConfirmationConfirmLabel}
        </cr-button>
        
          <cr-button id="settingsButton" @click="${this.onGoToSettingsClick_}"
              ?disabled="${this.anyButtonClicked_}" consent-confirmation>
            $i18n{syncConfirmationSettingsLabel}
          </cr-button>
        
        <cr-button id="notNowButton"
            class="${this.getNotNowButtonClass_()}"
            @click="${this.onUndoClick_}" ?disabled="${this.anyButtonClicked_}">
          $i18n{syncConfirmationUndoLabel}
        </cr-button>
        
      </div>
    </div>
  </div>
</div>
<!--_html_template_end_-->`;
    // clang-format on
}
