{% extends 'djelmah/base.html' %}

{% block content %}

<table class="table table-bordered table-sm mt-3">
    <thead class="thead-light">
        <tr>
            <th>User</th>
            <th>Key</th>
            <th>Created</th>
            <th></th>
            <th class="text-center">
                <a
                    id="btn-create-key"
                    title="Create Key"
                    href="#"
                >
                    <i class="fas fa-plus"></i>
                </a>
            </th>
        </tr>
    </thead>
    <tbody>
    {% for key in keys %}
        <tr>
            <td>{{ key.user }}</td>
            <td>{{ key.key }}</td>
            <td>
                {{ key.created|date:"m/d/Y" }}
                {{ key.created|time:"h:i A" }}
            </td>
            <td class="text-center">
                <a
                    class="btn-refresh-key"
                    data-user="{{ key.user.id }}"
                    title="Refresh"
                    href="#"
                >
                    <i class="fas fa-sync-alt"></i>
                </a>
            </td>
            <td class="text-center">
                <a
                    class="btn-revoke-key"
                    data-id="{{ key.id }}"
                    title="Revoke"
                    href="#"
                >
                    <i class="fas fa-times"></i>
                </a>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>

<div id="modal-create-key" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create Key</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            {% if users %}
                <div class="form-group">
                    <select class="form-control" id="user_id">
                        <option value="-1">
                            Select a user...
                        </option>
                    {% for user in users %}
                        <option value="{{ user.id }}">
                            {{ user.username }}
                        </option>
                    {% endfor %}
                    </select>
                    <div class="invalid-feedback">
                        Please select a user!
                    </div>
                </div>
            {% else %}
                No users available.
            {% endif %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
            {% if users %}
                <button type="button" class="btn btn-primary" id="btn-create-key-submit">Create</button>
            {% endif %}
            </div>
        </div>
    </div>
</div>

{% endblock %}
