<div class="p-6">
    @if($plainTextToken)
        <h3 class="text-lg font-semibold text-t1 mb-2">Token Created</h3>
        <p class="text-sm text-t2 mb-4">Copy this token now — it won't be shown again.</p>

        <div class="flex items-center gap-2 bg-s2 border border-white/[.06] rounded-lg px-3 py-2.5">
            <code class="flex-1 text-xs text-green font-mono break-all">{{ $plainTextToken }}</code>
            <button
                x-data
                x-on:click="navigator.clipboard.writeText('{{ $plainTextToken }}'); $el.textContent = 'Copied!'; setTimeout(() => $el.textContent = 'Copy', 2000)"
                class="text-xs text-t2 hover:text-t1 transition-colors flex-shrink-0 ml-2">
                Copy
            </button>
        </div>

        <div class="flex justify-end mt-6">
            <button wire:click="closeModal"
                class="px-4 py-2 bg-accent-gradient text-white text-sm font-medium rounded-lg hover:opacity-90 transition-opacity">
                Done
            </button>
        </div>
    @else
        <h3 class="text-lg font-semibold text-t1 mb-5">Create API Token</h3>

        <div>
            <label class="block text-xs font-medium text-t2 mb-1.5">Token name *</label>
            <input wire:model="name" type="text" placeholder="My integration"
                class="block w-full px-3 py-2.5 bg-s2 border border-white/[.06] rounded-lg text-sm text-t1 placeholder-t3 focus:outline-none focus:ring-1 focus:ring-blue/50 focus:border-blue/50">
            @error('name') <p class="mt-1 text-xs text-red">{{ $message }}</p> @enderror
        </div>

        <div class="flex gap-3 mt-6">
            <button wire:click="create"
                class="flex-1 px-4 py-2.5 bg-accent-gradient text-white text-sm font-medium rounded-lg hover:opacity-90 transition-opacity">
                Create Token
            </button>
            <button wire:click="closeModal"
                class="px-4 py-2.5 bg-s2 text-t2 text-sm font-medium rounded-lg hover:text-t1 transition-colors border border-white/[.06]">
                Cancel
            </button>
        </div>
    @endif
</div>
