@extends('layouts.auth')

@section('title', __('auth.sign_in'))

@section('content')
    <div data-rise>
        {{-- Brand mark --}}
        <div class="mb-8 flex flex-col items-center text-center lg:items-start lg:text-start">
            <span class="flex size-14 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-600 to-violet-600 text-white shadow-xl shadow-brand-600/25">
                <x-dash.icon name="heart" class="size-7" />
            </span>

            <h2 class="mt-6 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
                {{ __('auth.welcome_back') }}
            </h2>
            <p class="mt-2 text-[15px] text-slate-500 dark:text-slate-400">
                {{ __('auth.sign_in_subtitle') }}
            </p>
        </div>

        {{-- Status / error banners. Fortify puts credential failures on the
             email field, so those render inline with the input instead. --}}
        @if (session('status'))
            <div class="mb-5 flex items-start gap-3 rounded-xl border border-emerald-200 bg-emerald-50/80 p-4 text-sm text-emerald-800 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300" role="status">
                <x-dash.icon name="check-circle" class="mt-px size-5 shrink-0" />
                <span>{{ session('status') }}</span>
            </div>
        @endif

        @if (session('error'))
            <div class="mb-5 flex items-start gap-3 rounded-xl border border-red-200 bg-red-50/80 p-4 text-sm text-red-800 dark:border-red-500/20 dark:bg-red-500/10 dark:text-red-300" role="alert">
                <x-dash.icon name="exclamation-triangle" class="mt-px size-5 shrink-0" />
                <span>{{ session('error') }}</span>
            </div>
        @endif

        {{--
            The contract with the backend is unchanged: a POST to the Fortify
            login route carrying email, password and remember. Everything here
            is presentation.
        --}}
        <form method="POST" action="{{ route('login') }}" x-data="authForm" @submit="submit" class="space-y-5">
            @csrf

            <x-auth.field name="email" type="email" :label="__('auth.email')"
                          icon="envelope" autocomplete="username" :autofocus="true" />

            <div x-data="authPassword"
                 data-show-label="{{ __('auth.show_password') }}"
                 data-hide-label="{{ __('auth.hide_password') }}">
                <x-auth.field name="password" type="password" :label="__('auth.password_label')"
                              icon="lock-closed" autocomplete="current-password"
                              class="pe-12" x-bind:type="fieldType">
                    <button type="button" @click="toggle" :aria-label="label"
                            class="absolute inset-y-0 end-0 z-10 flex items-center rounded-e-xl pe-4 ps-2 text-slate-400 transition-colors hover:text-slate-700 focus:outline-none focus-visible:text-brand-600 dark:hover:text-slate-200">
                        <x-dash.icon name="eye" class="size-5" x-show="concealed" />
                        <x-dash.icon name="eye-slash" class="size-5" x-cloak x-show="visible" />
                    </button>
                </x-auth.field>
            </div>

            <div class="flex flex-wrap items-center justify-between gap-3">
                <label for="remember" class="group flex cursor-pointer items-center gap-2.5 text-sm text-slate-600 select-none dark:text-slate-300">
                    <input type="checkbox" name="remember" id="remember" value="1" @checked(old('remember'))
                           class="size-4 cursor-pointer rounded border-slate-300 text-brand-600 transition-shadow focus:ring-4 focus:ring-brand-500/20 dark:border-slate-600 dark:bg-slate-800">
                    <span class="transition-colors group-hover:text-slate-900 dark:group-hover:text-white">{{ __('auth.remember_me') }}</span>
                </label>

                @if (Route::has('password.request'))
                    <a href="{{ route('password.request') }}"
                       class="rounded text-sm font-medium text-brand-600 transition-colors hover:text-brand-700 focus:outline-none focus-visible:ring-4 focus-visible:ring-brand-500/20 dark:text-brand-400 dark:hover:text-brand-300">
                        {{ __('auth.forgot_password') }}
                    </a>
                @endif
            </div>

            <button type="submit" @click="ripple" :disabled="submitting"
                    class="group relative flex h-14 w-full items-center justify-center gap-2 overflow-hidden rounded-xl bg-gradient-to-r from-blue-600 to-violet-600 text-[15px] font-semibold text-white shadow-lg shadow-violet-600/25 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-violet-600/30 focus:outline-none focus-visible:ring-4 focus-visible:ring-brand-500/30 active:translate-y-0 disabled:cursor-not-allowed disabled:opacity-70 disabled:hover:translate-y-0">
                <span x-show="submitting" x-cloak class="size-5 animate-spin rounded-full border-2 border-white/30 border-t-white" aria-hidden="true"></span>
                <span>{{ __('auth.sign_in') }}</span>
                <x-dash.icon name="arrow-right" class="size-5 transition-transform duration-200 group-hover:translate-x-0.5 rtl:-scale-x-100" x-show="notSubmitting" />
            </button>
        </form>
    </div>
@endsection