@extends('layouts.auth')

@section('title', 'Set New 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">New Password</h1>
<p class="auth-subheading">Choose a strong password for your account</p>

@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.store') }}" method="POST">
    @csrf

    <input type="hidden" name="token" value="{{ $request->route('token') }}">

    <div class="auth-field">
        <label class="auth-label" for="email">Email Address</label>
        <input type="email" id="email" name="email" value="{{ old('email', $request->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>

    <div class="auth-field">
        <label class="auth-label" for="password">New Password</label>
        <input type="password" id="password" name="password" class="auth-input @error('password') is-invalid @enderror" placeholder="Min. 8 characters" autocomplete="new-password" required>
        @error('password')
            <span class="auth-field-error">{{ $message }}</span>
        @enderror
    </div>

    <div class="auth-field">
        <label class="auth-label" for="password_confirmation">Confirm Password</label>
        <input type="password" id="password_confirmation" name="password_confirmation" class="auth-input" placeholder="Repeat password" autocomplete="new-password" required>
    </div>

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

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