@php
    $authModalInitialMode = in_array(old('auth_mode'), ['login', 'register'], true) ? old('auth_mode') : 'login';
    $authRegisterStartedToken = \Illuminate\Support\Facades\Crypt::encryptString((string) now()->timestamp);
    $authModalShouldOpen = in_array(old('auth_mode'), ['login', 'register'], true);
    $authModalReturnTo = request()->getRequestUri();
@endphp

<dialog
    class="cw-auth-dialog"
    data-auth-dialog
    data-login-url="{{ route('login') }}"
    data-register-url="{{ route('register') }}"
    data-csrf-url="{{ route('auth.csrf') }}"
    data-initial-mode="{{ $authModalInitialMode }}"
    data-auto-open="{{ $authModalShouldOpen ? 'true' : 'false' }}"
    aria-label="{{ __('ui.auth_account') }}"
>
    <div class="cw-auth-modal-shell">
        <button type="button" class="cw-auth-modal-close" data-auth-close aria-label="{{ __('ui.header_close_menu') }}">×</button>

        <div class="cw-auth-modal-brand" aria-hidden="true">
            <span class="cw-auth-modal-brand-mark">CW</span>
            <span>
                <strong>Coaster World</strong>
                <small>{{ __('ui.auth_account') }}</small>
            </span>
        </div>

        <div class="cw-auth-modal-tabs" role="tablist" aria-label="{{ __('ui.auth_account') }}">
            <a
                href="{{ route('login') }}"
                class="cw-auth-modal-tab"
                data-auth-switch="login"
                role="tab"
                aria-selected="{{ $authModalInitialMode === 'login' ? 'true' : 'false' }}"
            >{{ __('ui.auth_login') }}</a>
            <a
                href="{{ route('register') }}"
                class="cw-auth-modal-tab"
                data-auth-switch="register"
                role="tab"
                aria-selected="{{ $authModalInitialMode === 'register' ? 'true' : 'false' }}"
            >{{ __('ui.auth_register') }}</a>
        </div>

        <section class="cw-auth-modal-pane" data-auth-pane="login" @if($authModalInitialMode !== 'login') hidden @endif>
            <span class="eyebrow">{{ __('ui.auth_account') }}</span>
            <h2>{{ __('ui.auth_login_title') }}</h2>
            <p class="cw-auth-modal-intro">{{ __('ui.auth_login_intro') }}</p>

            @if($authModalInitialMode === 'login' && session('status'))
                <div class="form-success" role="status">{{ session('status') }}</div>
            @endif
            @if($authModalInitialMode === 'login' && session('social_auth_error'))
                <div class="admin-error" role="alert">{{ session('social_auth_error') }}</div>
            @endif

            <x-social-auth-buttons :return-to="$authModalReturnTo" />

            <form method="post" action="{{ route('login.store') }}" class="auth-form cw-auth-modal-form" data-auth-form="login">
                @csrf
                <input type="hidden" name="auth_mode" value="login">
                <input type="hidden" name="return_to" value="{{ $authModalReturnTo }}">

                <label>
                    {{ __('ui.auth_email') }}
                    <input type="email" name="email" value="{{ $authModalInitialMode === 'login' ? old('email') : '' }}" required autocomplete="email" data-auth-first-input="login">
                </label>
                @if($authModalInitialMode === 'login')
                    @error('email')<small class="form-error">{{ $message }}</small>@enderror
                @endif

                <label>
                    {{ __('ui.auth_password') }}
                    <x-password-input name="password" autocomplete="current-password" required />
                </label>

                <div class="auth-form-row">
                    <label class="auth-check"><input type="checkbox" name="remember" value="1"> {{ __('ui.auth_remember') }}</label>
                    <a href="{{ route('password.request') }}">{{ __('ui.security_forgot_password') }}</a>
                </div>

                <button class="button button-primary cw-auth-modal-submit" type="submit">{{ __('ui.auth_login') }}</button>
            </form>

            <p class="auth-switch">{{ __('ui.auth_no_account') }} <a href="{{ route('register') }}" data-auth-switch="register">{{ __('ui.auth_register') }}</a></p>
        </section>

        <section class="cw-auth-modal-pane" data-auth-pane="register" @if($authModalInitialMode !== 'register') hidden @endif>
            <span class="eyebrow">{{ __('ui.auth_account') }}</span>
            <h2>{{ __('ui.auth_register_title') }}</h2>
            <p class="cw-auth-modal-intro">{{ __('ui.auth_register_intro') }}</p>

            <x-social-auth-buttons :return-to="$authModalReturnTo" />

            <form method="post" action="{{ route('register.store') }}" class="auth-form cw-auth-modal-form" data-auth-form="register">
                @csrf
                <input type="hidden" name="auth_mode" value="register">
                <input type="hidden" name="return_to" value="{{ $authModalReturnTo }}">
                <input type="hidden" name="register_started_token" value="{{ $authRegisterStartedToken }}">
                <div class="form-honeypot" aria-hidden="true">
                    <label>Website<input type="text" name="website" tabindex="-1" autocomplete="off"></label>
                </div>

                <label>{{ __('ui.auth_name') }}<input type="text" name="name" value="{{ $authModalInitialMode === 'register' ? old('name') : '' }}" required autocomplete="name" data-auth-first-input="register"></label>
                @if($authModalInitialMode === 'register')
                    @error('name')<small class="form-error">{{ $message }}</small>@enderror
                @endif

                <label>{{ __('ui.auth_email') }}<input type="email" name="email" value="{{ $authModalInitialMode === 'register' ? old('email') : '' }}" required autocomplete="email"></label>
                @if($authModalInitialMode === 'register')
                    @error('email')<small class="form-error">{{ $message }}</small>@enderror
                @endif

                <label>{{ __('ui.auth_password') }}<x-password-input name="password" autocomplete="new-password" required /></label>
                <small class="form-help">{{ __('ui.security_password_requirements') }}</small>
                @if($authModalInitialMode === 'register')
                    @error('password')<small class="form-error">{{ $message }}</small>@enderror
                @endif

                <label>{{ __('ui.auth_password_confirm') }}<x-password-input name="password_confirmation" autocomplete="new-password" required /></label>
                <button class="button button-primary cw-auth-modal-submit" type="submit">{{ __('ui.auth_create') }}</button>
            </form>

            <p class="auth-switch">{{ __('ui.auth_have_account') }} <a href="{{ route('login') }}" data-auth-switch="login">{{ __('ui.auth_login') }}</a></p>
        </section>
    </div>
</dialog>