<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/html/action_link.html">
<link rel="import" href="chrome://resources/cr_elements/action_link_css.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="../icons.html">
<link rel="import" href="../route.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="constants.html">
<link rel="import" href="site_details_permission.html">
<link rel="import" href="site_settings_behavior.html">
<link rel="import" href="website_usage_private_api.html">

<dom-module id="site-details">
  <template>
    <style include="settings-shared action-link">
      .favicon-image {
        margin: 2px;
      }

      #storage {
        padding-inline-end: 0;
      }

      #storageText {
        display: flex;
      }

      #resetSettingsButton {
        margin-top: 24px;
      }
    </style>
    <!-- Confirm reset settings dialog. -->
    <cr-dialog id="confirmResetSettings" close-text="$i18n{close}"
        on-close="onResetSettingsDialogClosed_">
      <div slot="body">
        [[i18n('siteSettingsSiteResetConfirmation', pageTitle)]]
      </div>
      <div slot="button-container">
        <cr-button class="cancel-button" on-click="onCloseDialog_">
          $i18n{cancel}
        </cr-button>
        <cr-button class="action-button" on-click="onResetSettings_">
          $i18n{siteSettingsSiteResetAll}
        </cr-button>
      </div>
    </cr-dialog>

    <!-- Confirm clear storage dialog. -->
    <cr-dialog id="confirmClearStorage" close-text="$i18n{close}"
        on-close="onClearStorageDialogClosed_">
      <div slot="title">
        $i18n{siteSettingsSiteClearStorageDialogTitle}
      </div>
      <div slot="body">
        [[i18n('siteSettingsSiteClearStorageConfirmation', pageTitle)]]
      </div>
      <div slot="button-container">
        <cr-button class="cancel-button" on-click="onCloseDialog_">
          $i18n{cancel}
        </cr-button>
        <cr-button class="action-button" on-click="onClearStorage_">
          $i18n{siteSettingsSiteClearStorage}
        </cr-button>
      </div>
    </cr-dialog>

    <div id="usage">
      <div class="settings-box first line-only">
        <h2 class="first">$i18n{siteSettingsUsage}</h2>
      </div>
      <div class="list-frame">
        <div class="list-item" id="noStorage"
            hidden$="[[hasUsage_(storedData_, numCookies_)]]">
          <div class="start">$i18n{siteSettingsUsageNone}</div>
        </div>
        <div class="list-item" id="storage"
            hidden$="[[!hasUsage_(storedData_, numCookies_)]]">
          <div class="start" id="storageText">
            <div hidden$="[[!storedData_]]">[[storedData_]]</div>
            <div hidden$="[[!hasDataAndCookies_(storedData_, numCookies_)]]">
              &nbsp;&middot;&nbsp;
            </div>
            <div hidden$="[[!numCookies_]]">[[numCookies_]]</div>
          </div>
          <cr-button id="clearStorage" role="button" aria-disabled="false"
              on-click="onConfirmClearStorage_"
              aria-label="$i18n{siteSettingsDelete}">
            $i18n{siteSettingsDelete}
          </cr-button>
        </div>
      </div>
    </div>

    <div class="settings-box first">
      <h2 class="start">$i18n{siteSettingsPermissions}</h2>
      <cr-button id="resetSettingsButton" class="header-aligned-button"
          role="button" aria-disabled="false"
          on-click="onConfirmClearSettings_">
        $i18n{siteSettingsReset}
      </cr-button>
    </div>
    <div class="list-frame">
      <site-details-permission category="{{ContentSettingsTypes.GEOLOCATION}}"
          icon="cr:location-on" id="geolocation"
          label="$i18n{siteSettingsLocation}">
      </site-details-permission>
      <site-details-permission category="{{ContentSettingsTypes.CAMERA}}"
          icon="cr:videocam" id="camera"
          label="$i18n{siteSettingsCamera}">
      </site-details-permission>
      <site-details-permission category="{{ContentSettingsTypes.MIC}}"
          icon="cr:mic" id="mic"
          label="$i18n{siteSettingsMic}">
      </site-details-permission>
      <site-details-permission
          category="{{ContentSettingsTypes.SENSORS}}"
          icon="settings:sensors" id="sensors"
          label="$i18n{siteSettingsSensors}">
      </site-details-permission>
      <site-details-permission category="{{ContentSettingsTypes.NOTIFICATIONS}}"
          icon="settings:notifications" id="notifications"
          label="$i18n{siteSettingsNotifications}">
      </site-details-permission>
      <site-details-permission category="{{ContentSettingsTypes.JAVASCRIPT}}"
          icon="settings:code" id="javascript"
          label="$i18n{siteSettingsJavascript}">
      </site-details-permission>
      <site-details-permission category="{{ContentSettingsTypes.PLUGINS}}"
          icon="cr:extension" id="plugins" label="$i18n{siteSettingsFlash}">
      </site-details-permission>
      <site-details-permission category="{{ContentSettingsTypes.IMAGES}}"
          icon="settings:photo" id="images" label="$i18n{siteSettingsImages}">
      </site-details-permission>
      <site-details-permission category="{{ContentSettingsTypes.POPUPS}}"
          icon="cr:open-in-new" id="popups" label="$i18n{siteSettingsPopups}">
      </site-details-permission>
      <site-details-permission
          category="{{ContentSettingsTypes.ADS}}"
          icon="settings:ads" id="ads"
          label="$i18n{siteSettingsAds}">
      </site-details-permission>
      <site-details-permission
          category="{{ContentSettingsTypes.BACKGROUND_SYNC}}"
          icon="cr:sync" id="backgroundSync"
          label="$i18n{siteSettingsBackgroundSync}">
      </site-details-permission>
      <site-details-permission category="{{ContentSettingsTypes.SOUND}}"
          icon="settings:volume-up" id="sound"
          label="$i18n{siteSettingsSound}"
          use-automatic-label="[[blockAutoplayEnabled]]">
      </site-details-permission>
      <site-details-permission
          category="{{ContentSettingsTypes.AUTOMATIC_DOWNLOADS}}"
          icon="cr:file-download" id="automaticDownloads"
          label="$i18n{siteSettingsAutomaticDownloads}">
      </site-details-permission>
      <site-details-permission
          category="{{ContentSettingsTypes.MIDI_DEVICES}}" icon="settings:midi"
          id="midiDevices" label="$i18n{siteSettingsMidiDevices}">
      </site-details-permission>
      <site-details-permission
          category="{{ContentSettingsTypes.USB_DEVICES}}" icon="settings:usb"
          id="usbDevices" label="$i18n{siteSettingsUsbDevices}">
      </site-details-permission>
      <template is="dom-if" if="[[enableExperimentalWebPlatformFeatures_]]">
        <site-details-permission
            category="{{ContentSettingsTypes.SERIAL_PORTS}}"
            icon="settings:serial-port" id="serialPorts"
            label="$i18n{siteSettingsSerialPorts}">
        </site-details-permission>
      </template>
      <site-details-permission
          category="{{ContentSettingsTypes.UNSANDBOXED_PLUGINS}}"
          icon="cr:extension" id="unsandboxedPlugins"
          label="$i18n{siteSettingsUnsandboxedPlugins}">
      </site-details-permission>
<if expr="chromeos">
      <site-details-permission
          category="{{ContentSettingsTypes.PROTECTED_CONTENT}}"
          icon="settings:protected-content" id="protectedContent"
          label="$i18n{siteSettingsProtectedContentIdentifiers}">
      </site-details-permission>
</if>
      <site-details-permission
          category="{{ContentSettingsTypes.CLIPBOARD}}"
          icon="settings:clipboard" id="clipboard"
          label="$i18n{siteSettingsClipboard}">
      </site-details-permission>
      <site-details-permission
          category="{{ContentSettingsTypes.PAYMENT_HANDLER}}"
          icon="settings:payment-handler" id="paymentHandler"
          label="$i18n{siteSettingsPaymentHandler}">
      </site-details-permission>
      <template is="dom-if" if="[[enableBluetoothScanningContentSetting_]]">
        <site-details-permission
            category="{{ContentSettingsTypes.BLUETOOTH_SCANNING}}"
            icon="settings:bluetooth-scanning" id="bluetoothScanning"
            label="$i18n{siteSettingsBluetoothScanning}">
        </site-details-permission>
      </template>
    </div>

    <website-usage-private-api id="usageApi"
        website-data-usage="{{storedData_}}"
        website-cookie-usage="{{numCookies_}}">
    </website-usage-private-api>
  </template>
  <script src="site_details.js"></script>
</dom-module>
