@extends('layouts.auth')

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

@section('content')
    <div class="auth-card">
        <h1>Welcome back</h1>
        <p class="auth-subtitle">Sign in to your Tenseal account</p>

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

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

            <div class="form-group">
                <label for="email">Email Address</label>
                <input
                    type="email"
                    id="email"
                    name="email"
                    class="form-input {{ $errors->has('email') ? 'is-invalid' : '' }}"
                    placeholder="you@example.com"
                    value="{{ old('email') }}"
                    required
                    autofocus
                >
            </div>

            <div class="form-group">
                <label for="password">Password</label>
                <div class="password-wrapper">
                    <input
                        type="password"
                        id="password"
                        name="password"
                        class="form-input {{ $errors->has('password') ? 'is-invalid' : '' }}"
                        placeholder="Enter your password"
                        required
                    >
                    <button type="button" class="password-toggle" tabindex="-1" aria-label="Toggle password visibility">
                        <svg class="eye-open" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                        <svg class="eye-closed" viewBox="0 0 24 24" style="display:none"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                    </button>
                </div>
            </div>

            <div class="form-row">
                <div class="form-check">
                    <input type="checkbox" id="remember" name="remember" {{ old('remember') ? 'checked' : '' }}>
                    <label for="remember">Remember me</label>
                </div>
                <a href="{{ route('password.request') }}" class="form-link">Forgot password?</a>
            </div>

            @if ($errors->any() || session('error'))
                <div class="auth-alert auth-alert-danger" style="margin-bottom: 1rem;">
                    {{ session('error') ?? $errors->first() }}
                </div>
            @endif

            <button type="submit" class="btn-auth">
                <span class="btn-spinner"></span>
                <span class="btn-text">Sign In</span>
                <span class="btn-loading-text">Signing in...</span>
            </button>
        </form>

        @include('partials.google-signin')
    </div>

    <div class="auth-footer">
        Don't have an account? <a href="{{ route('register') }}">Create one</a>
    </div>
@endsection