@extends('layouts.auth')

@section('title', __('ui.auth.sign_in_title'))

@section('content')
    <div class="auth-heading">
        <div class="auth-pill-badge">
            <span class="auth-pill-dot"></span>
            <span>{{ __('ui.auth.sign_in_title') }}</span>
        </div>
        <h1 id="page-title">{{ __('ui.auth.welcome') }}</h1>
        <p class="muted">{{ __('ui.auth.description') }}</p>
    </div>

    <form class="stack auth-form" method="POST" action="{{ route('login.store') }}">
        @csrf

        <div class="field auth-field">
            <label for="email">{{ __('ui.auth.email') }}</label>
            <div class="auth-input-control">
                <input id="email" name="email" type="email" value="{{ old('email', config('initial_admin.email', 'admin@7tech.local')) }}" autocomplete="username" required autofocus @error('email') aria-invalid="true" @enderror placeholder="name@7tech.local">
            </div>
            @error('email') <span class="field-error" role="alert">{{ $message }}</span> @enderror
        </div>

        <div class="field auth-field">
            <label for="password">{{ __('ui.auth.password') }}</label>
            <div class="auth-input-control auth-password-control">
                <input id="password" name="password" type="password" value="{{ config('initial_admin.password', 'Admin@12345678!') }}" autocomplete="current-password" required @error('password') aria-invalid="true" @enderror placeholder="••••••••••••">
                <button class="auth-password-toggle" type="button" data-password-toggle data-password-target="password"
                    data-show-label="{{ __('ui.auth.show_password') }}" data-hide-label="{{ __('ui.auth.hide_password') }}"
                    aria-label="{{ __('ui.auth.show_password') }}"><x-admin.icon name="eye" /></button>
            </div>
            @error('password') <span class="field-error" role="alert">{{ $message }}</span> @enderror
        </div>

        <div class="auth-form-options">
            <label class="checkbox auth-checkbox"><input name="remember" type="checkbox" value="1"><span>{{ __('ui.auth.remember') }}</span></label>
            <a class="auth-forgot-link" href="{{ route('password.request') }}">{{ __('ui.auth.forgot') }}</a>
        </div>

        <button class="button auth-submit" type="submit">
            <span>{{ __('ui.auth.sign_in') }}</span>
            <x-admin.icon name="chevron" />
        </button>
    </form>
@endsection