{% extends "base.html" %}
{% block title %}Token Created{% endblock %}
{% block content %}
<h1>Token Created</h1>

<div class="flash flash-warning">
    <p><strong>Copy this token now.</strong> It will not be shown again.</p>
</div>

<div class="card" style="max-width:560px;">
    <div class="flex-between mb-1">
        <span class="text-dim">Name:</span>
        <strong>{{ name }}</strong>
    </div>
    <label>Token</label>
    <div style="position:relative;">
        <code id="api-token" style="display:block; padding:.65rem .75rem; background:var(--bg); border:1px solid var(--border); border-radius:6px; word-break:break-all; font-size:.85rem;">{{ token }}</code>
        <button class="btn btn-outline btn-sm" style="position:absolute; top:6px; right:6px;" onclick="navigator.clipboard.writeText('{{ token }}').then(()=>this.textContent='Copied!')">Copy</button>
    </div>

    <div class="mt-2">
        <p class="text-dim" style="font-size:.85rem;">Use it with:</p>
        <pre style="background:var(--text); color:#fff; padding:.75rem 1rem; border-radius:6px; overflow-x:auto; font-size:.85rem;">cpm publish --token {{ token }} ...</pre>
    </div>
</div>

<div class="mt-2">
    <a href="/tokens" class="btn btn-outline">Back to Tokens</a>
</div>
{% endblock %}