chrome/browser/resources/settings/crostini_page/crostini_shared_usb_devices.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/cr_elements/cr_toggle/cr_toggle.html">
<link rel="import" href="../settings_shared_css.html">

<dom-module id="settings-crostini-shared-usb-devices">
  <template>
    <style include="settings-shared">
      .toggle-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
      }
    </style>
    <div class="settings-box first">
      <div class="settings-box-text">
        $i18n{crostiniSharedUsbDevicesDescription}
        <div class="secondary" id="secondaryText">
          $i18n{crostiniSharedUsbDevicesExtraDescription}
        </div>
      </div>
    </div>
    <div class="settings-box secondary continuation"
        hidden="[[sharedUsbDevices_.length]]" >
       $i18n{crostiniSharedUsbDevicesListEmptyMessage}
    </div>
    <div class="list-frame vertical-list"
        hidden="[[!sharedUsbDevices_.length]]">
      <template is="dom-repeat" items="[[sharedUsbDevices_]]">
        <div class="list-item toggle-container">
          <div class="label">[[item.label]]</div>
          <cr-toggle class="toggle" checked="[[item.shared]]"
            on-change="onDeviceSharedChange_"
            aria-label$="[[item.label]]"></cr-toggle>
        </div>
      </div>
    </template>
  </template>
  <script src="crostini_shared_usb_devices.js"></script>
</dom-module>