@extends('layouts.auth')

@section('title', 'Login')

@section('content')
    <h2 class="font-display text-xl font-semibold text-gray-900 mb-1">Welcome back</h2>
    <p class="text-sm text-gray-500 mb-6">Sign in to your account to continue</p>

    {{-- Status message (e.g., after password reset) --}}
    @if (session('status'))
        <div class="mb-4 px-4 py-3 rounded-lg bg-success-50 border border-success-500/20 text-sm text-success-600">
            {{ session('status') }}
        </div>
    @endif

    {{-- Error message --}}
    @if (session('error'))
        <div class="mb-4 px-4 py-3 rounded-lg bg-danger-50 border border-danger-500/20 text-sm text-danger-500">
            {{ session('error') }}
        </div>
    @endif

    <form method="POST" action="{{ route('login') }}" x-data="{ loading: false }" @submit="loading = true">
        @csrf

        {{-- Email --}}
        <div class="mb-4">
            <label for="email" class="form-label">Email address</label>
            <input
                id="email"
                type="email"
                name="email"
                value="{{ old('email') }}"
                class="form-input @error('email') form-input-error @enderror"
                placeholder="you@company.com"
                required
                autofocus
            >
            @error('email')
                <p class="form-error">{{ $message }}</p>
            @enderror
        </div>

        {{-- Password --}}
        <div class="mb-4">
            <div class="flex items-center justify-between mb-1">
                <label for="password" class="form-label mb-0">Password</label>
                <a href="{{ route('password.request') }}" class="text-xs text-primary-600 hover:text-primary-800 transition-colors">
                    Forgot password?
                </a>
            </div>
            <input
                id="password"
                type="password"
                name="password"
                class="form-input @error('password') form-input-error @enderror"
                placeholder="Enter your password"
                required
            >
            @error('password')
                <p class="form-error">{{ $message }}</p>
            @enderror
        </div>

        {{-- Remember Me --}}
        <div class="flex items-center gap-2 mb-6">
            <input
                id="remember"
                type="checkbox"
                name="remember"
                class="form-checkbox"
                {{ old('remember') ? 'checked' : '' }}
            >
            <label for="remember" class="text-sm text-gray-600 cursor-pointer">Remember me</label>
        </div>

        {{-- Submit --}}
        <button
            type="submit"
            class="btn-primary w-full justify-center py-2.5"
            :disabled="loading"
        >
            <template x-if="loading">
                <svg class="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                </svg>
            </template>
            <span x-text="loading ? 'Signing in...' : 'Sign in'">Sign in</span>
        </button>
    </form>
@endsection