<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="/i18n_setup.html">
<link rel="import" href="/settings_shared_css.html">
<link rel="import" href="/site_settings/site_settings_behavior.html">
<link rel="import" href="/site_settings/site_settings_prefs_browser_proxy.html">

<dom-module id="zoom-levels">
  <template>
    <style include="settings-shared">
      :host {
        display: block;
      }

      .empty-message {
        margin-top: 15px;
      }
    </style>
    <div class="list-frame vertical-list" id="listContainer">
      <template is="dom-repeat" items="[[sites_]]" id="list"
          rendered-item-count="{{renderedCount}}">
        <div class="list-item">
          <div class="favicon-image"
              style$="[[computeSiteIcon(item.origin)]]">
          </div>
          <div class="middle">
            <div>[[item.origin]]</div>
          </div>
          <div>[[item.zoom]]</div>
          <div>
            <paper-icon-button icon="cr:clear"
                on-tap="removeZoomLevel_">
          </div>
        </div>
      </template>
      <template is="dom-if" if="{{!renderedCount}}">
        <div class="empty-message" id="empty">
          $i18n{siteSettingsNoZoomedSites}
        </div>
      </template>
    </div>
  </template>
  <script src="zoom_levels.js"></script>
</dom-module>
