@extends('layouts.login-modern')
@section('title', 'Anmelden')
@section('content')
    <div class="login-shell">
        <div class="login-brand" aria-label="ArtSpotter">
            <span class="login-brand-mark" aria-hidden="true"><span></span></span>
            <span>ArtSpotter<span class="login-brand-dot">.</span></span>
        </div>
        <section class="login-card" aria-labelledby="login-title">
            <header class="login-heading">
                <p class="login-eyebrow">DER REDAKTIONSBEREICH</p>
                <h1 id="login-title">Willkommen zurück.</h1>
                <p>Melden Sie sich mit Ihren Zugangsdaten an.</p>
            </header>
            <form class="login-form" method="POST" action="{{ route('login') }}">
                @csrf
                <div class="login-field">
                    <label for="email">E-Mail-Adresse</label>
                    <input id="email" type="email" name="email" placeholder="name@beispiel.de"
                           value="{{ old('email') }}" required autocomplete="email" autofocus
                           @error('email') aria-invalid="true" aria-describedby="email-error" @enderror>
                    @error('email')
                        <p id="email-error" class="login-error" role="alert">{{ $message }}</p>
                    @enderror
                </div>
                <div class="login-field">
                    <label for="password">Passwort</label>
                    <input id="password" type="password" name="password" placeholder="Ihr Passwort"
                           required autocomplete="current-password"
                           @error('password') aria-invalid="true" aria-describedby="password-error" @enderror>
                    @error('password')
                        <p id="password-error" class="login-error" role="alert">{{ $message }}</p>
                    @enderror
                </div>
                <button class="login-submit" type="submit">
                    <span>Anmelden</span>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <path d="M5 12h14m-6-6 6 6-6 6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
            </form>
            <div class="login-card-footer">Ihr Arbeitsplatz für Kunst und Auktionen.</div>
        </section>
        <p class="login-footer">ArtSpotter <span aria-hidden="true">/</span> Redaktion</p>
    </div>
@endsection