@extends('layouts.guest')
@section('title', 'Anmelden')
@section('content')
<h2 class="text-2xl font-bold">Anmelden</h2>
<form method="post" action="{{ route('login') }}" class="mt-6 space-y-5">
    @csrf
    <label class="field-label">E-Mail-Adresse / Benutzername
        <input class="field mt-1" type="email" name="email" value="{{ old('email') }}" autocomplete="username" required autofocus>
    </label>
    <label class="field-label" for="password">Passwort</label>
    <div class="relative mt-1">
        <input id="password" class="field pr-24" type="password" name="password" autocomplete="current-password" required>
        <button id="toggle-password" class="absolute inset-y-0 right-0 px-3 text-sm font-bold text-cyan-800 hover:text-cyan-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-700" type="button" aria-controls="password" aria-pressed="false">Anzeigen</button>
    </div>
    <label class="flex items-center gap-2 text-sm text-slate-700"><input type="checkbox" name="remember" value="1"> Angemeldet bleiben</label>
    <button class="button-primary w-full">Sicher anmelden</button>
</form>
<script>
    document.getElementById('toggle-password').addEventListener('click', function () {
        const input = document.getElementById('password');
        const visible = input.type === 'text';
        input.type = visible ? 'password' : 'text';
        this.textContent = visible ? 'Anzeigen' : 'Verbergen';
        this.setAttribute('aria-pressed', visible ? 'false' : 'true');
        input.focus();
    });
</script>
<p class="mt-4 text-center text-sm"><a class="font-bold text-cyan-800" href="{{ route('password.request') }}">Passwort vergessen?</a></p>
<p class="mt-6 text-center text-sm text-slate-600">Einladung erhalten? <a class="font-bold text-cyan-800" href="{{ route('invite.code') }}">Mit Ausdruck-Code aktivieren</a></p>
@endsection