{% extends "admin/base.html" %}

{% block title %}New API Key{% endblock %}
{% block header_title %}New API Key{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold mb-4 text-gray-800">API Key Created</h2>

    <p class="mb-2 text-gray-700">
        This is the <strong>only time</strong> the full key will be shown.
        Please copy it now and store it securely.
    </p>

    <div class="flex items-center bg-gray-100 rounded-md p-3 mb-4">
        <code id="plain-key" class="flex-1 break-all text-sm text-gray-900">{{ plain_key }}</code>
        <button id="copy-btn"
                class="ml-3 px-3 py-1 bg-[var(--color-primary-600)] text-white rounded hover:bg-[var(--color-primary-700)] focus:outline-none">
            Copy
        </button>
    </div>

    <p class="text-sm text-gray-600 mb-6">
        After you close this page you will not be able to see the key again.
        If you lose it, create a new one and revoke the old key.
    </p>

    <a href="{{ url_for('get_user_details', user_id=user_id) }}"
       class="inline-block px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300">
        Back to User Details
    </a>
</div>

<script>
    document.getElementById('copy-btn').addEventListener('click', function () {
        const keyText = document.getElementById('plain-key').innerText;
        const copyButton = this;

        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(keyText).then(function() {
                const originalText = copyButton.textContent;
                copyButton.textContent = 'Copied!';
                setTimeout(() => { copyButton.textContent = originalText; }, 1500);
            }).catch(function(err) {
                console.error('Async copy failed: ', err);
            });
        } else {
            const textArea = document.createElement('textarea');
            textArea.value = keyText;
            textArea.style.position = 'fixed';
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            try {
                document.execCommand('copy');
                const originalText = copyButton.textContent;
                copyButton.textContent = 'Copied!';
                setTimeout(() => { copyButton.textContent = originalText; }, 1500);
            } catch (err) {
                console.error('Fallback copy failed', err);
            }
            document.body.removeChild(textArea);
        }
    });
</script>
{% endblock %}