{% extends 'users/base.html' %}
{% load helpers %}

{% block usercontent %}
    <div class="h-100 vstack">
        <div class="row align-content-start flex-fill">
            <div class="col-md-8 offset-md-2">
                {% for token in tokens %}
                    <div class="card{% if token.is_expired %} border-danger{% endif %}">
                        <div class="card-header nb-text-none{% if token.is_expired %} bg-danger-subtle border-danger text-body{% endif %}">
                            <div class="d-print-none float-end">
                                <a class="btn btn-sm btn-success copy-token" data-clipboard-target="#token_{{ token.pk }}">
                                    <span class="mdi mdi-content-copy me-4" aria-hidden="true"></span><!--
                                    -->Copy</a>
                                {% if perms.users.change_token %}
                                    <a href="{% url 'user:token_edit' pk=token.pk %}" class="btn btn-sm btn-warning">
                                        <span class="mdi mdi-pencil me-4" aria-hidden="true"></span><!--
                                        -->Edit
                                    </a>
                                {% endif %}
                                {% if perms.users.delete_token %}
                                    <a href="{% url 'user:token_delete' pk=token.pk %}" class="btn btn-sm btn-danger">
                                        <span class="mdi mdi-trash-can-outline me-4" aria-hidden="true"></span><!--
                                        -->Delete
                                    </a>
                                {% endif %}
                            </div>
                            <span aria-hidden="true" class="mdi mdi-key"></span>
                            <samp><span id="token_{{ token.pk }}">{{ token.key }}</span></samp>
                            {% if token.is_expired %}
                                <span class="badge bg-danger">Expired</span>
                            {% endif %}
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4 gap-4 vstack">
                                    <small class="text-secondary">Created</small>
                                    <span title="{{ token.created }}">{{ token.created|date }}</span>
                                </div>
                                <div class="col-md-4 gap-4 vstack">
                                    <small class="text-secondary">Expires</small>
                                    {% if token.expires %}
                                        <span title="{{ token.expires }}">{{ token.expires|date }}</span>
                                    {% else %}
                                        <span>Never</span>
                                    {% endif %}
                                </div>
                                <div class="col-md-4 gap-4 vstack align-items-start">
                                    <small class="text-secondary">Create/edit/delete operations</small>
                                    {% if token.write_enabled %}
                                        <span class="badge bg-success">Enabled</span>
                                    {% else %}
                                        <span class="badge bg-danger">Disabled</span>
                                    {% endif %}
                                </div>
                            </div>
                            {% if token.description %}
                                <br /><span>{{ token.description }}</span>
                            {% endif %}
                        </div>
                    </div>
                {% empty %}
                    <p>You do not have any API tokens.</p>
                {% endfor %}
            </div>
        </div>
        <div class="nb-form-sticky-footer">
            {% if perms.users.add_token %}
                <a href="{% url 'user:token_add' %}" class="btn btn-primary">
                    <span class="mdi mdi-plus-thick me-4" aria-hidden="true"></span><!--
                    -->Add a token
                </a>
            {% else %}
                <div class="alert alert-info mb-0 text-center" 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 %}
        </div>
    </div>
{% endblock %}

{% block javascript %}
    {{ block.super }}
    <script type="text/javascript">
        new ClipboardJS('.copy-token');
    </script>
{% endblock %}