@props([
    'email' => '',
    'name' => '',
    'password' => '',
    'title' => 'Temporary password',
    'description' => 'Copy this password now. It will not be shown again after you leave this page.',
])

<div
    role="status"
    class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-4 text-sm text-amber-950"
    x-data="{
        copied: false,
        password: @js($password),
        async copyPassword() {
            const text = String(this.password ?? '');
            if (text === '') {
                return;
            }
            try {
                if (navigator.clipboard && window.isSecureContext) {
                    await navigator.clipboard.writeText(text);
                } else {
                    const el = this.$refs.passwordField;
                    if (!el) {
                        return;
                    }
                    el.select();
                    el.setSelectionRange(0, text.length);
                    document.execCommand('copy');
                }
                this.copied = true;
                window.setTimeout(() => { this.copied = false; }, 2500);
            } catch (e) {
                window.alert('Could not copy automatically. Select the password and copy manually.');
            }
        },
    }"
>
    <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div class="min-w-0 space-y-1">
            <p class="font-semibold text-amber-950">{{ $title }}</p>
            @if (filled($name) || filled($email))
                <p class="text-xs text-amber-900/90">
                    @if (filled($name))
                        <span>{{ $name }}</span>
                    @endif
                    @if (filled($name) && filled($email))
                        <span class="text-amber-800/70"> · </span>
                    @endif
                    @if (filled($email))
                        <span class="font-mono">{{ $email }}</span>
                    @endif
                </p>
            @endif
            <p class="text-xs text-amber-900/80">{{ $description }}</p>
        </div>
        <button
            type="button"
            class="inline-flex shrink-0 items-center justify-center rounded-lg border border-amber-300 bg-white px-3 py-1.5 text-xs font-semibold text-amber-950 shadow-sm hover:bg-amber-100/80 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-1"
            @click="copyPassword()"
        >
            <span x-text="copied ? 'Copied' : 'Copy password'"></span>
        </button>
    </div>

    <div class="mt-3">
        <label class="sr-only" for="temporary_password_display">Temporary password</label>
        <input
            id="temporary_password_display"
            type="text"
            readonly
            x-ref="passwordField"
            :value="password"
            class="block w-full rounded-lg border border-amber-200 bg-white px-3 py-2 font-mono text-sm text-gray-900 shadow-inner select-all"
            autocomplete="off"
        />
    </div>
</div>