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">
  #headerLine {
    margin: 8px;
  }

  #backToSettingsButton {
    /* Centers the ripple on the icon with appropriate margin on right. */
    margin-inline-end: 10px;
    margin-inline-start: -10px;
  }

  #dialog {
    background-color: var(--cr-card-background-color);
    border: 0;
    height: 100vh;
    margin: 0;
    max-height: 100vh;
    max-width: 100vw;
    padding: 0;
    width: 100vw;
  }

  #dialog[open] {
    display: block;
  }

  settings-privacy-guide-page::part(privacyGuideCard) {
    background-color: transparent;
    box-shadow: none;
    margin: auto;
    max-width: 680px;
    min-width: 550px;
  }
</style>
<dialog id="dialog" on-cancel="onDialogCancel_" on-close="onDialogClose_"
    aria-label="$i18n{privacyGuideLabel}">
  <div class="cr-row first" id="headerLine" slot="title">
    <cr-icon-button class="icon-arrow-back" id="backToSettingsButton"
        on-click="onSettingsBackClick_"
        aria-label="$i18n{privacyGuideBackToSettingsAriaLabel}"
        aria-roledescription=
        "$i18n{privacyGuideBackToSettingsAriaRoleDescription}">
    </cr-icon-button>
    <h1 class="cr-title-text">$i18n{privacyGuideLabel}</h1>
  </div>
  <settings-privacy-guide-page on-close="onPrivacyGuidePageClose_"
      prefs="{{prefs}}" slot="body">
  </settings-privacy-guide-page>
</dialog>
<!--_html_template_end_-->`;
}
