// Copyright 2024 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_-->
${html `
  <div class="main-container tangible-sync-style"
    id="${this.showTimeout_ ? 'timeout-main-container' : ''}">
    <img class="tangible-sync-style-left-banner" alt="">
    <img class="tangible-sync-style-right-banner" alt="">
    <div id="content-container">
      ${this.showValueProposition_ ? html `
        <managed-user-profile-notice-value-prop id="value-prop"
            title="${this.valuePropTitle_}"
            subtitle="${this.valuePropSubtitle_}"
            picture-url="${this.pictureUrl_}"
            email="${this.email_}" account-name="${this.accountName_}"
            ?show-enterprise-badge="${this.showEnterpriseBadge_}">
        </managed-user-profile-notice-value-prop>
      ` : ''}
      ${this.showDisclosure_ ? html `
        <managed-user-profile-notice-disclosure id="disclosure"
            title="${this.disclosureTitle_}"
            subtitle="${this.disclosureSubtitle_}"
            picture-url="${this.pictureUrl_}"
            ?show-enterprise-badge="${this.showEnterpriseBadge_}">
        </managed-user-profile-notice-disclosure>
      ` : ''}
      ${this.showProcessing_ ? html `
        <managed-user-profile-notice-state id="processing"
            subtitle="${this.processingSubtitle_}" icon="cr:domain">
              <div class="spinner"></div>
        </managed-user-profile-notice-state>
      ` : ''}
      ${this.showSuccess_ ? html `
        <managed-user-profile-notice-state id="success" icon="cr:domain"
            title="$i18n{successTitle}" subtitle="$i18n{successSubtitle}">
          <img class="success-icon" alt="">
        </managed-user-profile-notice-state>
      ` : ''}
      ${this.showTimeout_ ? html `
        <managed-user-profile-notice-state id="timeout" icon="cr:domain"
            title="$i18n{timeoutTitle}" subtitle="$i18n{timeoutSubtitle}">
          <img class="timeout-icon" alt="">
        </managed-user-profile-notice-state>
      ` : ''}
      ${this.showError_ ? html `
        <managed-user-profile-notice-state id="error" icon="cr:domain"
            title="${this.errorTitle_}" subtitle="${this.errorSubtitle_}">
          <img class="error-icon" alt="">
        </managed-user-profile-notice-state>
      ` : ''}
      ${this.showUserDataHandling_ ? html `
        <managed-user-profile-notice-data-handling id="user-data-handling"
            title="${this.separateDataTitle_}"
            separate-data-choice-title="${this.separateDataChoiceTitle_}"
            separate-data-choice-details="${this.separateDataChoiceDetails_}"
            merge-data-choice-title="${this.mergeDataChoiceTitle_}"
            merge-data-choice-details="${this.mergeDataChoiceDetails_}"
            .selectedDataHandling="${this.selectedDataHandling_}"
            @selected-data-handling-changed="${this.onSelectedDataHandlingChanged_}">
        </managed-user-profile-notice-data-handling>
      ` : ''}
    </div>
  </div>
  <div class="action-container tangible-sync-style"
    id="${this.showTimeout_ ? 'timeout-action-container' : ''}">
    <cr-button id="proceed-button" class="action-button"
        @click="${this.onProceedClick_}"
        ?disabled="${!this.allowProceedButton_()}"
        ?hidden="${this.showProcessing_}">
      ${this.proceedLabel_}
    </cr-button>
    <cr-button id="cancel-button"
        class="${this.getCancelButtonClass_()}"
        @click="${this.onCancelClick_}" ?hidden="${!this.allowCancel_()}">
      ${this.cancelLabel_}
    </cr-button>
  </div>
`}
<!--_html_template_end_-->`;
    // clang-format on
}
