@extends('layouts.mobile')

@section('title', 'Entrar')
@section('screen-label', 'Login')
@section('bare', '1')

@section('content')
<div style="flex:1;display:flex;flex-direction:column;padding:24px 24px 28px;background:var(--bg-canvas);overflow-y:auto;"
     x-data="authForm('login')">
    <a href="{{ route('welcome') }}" style="color:var(--ink-500);text-decoration:none;font-size:18px;"><i class="fa-solid fa-arrow-left"></i></a>

    <div style="margin:24px 0 22px;">
        <div style="font-family:var(--font-display);font-weight:700;font-size:28px;color:var(--text-primary);">Hola de nuevo</div>
        <div class="fm-muted" style="font-size:14px;margin-top:6px;">Entra para seguir tus fermentos.</div>
    </div>

    <form @submit.prevent="submit()" class="fm-stack" style="gap:14px;" x-data="{ ver: false }">
        <div><label class="fm-label">Correo</label><input x-model="form.email" type="email" class="fm-input" autocomplete="email" placeholder="tucorreo@ejemplo.com"></div>
        <div><label class="fm-label">Contraseña</label>
            <div style="position:relative;">
                <input x-model="form.password" :type="ver ? 'text' : 'password'" class="fm-input" autocomplete="current-password" placeholder="••••••••" style="padding-right:48px;">
                <button type="button" @click="ver = !ver" :aria-label="ver ? 'Ocultar contraseña' : 'Mostrar contraseña'"
                        style="position:absolute;top:0;right:0;width:44px;height:100%;border:none;background:none;cursor:pointer;color:var(--ink-400);">
                    <i class="fa-solid" :class="ver ? 'fa-eye-slash' : 'fa-eye'"></i>
                </button>
            </div>
        </div>
        <a href="{{ route('password.request') }}" style="align-self:flex-end;margin-top:-6px;color:var(--green-700);text-decoration:none;font:600 13px var(--font-sans);">¿Has olvidado tu contraseña?</a>
        <p x-show="error" x-cloak x-text="error" style="margin:0;color:var(--rust-500);font:500 13px/1.4 var(--font-sans);"></p>
        <button type="submit" class="fm-btn fm-btn--gold fm-btn--block" :disabled="busy" x-text="busy ? 'Un momento…' : 'Entrar'"></button>
    </form>

    <div style="display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--text-muted);font:500 12.5px var(--font-sans);">
        <span style="flex:1;height:1px;background:var(--border-default);"></span> o <span style="flex:1;height:1px;background:var(--border-default);"></span>
    </div>
    @include('mobile.partials._google-btn')

    <a href="{{ route('register') }}" style="text-align:center;margin-top:18px;color:var(--green-700);text-decoration:none;font:600 14px var(--font-sans);">¿No tienes cuenta? Crea una</a>
</div>
@endsection

@push('scripts')@include('mobile.partials._authform-script')@endpush