@extends('layouts.auth')

@section('title', __('Sign in'))
@section('heading', __('Sign in'))
@section('intro', __('Access your saved properties, enquiries and listings.'))

@section('form')
    <form action="{{ route('login') }}" method="POST" class="space-y-5"
          x-data="submitGuard" @submit="submit()">
        @csrf

        {{-- One field for both credentials: asking somebody to remember which
             of the two they signed up with is asking them to fail. --}}
        <x-form.input name="login" type="text" :label="__('Username or email address')" required
                      autocomplete="username" autofocus />

        <div>
            <div class="mb-1.5 flex items-baseline justify-between gap-4">
                <label for="password" class="form-label mb-0">
                    {{ __('Password') }}<span class="text-error" aria-hidden="true">*</span>
                </label>

                <a href="{{ route('password.request') }}"
                   class="text-xs font-medium text-text-brand underline-offset-4 hover:underline">
                    {{ __('Forgot password?') }}
                </a>
            </div>

            <input id="password" name="password" type="password" required autocomplete="current-password"
                   class="form-input @error('password') border-error @enderror">
        </div>

        <x-form.checkbox name="remember" :label="__('Keep me signed in')" />

        <button type="submit" class="btn btn-primary w-full" :disabled="submitting">
            <span x-show="!submitting">{{ __('Sign in') }}</span>
            <span x-show="submitting" x-cloak>{{ __('Signing in…') }}</span>
        </button>
    </form>
@endsection

@section('footer')
    {{ __('New here?') }}
    <a href="{{ route('register') }}" class="font-medium text-text-brand underline-offset-4 hover:underline">
        {{ __('Create an account') }}
    </a>
@endsection