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

{% block title %}MCP Token Created — {{ themis_app_name }}{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto">
    <h1 class="text-2xl font-bold mb-2">MCP Token Created</h1>
    <p class="opacity-60 mb-6">{{ token.name }}</p>

    <div class="alert alert-warning mb-6">
        <span><strong>Save this token now.</strong> Once you leave this page it cannot be retrieved — only the hash is stored. If lost, you will need to generate a new one.</span>
    </div>

    <div class="card bg-base-200 mb-6">
        <div class="card-body">
            <h2 class="card-title text-lg mb-2">Token</h2>
            <div class="font-mono break-all bg-base-300 p-4 rounded select-all" id="mcp-plaintext">{{ plaintext }}</div>
            <div class="card-actions justify-end mt-3">
                <button type="button" id="mcp-copy-btn" class="btn btn-sm btn-primary"
                        onclick="(()=>{const t=document.getElementById('mcp-plaintext').textContent;navigator.clipboard.writeText(t).then(()=>{const b=document.getElementById('mcp-copy-btn');b.textContent='Copied!';setTimeout(()=>b.textContent='Copy to clipboard',2000);});})()">
                    Copy to clipboard
                </button>
            </div>
        </div>
    </div>

    <div class="card bg-base-200 mb-6">
        <div class="card-body">
            <h2 class="card-title text-lg">Use it</h2>
            <p class="text-sm opacity-80 mb-3">
                Add the token to your MCP client config as a Bearer credential. Example for Claude Desktop:
            </p>
<pre class="bg-base-300 p-4 rounded text-xs overflow-x-auto"><code>{
  "mcpServers": {
    "mnemosyne": {
      "url": "http://localhost:8001/mcp/",
      "headers": {
        "Authorization": "Bearer &lt;paste token here&gt;"
      }
    }
  }
}</code></pre>
        </div>
    </div>

    <div class="flex justify-end">
        <a href="{% url 'mcp_server:mcp-token-list' %}" class="btn btn-primary">I’ve saved it — go to token list</a>
    </div>
</div>
{% endblock %}