{% extends "base.html" %}
{% load i18n %}

{% block content %}
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>{% trans 'Name' %}</th>
            <th>{% trans 'Token' %}</th>
            <th>{% trans 'Allowed Instances' %}</th>
            <th class="text-center">{% trans 'Enabled' %}</th>
            <th class="text-center"><i class="fas fa-power-off" title="{% trans 'Allow Restart' %}"></i></th>
            <th class="text-center"><i class="fas fa-sync" title="{% trans 'Allow Reload' %}"></i></th>
            <th class="text-center"><i class="fas fa-download" title="{% trans 'Allow Export' %}"></i></th>
            <th class="text-center"><i class="far fa-edit"></i></th>
        </tr>
    </thead>
    <tbody>
        {% for key in api_keys %}
        <tr>
            <td>{{ key.name }}</td>
            <td>
                <div class="input-group input-group-sm" style="max-width: 300px;">
                    <input type="password" class="form-control token-input" value="{{ key.token }}" readonly>
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button" onclick="toggleListToken(this)">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
            </td>
            <td>
                {% for instance in key.allowed_instances.all %}
                <span class="badge badge-info">{{ instance }}</span>
                {% empty %}
                <span class="badge badge-success">{% trans 'All' %}</span>
                {% endfor %}
            </td>
            <td class="text-center">
                {% if key.enabled %}
                <i class="fas fa-check text-success" title="{% trans 'Enabled' %}"></i>
                {% else %}
                <i class="fas fa-times text-danger" title="{% trans 'Disabled' %}"></i>
                {% endif %}
            </td>
            <td class="text-center">
                {% if key.allow_restart %}
                <i class="fas fa-check text-success"></i>
                {% else %}
                <i class="fas fa-times text-danger"></i>
                {% endif %}
            </td>
            <td class="text-center">
                {% if key.allow_reload %}
                <i class="fas fa-check text-success"></i>
                {% else %}
                <i class="fas fa-times text-danger"></i>
                {% endif %}
            </td>
            <td class="text-center">
                {% if key.allow_export %}
                <i class="fas fa-check text-success"></i>
                {% else %}
                <i class="fas fa-times text-danger"></i>
                {% endif %}
            </td>
            <td class="text-center" style="width: 1%; white-space: nowrap;">
                <a href="/manage_api/v2/manage/?uuid={{ key.uuid }}" title="{% trans 'Edit' %}">
                    <i class="far fa-edit"></i>
                </a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<div class="row">
    <div class="col-md-12">
        <a href="/manage_api/v2/manage/" class="btn btn-primary">
            <i class="fas fa-plus"></i> {% trans 'Add API Key' %}
        </a>
        <a href="/manage_api/v2/docs/" class="btn btn-secondary ml-2">
            <i class="fas fa-book"></i> {% trans 'API Documentation' %}
        </a>
    </div>
</div>

<script>
    function toggleListToken(btn) {
        var input = btn.closest('.input-group').querySelector('input');
        var icon = btn.querySelector('i');
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    }
</script>

{% endblock %}