{% extends base_template %}
{% block tail_js %}
    {{ block.super }}
    <script type="module">
    import { DebusineClipboardCopy } from "debusine";

    document.addEventListener("DOMContentLoaded", () => {
        DebusineClipboardCopy.setup_all();
    });
    </script>
{% endblock %}
{% block content %}
    <div class="alert alert-primary" role="alert">New token created.</div>
    <table class="table table-sm table-hover table-striped table-ths-vertical-align-middle">
        <tbody>
            <tr>
                <th class="col-2">Created at</th>
                <td>{{ token.created_at|date:"Y-m-d H:i:s" }}</td>
            </tr>
            <tr>
                <th>Enabled</th>
                <td>{% include "web/_check_icon.html" with value=token.enabled only %}</td>
            </tr>
            <tr>
                <th>Comment</th>
                <td>
                    {% if token.comment %}
                        {{ token.comment }}
                    {% else %}
                        <i>empty</i>
                    {% endif %}
                </td>
            </tr>
            <tr>
                <th>Token key</th>
                <td>
                    <button class="btn btn-primary btn-sm"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target=".token-secret">
                        <i class="bi bi-search" title="Show/hide token"></i>
                    </button>
                    <button class="btn btn-primary btn-sm debusine-clipboard-copy"
                            type="button"
                            aria-label="Copy token to clipboard"
                            data-copy-text="{{ token.key }}">
                        <i class="bi bi-clipboard-plus" title="Copy to clipboard"></i>
                    </button>
                    <code id="token-key" class="collapse token-secret ms-2">{{ token.key }}</code>
                    <div class="collapse token-secret">
                        {# djlint:off H020 #}
                        <p></p>
                        {# djlint:on #}
                        <p>
                            Here is an example <code style="color: inherit;">~/.config/debusine/client/config.ini</code> file:
                        </p>
                        {% include "web/user_token-config_snippet.html" with config_token=token.key %}
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="alert alert-warning" role="alert">
        <b>Save the token key:</b> The server does not keep a copy. If you lose it you need to generate a new one.
    </div>
    <a class="btn btn-primary btn-sm"
       href="{% url "user:token-list" username=person.username %}">Token list</a>
{% endblock %}
