{% extends "base.html" %}
{% from "_page_header.html" import page_header %}
{% block content %}
{{ page_header(title) }}

<div class="glass-panel rounded-lg max-w-3xl mx-auto overflow-hidden border-t-2 border-t-primary" role="status">
  <div class="p-lg border-b border-[#1E293B] flex items-start gap-md">
    <div class="w-12 h-12 rounded-DEFAULT bg-surface-container-high flex items-center justify-center flex-shrink-0">
      <span class="material-symbols-outlined text-primary text-[24px]" aria-hidden="true">vpn_key</span>
    </div>
    <div>
      <h2 class="text-headline-md font-headline-md text-on-surface mb-xs">Credential issued</h2>
      <p class="text-body-sm font-body-sm text-on-surface-variant">Copy this token now. It will not be shown again.</p>
    </div>
  </div>
  <div class="p-lg flex flex-col gap-lg">
    <div class="bg-error-container/20 border-l-4 border-error rounded-DEFAULT p-md flex gap-sm">
      <span class="material-symbols-outlined text-error text-[20px]" aria-hidden="true">warning</span>
      <p class="text-body-sm font-body-sm text-on-surface">This token is only shown once. It cannot be recovered if lost -- store it in a secure secrets vault.</p>
    </div>
    <div>
      <label for="token" class="block text-label-caps font-label-caps text-on-surface-variant uppercase tracking-wider mb-xs">One-time plaintext token</label>
      <div class="flex items-stretch gap-sm">
        <textarea id="token" rows="3" readonly aria-describedby="token-help" class="input-dark flex-1 rounded-DEFAULT py-sm px-md text-code-sm font-code-sm resize-none">{{ token }}</textarea>
        <button type="button" class="btn-ghost px-md rounded-DEFAULT text-body-sm font-headline-md flex items-center gap-xs flex-shrink-0" data-copy-target="token">
          <span class="material-symbols-outlined text-[16px]" aria-hidden="true">content_copy</span>
          <span data-copy-label>Copy</span>
        </button>
      </div>
      <p id="token-help" class="text-code-sm font-code-sm text-on-surface-variant mt-xs">The server stores only a digest and the short prefix {{ token_prefix }}.</p>
    </div>
    <div class="flex justify-end pt-md border-t border-[#1E293B]">
      <a href="/admin/control/applications" class="btn-ghost px-md py-sm rounded-DEFAULT text-body-sm font-headline-md">Return to applications</a>
    </div>
  </div>
</div>
{% endblock %}