{% load ldap_front %}

<table class="table table-striped table-hover" data-classes="table-borderless" data-toggle="table"
  data-sort-name="name">
  <thead>
    <tr>
      <th scope="col">Token</th>
      <th scope="col">User</th>
      <th scope="col">Counter</th>
      <th scope="col">Creation date</th>
      <th scope="col">Expiration date</th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
{% for token in device_tokens %}
    <tr>
      <td scope="col">
        {{ token.token }}
        <button class="btn p-0" onclick="copyToken(this, '{{ token.token }}')">
          <i class="bi bi-clipboard"></i>
        </button>
      </td>
      <td scope="col">{{ token.user_dn|username_from_dn|safe }}</b></td>
      <td scope="col">{{ token.counter|default_if_none:"-" }}</td>
      <td scope="col">{{ token.created_datetime|date:"d/m/Y" }}</td>
      <td scope="col">{{ token.expiration_datetime|date:"d/m/Y" }}</td>
      <td scope="col">
          <form action="{% url 'device_token_delete' device_otp=token.token %}" method="post">
            {% csrf_token %}
            <button type="submit" class="btn p-0">
              <i class="bi bi-trash-fill"></i>
            </button>
          </form>
      </td>
    </tr>
{% endfor %}
  </tbody>
</table>

<script>
function copyToken(button, token) {
  const tokenUrl = '{{ request.scheme }}' + '://' + '{{ request.get_host }}' + '/device/registration/' + token;
  navigator.clipboard.writeText(tokenUrl).then(() => {
    // Change icon to checkmark
    const icon = button.querySelector('i');
    icon.className = 'bi bi-check2';
    button.classList.add('btn-success');

    // Reset after 2 seconds
    setTimeout(() => {
      icon.className = 'bi bi-clipboard';
      button.classList.remove('btn-success');
    }, 2000);
  }).catch(err => {
    console.error('Failed to copy:', err);
  });
}
</script>