@php $passwordJs = \Illuminate\Support\Js::from($password); @endphp
<div
    x-data="{ copied: false }"
    class="rounded-lg border border-warning-300 bg-warning-50 p-4 dark:border-warning-800 dark:bg-warning-950"
>
    <p class="text-sm font-medium text-warning-800 dark:text-warning-200">
        Copia subito la password: per motivi di sicurezza non sarà più possibile visualizzarla in seguito.
    </p>

    <dl class="mt-3 grid grid-cols-[max-content_1fr] items-center gap-x-4 gap-y-2 text-sm">
        <dt class="text-gray-500 dark:text-gray-400">Nome utente</dt>
        <dd class="font-mono font-medium">{{ $username }}</dd>
        <dt class="text-gray-500 dark:text-gray-400">Password</dt>
        <dd class="rounded bg-white px-2 py-1 font-mono dark:bg-gray-900">{{ $password }}</dd>
    </dl>

    <x-filament::button
        type="button"
        color="warning"
        size="sm"
        class="mt-3"
        x-on:click="
            navigator.clipboard.writeText({{ $passwordJs }});
            copied = true;
            setTimeout(() => (copied = false), 2000);
            new FilamentNotification()
                .title('Password copiata negli appunti')
                .success()
                .send();
        "
    >
        <span x-show="!copied">Copia password</span>
        <span x-show="copied" x-cloak>Copiata!</span>
    </x-filament::button>
</div>