<x-layouts.app :title="__('earn_portal.login_title').' — TrafficPumper'">
    <x-auth-card :title="__('earn_portal.login_title')" :description="__('earn_portal.login_description')">
        <form method="POST" action="{{ route('earn.login.store') }}">@csrf
            <div class="mb-3"><label class="form-label" for="email">{{ __('ui.email') }}</label><input class="form-control" id="email" name="email" type="email" value="{{ old('email') }}" required autofocus autocomplete="email"></div>
            <div class="mb-3"><label class="form-label" for="password">{{ __('ui.password') }}</label><input class="form-control" id="password" name="password" type="password" required autocomplete="current-password"></div>
            <div class="form-check mb-3"><input class="form-check-input" id="remember" name="remember" type="checkbox"><label class="form-check-label" for="remember">{{ __('ui.remember') }}</label></div>
            <button class="btn btn-primary w-100" type="submit">{{ __('earn_portal.sign_in') }}</button>
        </form>
        <div class="d-flex flex-wrap justify-content-between gap-2 mt-3 small"><a href="{{ route('earn.register') }}">{{ __('earn_portal.create_account') }}</a><a href="{{ route('home') }}">{{ __('earn_portal.back_home') }}</a></div>
        <div class="d-flex align-items-center justify-content-center gap-2 mt-4 pt-3 border-top"><x-locale-picker /><x-theme-picker /></div>
    </x-auth-card>
</x-layouts.app>
