@extends('layouts.auth')

@section('title', 'Sign In')

@section('content')
{{-- Logo --}}
<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>

{{-- Heading --}}
<h1 class="auth-heading">Welcome Back</h1>
<p class="auth-subheading">Sign in to your esports command center</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 --}}
<form action="{{ route('login') }}" 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>

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

    <div class="d-flex align-items-center justify-content-between mb-2">
        <div class="auth-check-row">
            <input type="checkbox" id="remember" name="remember" value="1" @checked(old('remember'))>
            <label for="remember">Remember me</label>
        </div>
        <div class="auth-forgot">
            <a href="{{ route('password.request') }}">Forgot password?</a>
        </div>
    </div>

    <button type="submit" class="auth-btn-primary">Sign In →</button>

</form>

{{-- Divider --}}
<div class="auth-divider"><span>or continue with</span></div>

{{-- Social --}}
<button class="auth-social-btn" type="button">
    <svg width="18" height="18" viewBox="0 0 256 256" fill="none"><path d="M256 128c0-70.69-57.31-128-128-128S0 57.31 0 128c0 53.85 33.19 99.96 80.12 118.96V165.6H56V128h24.12v-29.2c0-23.84 14.19-37 35.9-37 10.4 0 21.3 1.86 21.3 1.86v23.44h-12c-11.8 0-15.48 7.33-15.48 14.84V128H137l-4.35 37.6h-28.05v81.36C183.08 228.58 256 184.06 256 128z" fill="#1877F2"/></svg>
    Continue with Discord
</button>
<button class="auth-social-btn" type="button">
    <svg width="18" height="18" viewBox="0 0 488 512" fill="none"><path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" fill="#EA4335"/></svg>
    Continue with Google
</button>

{{-- Footer --}}
<p class="auth-footer-link">
    Don't have an account? <a href="{{ route('register') }}">Join Free</a>
</p>
@endsection
