@extends('layouts.auth')

@section('title', 'Forgot Password')

@section('content')
<a href="{{ route('home') }}" class="auth-logo">
    <div class="auth-logo__mark">
        <svg viewBox="0 0 24 24" fill="none" width="22" height="22">
            <path d="M12 2L5 10H9L7 18H11L12 14L13 18H17L15 10H19L12 2Z" fill="#00D4FF"/>
        </svg>
    </div>
    <span class="auth-logo__name">ALGA ARENA</span>
</a>

<h1 class="auth-heading">Reset Password</h1>
<p class="auth-subheading">Enter your email and we'll send you a reset link</p>

@if (session('status'))
    <div class="auth-alert auth-alert--success">{{ session('status') }}</div>
@endif

@if ($errors->any())
    <div class="auth-alert auth-alert--error">
        @foreach ($errors->all() as $error)
            <div>{{ $error }}</div>
        @endforeach
    </div>
@endif

<form action="{{ route('password.email') }}" method="POST">
    @csrf

    <div class="auth-field">
        <label class="auth-label" for="email">Email Address</label>
        <input type="email" id="email" name="email" value="{{ old('email') }}" class="auth-input @error('email') is-invalid @enderror" placeholder="player@algaarena.gg" autocomplete="email" required autofocus>
        @error('email')
            <span class="auth-field-error">{{ $message }}</span>
        @enderror
    </div>

    <button type="submit" class="auth-btn-primary">Send Reset Link →</button>
</form>

<p class="auth-footer-link">
    Remember your password? <a href="{{ route('login') }}">Sign In</a>
</p>
@endsection
