<div class="panel_top panel_security_two_factor" data-bind="visible: visibleHeading">
  <h2 class="settings_heading">
    <span
      class="back-to-security-icon"
      data-bind="visible: subPage, click: clearAll, customTooltip: '%MODULENAME%/ACTION_BACK'"
    ></span>
    <span data-bind="i18n: {'key': '%MODULENAME%/HEADING_SETTINGS_TAB'}"></span>
  </h2>
</div>

<div class="panel_center panel_security_two_factor" data-test-id="settings-2fa">
  <div class="fields">
    <!-- ko template: {name: '%ModuleName%_SettingsFormFields'} --><!-- /ko -->

    <!-- ko if: !subPage() && allowUsedDevices() -->
    <div class="fieldset">
      <div class="fieldgroup">
        <div class="row">
          <h3>
            <span data-bind="i18n: {'key': '%MODULENAME%/HEADING_YOUR_DEVICES'}"></span>
          </h3>
        </div>
        <div class="folders items_list">
          <div data-bind="foreach: devices">
            <div class="item canSelect">
              <span class="title">
                <span class="controls">
                  <span
                    class="button logout"
                    data-bind="
                      visible: !bCurrentDevice && bAuthenticated,
                      click: function () { $parent.askLogoutFromDevice(sDeviceId, sDeviceName); },
                      customTooltip: '%MODULENAME%/ACTION_LOGOUT_DEVICE'"
                  ></span>
                  <span
                    class="button delete_device"
                    data-bind="
                      visible: !bCurrentDevice,
                      click: function () { $parent.askRemoveDevice(sDeviceId, sDeviceName); },
                      customTooltip: '%MODULENAME%/ACTION_REMOVE_DEVICE'"
                  ></span>
                  <span
                    class="button edit_device"
                    data-bind="
                      click: function () { $parent.editDevice(sDeviceId, sDeviceName, sDeviceCustomName); },
                      customTooltip: '%MODULENAME%/ACTION_EDIT_DEVICE'"
                  ></span>
                </span>
                <span class="name">
                  <span class="text">
                    <span
                      class="device-active-icon"
                      data-bind="visible: bCurrentDevice, customTooltip: '%MODULENAME%/LABEL_CURRENT_DEVICE'"
                    ></span>
                    <span data-bind="text: sDeviceCustomName || sDeviceName"></span>
                    <span data-bind="visible: sDeviceCustomName && sDeviceName">
                      (<span data-bind="text: sDeviceName"></span>)
                    </span>
                    <span class="text_hint" data-bind="text: sDeviceExpiresDate"></span>
                    <div class="text_hint" data-bind="text: sDeviceLastUsageDate"></div>
                  </span>
                </span>
              </span>
            </div>
          </div>
        </div>
        <div class="row"></div>
        <div class="row hint">
          <span data-bind="i18n: {'key': '%MODULENAME%/INFO_TRUST_DEVICES'}"></span>
        </div>
        <div class="row hint">
          <span data-bind="i18n: {'key': '%MODULENAME%/INFO_REVOKE_ALL'}"></span>
        </div>
        <div class="row buttons">
          <span class="button" data-bind="command: revokeAllCommand">
            <span data-bind="i18n: {'key': '%MODULENAME%/ACTION_REVOKE_ALL'}"></span>
          </span>
        </div>
      </div>
    </div>
    <!-- /ko -->
  </div>
</div>
