@extends('layouts.mobile')

@section('title', 'Crear cuenta')
@section('screen-label', 'Registro')
@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('register')">
    <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);">Crea tu cuenta</div>
        <div class="fm-muted" style="font-size:14px;margin-top:6px;">Gratis. Empieza tu primer fermento en minutos.</div>
    </div>

    <form @submit.prevent="submit()" class="fm-stack" style="gap:14px;">
        <div><label class="fm-label">Nombre</label><input x-model="form.name" type="text" class="fm-input" autocomplete="name" placeholder="Tu nombre"></div>
        <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 x-data="{ ver: false }"><label class="fm-label">Contraseña</label>
            <div style="position:relative;">
                <input x-model="form.password" :type="ver ? 'text' : 'password'" class="fm-input" autocomplete="new-password" placeholder="Mínimo 8 caracteres" 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>
        <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…' : 'Crear cuenta'"></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('login') }}" style="text-align:center;margin-top:18px;color:var(--green-700);text-decoration:none;font:600 14px var(--font-sans);">¿Ya tienes cuenta? Entra</a>
</div>
@endsection

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