{% extends 'users/_user.html' %}
{% load helpers %}
{% block title %}API Tokens{% endblock %}
{% block user_content %}
{% if perms.users.add_token %}
<a href="{% url 'users:token_add' %}" class="btn btn-primary mb-2">
  <i class="fa-fw fa-solid fa-plus""></i> Add a token
</a>
{% else %}
<div class="alert alert-info text-center mb-2" role="alert">
  You do not have permission to create new API tokens. If needed, ask an administrator to enable token creation for your account or an assigned group.
</div>
{% endif %}
{% for token in tokens %}
<div class="card{% if token.is_expired %} card-danger{% endif %} mb-2">
  <div class="card-header">
    <div class="float-end">
      <button type="button" class="btn btn-xs btn-secondary copy-token" data-token="{{ token.key }}" title="Copy token to clipboard">
        <i class="fa-fw fa-solid fa-copy"></i> Copy
      </button>
      {% if perms.users.change_token %}
      <a href="{% url 'users:token_edit' pk=token.pk %}" class="btn btn-xs btn-warning"><i class="fa-fw fa-solid fa-edit"></i> Edit</a>
      {% endif %}
      {% if perms.users.delete_token %}
      <a href="{% url 'users:token_delete' pk=token.pk %}" class="btn btn-xs btn-danger"><i class="fa-fw fa-solid fa-trash"></i> Delete</a>
      {% endif %}
    </div>
    <i class="fa-fw fa-solid fa-key"></i> {{ token.key }}
    {% if token.is_expired %}
    <span class="badge text-bg-danger">Expired</span>
    {% endif %}
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-4">
        {{ token.created|date_span }}<br />
        <small class="text-muted">Created</small>
      </div>
      <div class="col-4">
        {% if token.expires %}
        {{ token.expires|date_span }}<br />
        {% else %}
        <span>Never</span><br />
        {% endif %}
        <small class="text-muted">Expires</small>
      </div>
      <div class="col-4">
        {% if token.write_enabled %}
        <span class="label label-success">Enabled</span>
        {% else %}
        <span class="label label-danger">Disabled</span>
        {% endif %}<br />
        <small class="text-muted">Create/edit/delete operations</small>
      </div>
    </div>
    <div class="row mt-2">
      <div class="col-4">
        {% if token.last_used %}
        {{ token.last_used|date_span }}<br />
        {% else %}
        <span>Never</span><br />
        {% endif %}
        <small class="text-muted">Last used</small>
      </div>
      <div class="col-8">
        {% if token.allowed_ips %}
        <span>{{ token.allowed_ips | join:", " }}</span>
        {% else %}
        <span class="text-muted">No IP restrictions</span>
        {% endif %}<br />
        <small class="text-muted">Allowed IPs</small>
      </div>
    </div>
    {% if token.description %}
    <br /><span>{{ token.description }}</span>
    {% endif %}
  </div>
</div>
{% empty %}
<p>You do not have any API tokens.</p>
{% endfor %}
{% endblock %}
{% block javascript %}
<script>
  $(document).ready(function() {
    $('.copy-token').on('click', function() {
      const $btn = $(this);
      const token = $btn.data('token');
      const originalHTML = $btn.html();
      navigator.clipboard.writeText(token).then(function() {
        $btn.html('<i class="fa-fw fa-solid fa-check"></i> Copied').removeClass('btn-secondary').addClass('btn-success');
        setTimeout(function() {
          $btn.html(originalHTML).removeClass('btn-success').addClass('btn-secondary');
        }, 2000);
      }).catch(function(err) {
        console.error('Failed to copy text: ', err);
      });
    });
  });
</script>
{% endblock %}