@extends('layouts.auth')

@section('title', 'Login - ' . $branding['company_name'])

@section('content')

<x-auth-shell
    tagline="Sign in to your showroom account"
    divider-text="or sign in with email"
    size="narrow">

    <form action="{{ route('login') }}" method="POST" class="auth-form auth-form-main" data-turbo="false">
        @csrf

        <div class="auth-form-fields">
            <div class="auth-field">
                <label for="email" class="form-label fw-semibold text-muted">Email Address</label>
                <input type="email" class="form-control rounded-pill px-3 @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" required autofocus autocomplete="username">
                @error('email')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>

            <div class="auth-field">
                <div class="auth-label-row">
                    <label for="password" class="form-label fw-semibold text-muted mb-0">Password</label>
                    <a href="{{ route('password.request') }}" class="auth-forgot-link text-danger text-decoration-none">Forgot Password?</a>
                </div>
                <div class="input-group">
                    <input type="password" class="form-control rounded-start-pill px-3 @error('password') is-invalid @enderror" id="password" name="password" required autocomplete="current-password">
                    <span class="input-group-text bg-white rounded-end-pill border-start-0 toggle-password" data-target="password">
                        <i class="bi bi-eye text-muted"></i>
                    </span>
                </div>
                @error('password')
                    <div class="text-danger small mt-1 mb-0">{{ $message }}</div>
                @enderror
            </div>

            <div class="auth-remember-row form-check">
                <input type="checkbox" class="form-check-input" id="remember" name="remember">
                <label class="form-check-label text-muted" for="remember">Remember me next time</label>
            </div>
        </div>

        <button type="submit" class="btn btn-primary-mj auth-submit-btn w-100 rounded-pill text-uppercase fw-semibold">
            Sign In <i class="bi bi-box-arrow-in-right ms-1"></i>
        </button>
    </form>

    <x-slot:footer>
        <span class="text-muted auth-footer-text">New to MJ's Bikes?</span>
        <a href="{{ route('register') }}" data-turbo-frame="auth-content" class="text-danger fw-bold text-decoration-none auth-footer-text ms-1">Create Account</a>
    </x-slot:footer>
</x-auth-shell>

@endsection
