<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">

<link rel="import" href="../i18n_setup.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="../site_favicon.html">
<link rel="import" href="site_settings_behavior.html">
<link rel="import" href="site_settings_prefs_browser_proxy.html">

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

      .column-header {
        margin-bottom: 15px;
        margin-inline-start: 20px;
        margin-top: 15px;
      }
    </style>

    <div class="settings-box first" hidden$="[[hasDevices_(devices_)]]">
      $i18n{noUsbDevicesFound}
    </div>
    <template is="dom-repeat" items="[[devices_]]">
      <div class="column-header">[[item.objectName]]</div>

      <div class="list-frame menu-content vertical-list">
        <div class="list-item">
          <site-favicon url="[[item.origin]]"></site-favicon>
          <div class="middle">
            <span class="url-directionality">[[item.origin]]</span>
          </div>

          <paper-icon-button-light class="icon-more-vert">
            <button on-click="showMenu_" title="$i18n{moreActions}"></button>
          </paper-icon-button-light>
        </div>
      </div>
    </template>

    <cr-action-menu>
      <button id="removeButton" slot="item" class="dropdown-item"
          on-click="onRemoveTap_">
        $i18n{handlerRemove}
      </button>
    </cr-action-menu>

  </template>
  <script src="usb_devices.js"></script>
</dom-module>