{# Plan 47 — one-shot URL reveal after a successful create.
   The URL is shown EXACTLY ONCE: invites.js auto-copies it to the
   clipboard on open and never round-trips it back from the server.
   State (showSuccess, success, autoCopied, manualCopyLabel, copyManual,
   closeSuccess) lives on the Alpine root in invites.js.
   Chrome (teleport + backdrop + centered card) comes from the shared
   `modal()` macro — see admin/components/ui.html. #}
{% from 'admin/components/ui.html' import modal %}
{% call modal('showSuccess', 'closeSuccess()', width='max-w-lg') %}
    <div class="flex items-center gap-3 mb-3">
      <div
        class="w-9 h-9 rounded-md border border-white/[0.06] flex items-center justify-center transition-colors"
        :class="autoCopied ? 'bg-emerald-500/[0.08]' : 'bg-white/[0.04]'"
      >
        <i
          x-show="autoCopied"
          data-lucide="check"
          class="w-4 h-4 text-emerald-300"
        ></i>
        <i
          x-show="!autoCopied"
          data-lucide="copy"
          class="w-4 h-4 text-cmdop-400"
        ></i>
      </div>
      <div>
        <h3 class="text-[15px] font-semibold text-ink-100 tracking-tight">
          <span x-show="autoCopied">URL copied to clipboard</span>
          <span x-show="!autoCopied">Invitation ready</span>
        </h3>
        <p class="text-[11px] text-ink-500">For <span class="text-ink-200" x-text="success.email"></span> &middot; expires <span x-text="success.expiresRelative"></span></p>
      </div>
    </div>

    <p class="text-[13px] text-ink-400 mb-3">
      Paste this URL into your message to
      <span class="text-ink-200" x-text="success.email"></span>.
      <span class="text-amber-300 font-medium">You won't see it again</span> — re-open this page after sending if you need to revoke or re-create.
    </p>

    <div
      class="bg-black border border-white/[0.08] rounded-md p-3 mb-3 font-mono text-[12px] text-ink-200 break-all select-all cursor-pointer hover:border-white/[0.16] transition-colors"
      x-text="success.url"
      @click="copyManual()"
      title="Click to copy"
    ></div>

    <div class="flex items-center justify-between text-[12px]">
      <a
        :href="success.url"
        target="_blank"
        rel="noopener"
        class="text-ink-500 hover:text-ink-300 inline-flex items-center gap-1"
      >
        <i data-lucide="external-link" class="w-3 h-3"></i>
        Preview accept page
      </a>
      <div class="flex gap-3">
        <button
          @click="copyManual()"
          class="px-3 py-1 text-[12px] border border-white/[0.08] hover:border-white/[0.16] text-ink-200 rounded-md inline-flex items-center gap-1.5 transition-colors"
        >
          <i data-lucide="copy" class="w-3 h-3"></i>
          <span x-text="manualCopyLabel"></span>
        </button>
        <button
          @click="closeSuccess()"
          class="px-3 py-1 text-[12px] bg-white hover:bg-ink-100 text-black rounded-md font-medium"
        >Done</button>
      </div>
    </div>
{% endcall %}