{% extends shell('app') %}

{% block title %}{{ _('API token created') }}{% endblock %}

{% block content %}

    <h1 class="h2 mb-3"><b>{{ _('Token') }}</b> {{ _('created') }}</h1>

    <div class="alert alert-warning">
        {{ _('Copy this token now. It is the only time it will be shown. If you lose it, revoke it and create another one.') }}
    </div>

    <div class="row">
        <div class="col-12 col-lg-8">

            <div class="mb-3">
                <label class="form-label" for="apikeys-plaintext">{{ _('Token') }}</label>
                <div class="input-group">
                    <input id="apikeys-plaintext" class="form-control font-monospace" type="text"
                           value="{{ plaintext }}" readonly onfocus="this.select()">
                    <button class="btn btn-outline-secondary" type="button" id="apikeys-copy"
                            data-copied="{{ _('Copied') }}">{{ _('Copy') }}</button>
                </div>
            </div>

            <dl class="row">
                <dt class="col-sm-3">{{ _('Name') }}</dt>
                <dd class="col-sm-9">{{ api_token.name }}</dd>

                <dt class="col-sm-3">{{ _('Scopes') }}</dt>
                <dd class="col-sm-9">
                    {% for scope in api_token.scope_list %}
                        <span class="badge bg-light text-dark">{{ scope }}</span>
                    {% endfor %}
                </dd>

                <dt class="col-sm-3">{{ _('Expires') }}</dt>
                <dd class="col-sm-9">
                    {% if api_token.expires_at %}
                        {{ api_token.expires_at.strftime('%Y-%m-%d %H:%M') }}
                    {% else %}
                        {{ _('Never') }}
                    {% endif %}
                </dd>
            </dl>

            <a class="btn btn-primary" href="{{ url_for('apikeys.index') }}">{{ _('Back to my tokens') }}</a>

        </div>
    </div>

{% endblock %}

{% block scripts %}
<script>
    (function () {
        var button = document.getElementById("apikeys-copy");
        var field = document.getElementById("apikeys-plaintext");
        if (!button || !field) return;
        button.addEventListener("click", function () {
            var done = function () {
                var original = button.textContent;
                button.textContent = button.dataset.copied;
                setTimeout(function () { button.textContent = original; }, 2000);
            };
            if (navigator.clipboard) {
                navigator.clipboard.writeText(field.value).then(done);
            } else {
                field.select();
                document.execCommand("copy");
                done();
            }
        });
    })();
</script>
{% endblock %}