<div class="flex min-h-screen">
    <div class="flex-1 flex justify-center items-center">
        <div class="w-80 md:w-100 space-y-6">
            <div class="flex justify-center opacity-50">
                <flux:brand href="{{ route('homepage') }}" name="Yadi Parfum" wire:navigate>
                    <x-slot name="logo">
                        <div
                            class="size-8 rounded shrink-0 bg-accent text-accent-foreground flex items-center justify-center">
                            <i class="font-serif font-bold">YD</i>
                        </div>
                    </x-slot>
                </flux:brand>
            </div>

            <flux:heading size="lg" class="mb-1">Lupa Kata Sandi?</flux:heading>
            <flux:text>
                Silakan masukkan alamat email Anda. Kami akan mengirimkan instruksi untuk mengatur ulang kata sandi.
            </flux:text>

            <div class="flex flex-col gap-6">
                <flux:field>
                    <flux:label>Email <span class="text-red-500 ms-1">*</span></flux:label>
                    <flux:input wire:model="form.email" type="text" placeholder="info.pangestuyoga@gmail.com"
                        autocomplete="off" />
                    <flux:error name="form.email" />
                </flux:field>

                <flux:button variant="primary" class="w-full cursor-pointer" wire:click="sendLink">Kirim Tautan
                </flux:button>
            </div>
            <flux:subheading class="text-center">
                Sudah ingat kata sandi? <flux:link href="{{ route('login') }}" wire:navigate>Masuk
                </flux:link>
            </flux:subheading>
        </div>
    </div>

    <div class="flex-1 p-4 max-lg:hidden">
        <div class="relative rounded-lg h-full w-full bg-zinc-100 flex flex-col items-start justify-end p-16 bg-cover bg-center bg-no-repeat"
            style="background-image: url('/assets/images/cover.jpg')">
        </div>
    </div>
</div>
