{% 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">
  <div class="p-lg border-b border-[#1E293B] flex items-start justify-between gap-md">
    <div>
      <h2 class="text-headline-md font-headline-md text-on-surface mb-xs">Issue a credential for {{ application.name }}</h2>
      <p class="text-body-sm font-body-sm text-on-surface-variant">The plaintext token is displayed once after submission and cannot be recovered later.</p>
    </div>
    <span class="material-symbols-outlined text-primary text-[28px]" aria-hidden="true">key</span>
  </div>
  <form method="post" action="/admin/control/applications/{{ application.id }}/credentials" class="p-lg flex flex-col gap-lg">
    <div>
      <label for="name" class="block text-body-sm font-body-sm font-semibold text-on-surface mb-xs">Credential name</label>
      <input id="name" name="name" required minlength="1" maxlength="120" autocomplete="off" class="input-dark w-full rounded-DEFAULT py-sm px-md text-code-sm font-code-sm">
    </div>
    <fieldset>
      <legend class="text-body-sm font-body-sm font-semibold text-on-surface mb-sm">Scopes</legend>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-sm">
        {% for scope in scopes %}
        <label class="scope-card flex items-center gap-sm border border-[#1E293B] rounded-DEFAULT bg-background px-md py-sm cursor-pointer transition-colors">
          <input type="checkbox" name="scopes" value="{{ scope.value }}" class="rounded-DEFAULT">
          <span class="text-code-sm font-code-sm text-primary-fixed-dim">{{ scope.value }}</span>
        </label>
        {% endfor %}
      </div>
    </fieldset>
    <div class="flex items-center justify-end gap-sm 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">Cancel</a>
      <button type="submit" class="btn-primary px-md py-sm rounded-DEFAULT text-body-sm font-headline-md">Issue credential</button>
    </div>
  </form>
</div>
{% endblock %}