@extends('layouts.auth')

@section('title', 'Inloggen - DineSync')

@section('showcase-title', 'Run je restaurant vanuit één krachtige omgeving.')
@section('showcase-description', 'Beheer restaurants, personeel, rollen, tafels, bestellingen en live keukenflows vanuit één modern platform.')

@section('header-icon', 'ri-login-circle-line')
@section('header-eyebrow', 'Veilig inloggen')
@section('header-title', 'Welkom terug')
@section('header-description', 'Log in om je DineSync-omgeving en restaurants te beheren.')

@section('content')
<form method="POST" action="{{ route('login.post') }}" class="auth-form">
    @csrf

    <div class="auth-field">
        <label for="email">E-mailadres</label>

        <div class="auth-input">
            <i class="ri-mail-line auth-input__icon"></i>

            <input
                id="email"
                type="email"
                name="email"
                value="{{ old('email') }}"
                placeholder="jij@restaurant.be"
                autocomplete="email"
                required
                autofocus
            >
        </div>

        @error('email')
            <small class="auth-field__error">{{ $message }}</small>
        @enderror
    </div>

    <div class="auth-field">
        <label for="password">Wachtwoord</label>

        <div class="auth-input">
            <i class="ri-lock-password-line auth-input__icon"></i>

            <input
                id="password"
                type="password"
                name="password"
                placeholder="Voer je wachtwoord in"
                autocomplete="current-password"
                required
            >

            <button
                type="button"
                class="auth-password-toggle"
                data-password-toggle="password"
                aria-label="Wachtwoord tonen"
            >
                <i class="ri-eye-line"></i>
            </button>
        </div>

        @error('password')
            <small class="auth-field__error">{{ $message }}</small>
        @enderror
    </div>

    <div class="auth-form__row">
        <label class="auth-checkbox">
            <input
                type="checkbox"
                name="remember"
                value="1"
                {{ old('remember') ? 'checked' : '' }}
            >

            <span>Onthoud mij</span>
        </label>

        <a href="#" class="auth-link">
            Wachtwoord vergeten?
        </a>
    </div>

    <button type="submit" class="auth-submit">
        <span>Inloggen</span>
        <i class="ri-arrow-right-line"></i>
    </button>
</form>

<div class="auth-card__footer">
    <span>Nog geen account?</span>

    <a href="{{ route('register') }}">
        Maak gratis een account aan
    </a>
</div>

<div class="auth-security">
    <i class="ri-shield-check-line"></i>
    <span>Je accountgegevens worden veilig verwerkt.</span>
</div>
@endsection