import { html } from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
export function getTemplate() {
    return html `<!--_html_template_start_-->    <style include="cr-shared-style settings-shared">
      .delete-profile-warning {
        padding-bottom: 10px;
        padding-inline-end: var(--cr-section-padding);
        /* In order to line up with the checkbox text. */
        padding-inline-start: calc(var(--cr-section-padding) + 32px);
        padding-top: 10px;
      }

      #wideFooter {
        /* Override the cr-dialog footer padding. */
        padding: 0;
      }

      #dialog-body {
        /* Add space for the link focus ring. See https://crbug.com/41432789. */
        padding-bottom: 2px;
      }
    </style>

    <cr-dialog id="dialog" ignore-enter-key close-text="$i18n{close}">
      <div slot="title">$i18n{syncDisconnectTitle}</div>
      <div id="dialog-body" slot="body">
        <div inner-h-t-m-l="[[
            getDisconnectExplanationHtml_(syncStatus.domain)]]">
        </div>
      </div>
      <div slot="button-container">
        <cr-button id="disconnectCancel" class="cancel-button"
            on-click="onDisconnectCancel_">
          $i18n{cancel}
        </cr-button>
        <cr-button id="disconnectConfirm" class="action-button"
            on-click="onDisconnectConfirm_">
          $i18n{syncDisconnect}
        </cr-button>
      </div>

      <div id="wideFooter" slot="footer">
        <div class="cr-row first">
          <cr-checkbox id="deleteProfile" class="flex"
              checked="{{deleteProfile_}}">
            $i18n{syncDisconnectDeleteProfile}
          </cr-checkbox>
          <cr-expand-button
              no-hover
              expanded="{{deleteProfileWarningVisible_}}"
              aria-label="$i18n{deleteProfileWarningExpandA11yLabel}">
          </cr-expand-button>
        </div>
        <cr-collapse opened="[[deleteProfileWarningVisible_]]">
          <div class="delete-profile-warning">
            [[deleteProfileWarning_]]
          </div>
        </cr-collapse>
      </div>

    </cr-dialog>
<!--_html_template_end_-->`;
}
