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

{% block title %}{% translate "Auth Tokens" %} · {{ site_title }}{% endblock %}

{% block content %}

<div class="flex items-center justify-center">

    <div class="m-4 max-w-4xl flex-auto">

        {% if messages %}
        <ul class="mb-4">
            {% for message in messages %}
                {# if we introduce different levels we can use{% message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %} #}
                <li class="bg-cyan-50 dark:bg-cyan-900 border-2 border-cyan-800 dark:border-cyan-400 p-4 rounded-lg">{{ message }}</li>
            {% endfor %}
        </ul>
        {% endif %}

        <div class="flex">
            <h1 class="text-4xl mt-4 font-bold">{% translate "Auth Tokens" %}</h1>

            <div class="ml-auto mt-6">
                <a href="{% url "auth_token_create" %}" class="font-bold text-slate-800 dark:text-slate-100 border-slate-500 dark:border-slate-400 pl-4 pr-4 pb-2 pt-2 ml-1 border-2 bg-cyan-200 dark:bg-cyan-700 hover:bg-cyan-400 dark:hover:bg-cyan-600 active:ring-3 rounded-md">{% translate "Add Token" %}</a>
            </div>
        </div>

        <div>
          <form action="." method="post">
          {% csrf_token %}

          <table class="w-full mt-8">
          <tbody>
                <thead>
                <tr class="bg-slate-200 dark:bg-slate-800">
                    <th class="w-full p-4 text-left text-xl" colspan="2">{% translate "Auth Tokens" %}</th>
                </tr>

                {% for auth_token in auth_tokens %}
                <tr class="bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 border-b-2">
                <td class="w-full p-4">
                    <div class="flex items-center gap-2">
                        <span id="token-hidden-{{ auth_token.id }}" class="font-mono" aria-hidden="true">
                            ••••••••••••••••••••••••••••••••••••••••
                        </span>
                        <span id="token-revealed-{{ auth_token.id }}" class="hidden font-mono">
                            {{ auth_token.token }}
                        </span>
                        <button type="button" id="token-toggle-{{ auth_token.id }}"
                                onclick="toggleAuthToken({{ auth_token.id }})" aria-expanded="false"
                                aria-controls="token-revealed-{{ auth_token.id }}"
                                class="text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 text-sm underline">
                            <span id="token-reveal-label-{{ auth_token.id }}">{% translate "Reveal" %}</span>
                            <span id="token-hide-label-{{ auth_token.id }}" class="hidden">{% translate "Hide" %}</span>
                        </button>
                    </div>
                    <div class="mt-2 font-bold text-slate-800 dark:text-slate-100">
                        {{ auth_token.description }}
                    </div>
                    <div class="mt-1 text-slate-600 dark:text-slate-400 text-sm">
                        {% if auth_token.is_user_bound %}
                            {% translate "Personal token for" %}
                            {% if auth_token.user %}{{ auth_token.user }}{% else %}{% translate "deleted user" %}{% endif %}
                        {% else %}
                            {% translate "Service token" %}
                        {% endif %}
                        ·
                        {% if auth_token.is_project_bound %}
                            {{ auth_token.project }}
                        {% elif auth_token.is_user_bound %}
                            {% translate "All my projects" %}
                        {% else %}
                            {% translate "All projects" %}
                        {% endif %}
                    </div>
                    <div class="mt-2 text-slate-600 dark:text-slate-400 text-sm">
                        {% if auth_token.has_all_capabilities %}
                            <span class="font-bold">{% translate "All capabilities" %}</span>
                        {% elif auth_token.capability_groups %}
                            <div class="grid grid-cols-[7rem_minmax(0,1fr)] gap-x-2">
                                {% for prefix, names in auth_token.capability_groups %}
                                    <code class="text-right">{{ prefix }}:</code>
                                    <code>({{ names|join:", " }})</code>
                                {% endfor %}
                            </div>
                        {% else %}
                            {% translate "No capabilities" %}
                        {% endif %}
                    </div>
                </td>

                <td class="p-4">
                    <div class="flex justify-end">
                        <button name="action" value="revoke:{{ auth_token.id }}" class="font-bold text-slate-500 dark:text-slate-300 border-slate-300 dark:border-slate-600 pl-4 pr-4 pb-2 pt-2 ml-2 border-2 hover:bg-slate-200 dark:hover:bg-slate-800 active:ring-3 rounded-md whitespace-nowrap">{% translate "Revoke" %}</button>
                    </div>
                </td>

                </tr>
                {% empty %}
                <tr class="bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700 border-b-2">
                <td class="w-full p-4">
                    <div>
                        {% translate "No Auth Tokens." %}
                    </div>
                </td>

                <td class="p-4">
                </td>

                </tr>
                {% endfor %}

            </tbody>
            </table>

            </form>
        </div>

</div>

<script>
function toggleAuthToken(id) {
    const hiddenToken = document.getElementById('token-hidden-' + id);
    const revealedToken = document.getElementById('token-revealed-' + id);
    const toggleButton = document.getElementById('token-toggle-' + id);
    const revealLabel = document.getElementById('token-reveal-label-' + id);
    const hideLabel = document.getElementById('token-hide-label-' + id);
    const reveal = revealedToken.classList.contains('hidden');

    hiddenToken.classList.toggle('hidden', reveal);
    revealedToken.classList.toggle('hidden', !reveal);
    revealLabel.classList.toggle('hidden', reveal);
    hideLabel.classList.toggle('hidden', !reveal);
    toggleButton.setAttribute('aria-expanded', reveal);
}

</script>

{% endblock %}