<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.hover>
                    <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">Selamat datang!</flux:heading>
            <flux:text>
                Silakan akses panel dengan memasukkan nama pengguna, email, dan kata sandi Anda.
            </flux:text>

            <div class="flex flex-col gap-6">
                <flux:input wire:model="login" label="Nama pengguna atau email" type="text"
                    placeholder="johndoe / info.pangestuyoga@gmail.com" autocomplete="off" />

                <flux:field>
                    <div class="mb-3 flex justify-between">
                        <flux:label>Kata Sandi</flux:label>

                        <flux:link href="#" variant="subtle" class="text-sm">Lupa kata sandi?</flux:link>
                    </div>

                    <flux:input wire:model="password" type="password" placeholder="********" viewable />

                    <flux:error name="password" />
                </flux:field>

                <flux:button variant="primary" class="w-full cursor-pointer" wire:click="auth">Masuk</flux:button>
            </div>
            <flux:subheading class="text-center">
                Nikmati berbagai keuntungan! <flux:link href="{{ route('register') }}" wire:navigate.hover>Daftar
                    sekarang.
                </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>
