{% extends "base.html" %}
{% block title %}Token Generated — Fossilrepo{% endblock %}

{% block content %}
<div class="max-w-2xl">
  <div class="flex items-center gap-3 mb-6">
    <a href="{% url 'accounts:profile' %}" class="text-gray-400 hover:text-white">
      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
      </svg>
    </a>
    <h1 class="text-2xl font-bold text-gray-100">Token Generated</h1>
  </div>

  <div class="rounded-lg bg-yellow-900/50 border border-yellow-700 p-4 mb-6">
    <div class="flex items-start gap-3">
      <svg class="h-5 w-5 text-yellow-400 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
      </svg>
      <div>
        <p class="text-sm font-medium text-yellow-300">Copy this token now. It will not be shown again.</p>
        <p class="text-xs text-yellow-400 mt-1">Store it securely. If lost, revoke it and generate a new one.</p>
      </div>
    </div>
  </div>

  <div class="rounded-lg bg-gray-800 border border-gray-700 p-6 mb-6">
    <label class="block text-sm font-medium text-gray-300 mb-2">{{ token_name }}</label>
    <div class="flex items-center gap-2" x-data="{ copied: false }">
      <code class="flex-1 block rounded-md bg-gray-900 border border-gray-600 px-3 py-2 text-sm font-mono text-gray-100 break-all select-all">{{ raw_token }}</code>
      <button type="button"
              @click="navigator.clipboard.writeText('{{ raw_token }}'); copied = true; setTimeout(() => copied = false, 2000)"
              class="flex-shrink-0 rounded-md bg-gray-700 px-3 py-2 text-sm text-gray-200 hover:bg-gray-600">
        <span x-show="!copied">Copy</span>
        <span x-show="copied" style="display:none">Copied</span>
      </button>
    </div>
  </div>

  <a href="{% url 'accounts:profile' %}" class="inline-block rounded-md bg-gray-700 px-4 py-2 text-sm font-semibold text-gray-200 hover:bg-gray-600">
    Back to Profile
  </a>
</div>
{% endblock %}