{% load helpers %}

<div class="card">
  <h5 class="card-header">Authentication</h5>
  <div class="card-body">
    <table class="table table-hover attr-table">
      <tr>
          <th scope="row">Type</th>
          <td>{{ object.get_auth_type_display|placeholder }}</td>
      </tr>
      <tr>
          <th scope="row">Cipher</th>
          <td>{{ object.get_auth_cipher_display|placeholder }}</td>
      </tr>
      <tr>
          <th scope="row">PSK</th>
          <td>
            <span id="secret" class="font-monospace" data-secret="{{ object.auth_psk }}">{{ object.auth_psk|placeholder }}</span>
            {% if object.auth_psk %}
            <button type="button" class="btn btn-sm btn-primary toggle-secret float-end" data-bs-toggle="button">Show Secret</button>
            {% endif %}
          </td>
      </tr>
    </table>
  </div>
</div>
