@extends('layouts.auth')

@section('title', __('auth.portal_login') . ' — ' . config('app.name'))

@section('form')
    <span class="section-eyebrow">{{ __('auth.portal_login') }}</span>
    <h1 class="text-3xl">{{ __('auth.sign_in') }}</h1>
    <p class="mt-3 leading-relaxed text-ink-500">{{ __('auth.login_intro') }}</p>

    <div class="mt-6">
        <x-alerts/>
    </div>

    <form method="POST" action="{{ route('login.store') }}" class="mt-2 space-y-5">
        @csrf

        <div>
            <label for="phone" class="field-label">{{ __('auth.mobile_number') }}</label>
            <div class="flex items-stretch gap-2" dir="ltr">
                <span class="flex items-center rounded-xl bg-ink-50 px-4 font-semibold text-ink-500">
                    +{{ config('sms.default_country_code') }}
                </span>
                <input id="phone"
                       name="phone"
                       type="tel"
                       inputmode="numeric"
                       autocomplete="tel"
                       autofocus
                       required
                       value="{{ old('phone') }}"
                       placeholder="{{ __('auth.mobile_placeholder') }}"
                       class="field-input flex-1">
            </div>
            @error('phone')
                <p class="field-error">{{ $message }}</p>
            @enderror
        </div>

        <button type="submit" class="btn-brand w-full">{{ __('auth.send_code') }}</button>
    </form>

    <p class="mt-6 flex items-start gap-2 rounded-2xl bg-ink-50 px-4 py-3 text-sm text-ink-500">
        <svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/>
        </svg>
        {{ __('auth.security_note') }}
    </p>
@endsection