<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html">
<link rel="import" href="/i18n_setup.html">
<link rel="import" href="/clear_browsing_data_dialog/clear_browsing_data_browser_proxy.html">
<link rel="import" href="/clear_browsing_data_dialog/history_deletion_dialog.html">
<link rel="import" href="/controls/settings_checkbox.html">
<link rel="import" href="/controls/settings_dropdown_menu.html">
<link rel="import" href="/icons.html">
<link rel="import" href="/settings_shared_css.html">

<dom-module id="settings-clear-browsing-data-dialog">
  <template>
    <style include="settings-shared">
      #dialog {
        max-width: 600px;
      }

      #dialog:not(.fully-rendered) {
        visibility: hidden;
      }

      #dialog .button-container {
        border-top: 1px solid rgba(0, 0, 0, 0.14);
        margin-top: 0;
        padding-top: 10px;
      }

      #dialog .footer {
        background-color: #fff;
        color: var(--paper-grey-600);
      }

      .row {
        align-items: center;
        display: flex;
        min-height: 40px;
      }

      paper-spinner {
        -webkit-margin-end: 16px;
        margin-bottom: auto;
        margin-top: auto;
      }

      #generalFooter {
        margin: 0;
        min-height: 18px;
      }

      #generalFooter iron-icon {
        height: 18px;
        padding: 1px;
        width: 18px;
      }

      #googleFooter {
        margin: 0 0 0.8em 0;
        min-height: 16px;
      }

      #googleFooter iron-icon {
        height: 16px;
        padding: 2px;
        width: 16px;
      }

      .clear-browsing-data-footer {
        align-items: flex-start;
        display: flex;
        line-height: 1.538em; /* 20px/13px */
        padding-left: 4px;
      }

      .clear-browsing-data-footer .footer-text {
        -webkit-margin-start: 16px;
      }

      .clear-browsing-data-footer iron-icon {
        flex-shrink: 0;
      }

      .clear-browsing-data-footer a {
        text-decoration: none;
      }

      :host {
        --settings-secondary-unchecked: {
          display: none;
        };
      }

      #clearFrom {
        margin-left: 0.5em;
      }

      /* Cap the height on smaller screens to avoid unfavorable clipping.
       * Replace the bottom margin with padding to avoid the gap between
       * the scrollbar and the bottom separator. */
      @media all and (max-height: 724px) {
        #dialog .body {
          margin-bottom: 0;
          /* crbug.com/652027: Show four and a *half* items in the list. */
          max-height: 280px;
          overflow-y: scroll;
          padding-bottom: 12px;
        }
      }
    </style>

    <dialog is="cr-dialog" id="dialog" ignore-popstate>
      <div class="title">$i18n{clearBrowsingData}</div>
      <div class="body">
        <div class="row">
          $i18n{clearFollowingItemsFrom}
          <settings-dropdown-menu id="clearFrom"
              pref="{{prefs.browser.clear_data.time_period}}"
              menu-options="[[clearFromOptions_]]">
          </settings-dropdown-menu>
        </div>
        <settings-checkbox id="browsingCheckbox"
            pref="{{prefs.browser.clear_data.browsing_history}}"
            label="$i18n{clearBrowsingHistory}"
            sub-label="[[counters_.browsing_history]]"
            disabled="[[clearingInProgress_]]">
        </settings-checkbox>
        <settings-checkbox id="downloadCheckbox"
            pref="{{prefs.browser.clear_data.download_history}}"
            label="$i18n{clearDownloadHistory}"
            sub-label="[[counters_.download_history]]"
            disabled="[[clearingInProgress_]]">
        </settings-checkbox>
        <settings-checkbox
            pref="{{prefs.browser.clear_data.cache}}"
            label="$i18n{clearCache}"
            sub-label="[[counters_.cache]]"
            disabled="[[clearingInProgress_]]">
        </settings-checkbox>
        <settings-checkbox
            pref="{{prefs.browser.clear_data.cookies}}"
            label="$i18n{clearCookies}"
            sub-label="$i18n{clearCookiesCounter}"
            disabled="[[clearingInProgress_]]">
        </settings-checkbox>
        <settings-checkbox
            pref="{{prefs.browser.clear_data.passwords}}"
            label="$i18n{clearPasswords}"
            sub-label="[[counters_.passwords]]"
            disabled="[[clearingInProgress_]]">
        </settings-checkbox>
        <settings-checkbox
            pref="{{prefs.browser.clear_data.form_data}}"
            label="$i18n{clearFormData}"
            sub-label="[[counters_.form_data]]"
            disabled="[[clearingInProgress_]]">
        </settings-checkbox>
        <settings-checkbox
            pref="{{prefs.browser.clear_data.hosted_apps_data}}"
            label="$i18n{clearHostedAppData}"
            sub-label="[[counters_.hosted_apps_data]]"
            disabled="[[clearingInProgress_]]">
        </settings-checkbox>
        <settings-checkbox
            pref="{{prefs.browser.clear_data.media_licenses}}"
            label="$i18n{clearMediaLicenses}"
            sub-label="[[counters_.media_licenses]]"
            disabled="[[clearingInProgress_]]">
        </settings-checkbox>
      </div>
      <div class="button-container">
        <paper-spinner active="[[clearingInProgress_]]"></paper-spinner>
        <paper-button class="cancel-button" disabled="[[clearingInProgress_]]"
            on-tap="onCancelTap_">$i18n{cancel}</paper-button>
        <paper-button class="action-button" disabled="[[clearingInProgress_]]"
            on-tap="onClearBrowsingDataTap_">
          $i18n{clearBrowsingData}
        </paper-button>
      </div>
      <div class="footer">
        <div id="googleFooter" class="clear-browsing-data-footer">
          <iron-icon icon="settings:googleg"></iron-icon>
          <div class="footer-text">$i18nRaw{otherFormsOfBrowsingHistory}</div>
        </div>
        <div id="generalFooter" class="clear-browsing-data-footer">
          <iron-icon icon="settings:info"></iron-icon>
          <div class="footer-text">
            <span id="syncedDataSentence">$i18n{clearsSyncedData}</span>
            <span>$i18n{warnAboutNonClearedData}</span>
            <a id="clear-browser-data-old-learn-more-link"
                href="$i18n{clearBrowsingDataLearnMoreUrl}"
                target="_blank">$i18n{learnMore}</a>
          </div>
        </div>
      </div>
    </dialog>

    <template is="dom-if" if="[[showHistoryDeletionDialog_]]" restamp>
      <settings-history-deletion-dialog id="notice"
          on-close="onHistoryDeletionDialogClose_">
      </settings-history-deletion-dialog>
    </template>
  </template>
  <script src="clear_browsing_data_dialog.js"></script>
</dom-module>
