{% load helpers %}
{% load i18n %}

<div class="card">
  <h5 class="card-header">{% trans "Authentication" %}</h5>
  <div class="card-body">
    <table class="table table-hover attr-table">
      <tr>
          <th scope="row">{% trans "Type" %}</th>
          <td>{{ object.get_auth_type_display|placeholder }}</td>
      </tr>
      <tr>
          <th scope="row">{% trans "Cipher" %}</th>
          <td>{{ object.get_auth_cipher_display|placeholder }}</td>
      </tr>
      <tr>
          <th scope="row">{% trans "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">{% trans "Show Secret" %}</button>
            {% endif %}
          </td>
      </tr>
    </table>
  </div>
</div>