{# Authentication modal - Alpine.js controlled #}
<div class="auth-modal"
     x-show="authModal.show"
     x-cloak
     @click.self="closeAuthModal()"
     @keydown.escape.window="authModal.show && closeAuthModal()"
>
    <div class="auth-modal-content">
        <div class="auth-modal-header">
            <div class="auth-modal-title">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20" fill="currentColor">
                    <path d="M4 4a4 4 0 0 1 8 0v2h.25c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 12.25 15h-8.5A1.75 1.75 0 0 1 2 13.25v-5.5C2 6.784 2.784 6 3.75 6H4Zm8.25 3.5h-8.5a.25.25 0 0 0-.25.25v5.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25ZM10.5 6V4a2.5 2.5 0 1 0-5 0v2Z"/>
                </svg>
                <h3>Authentication Required</h3>
            </div>
            <span class="auth-modal-close" @click="closeAuthModal()">&times;</span>
        </div>
        <form class="auth-modal-body" @submit.prevent="submitAuth()">
            <p class="auth-modal-description">Enter the dashboard password to access protected panels.</p>
            <div class="auth-modal-input-group">
                <input type="password"
                       class="auth-modal-input"
                       :class="{ 'auth-modal-input-error': authModal.error }"
                       x-model="authModal.password"
                       x-ref="authPasswordInput"
                       placeholder="Password"
                       autocomplete="off" />
                <p class="auth-modal-error" x-show="authModal.error" x-text="authModal.error" x-cloak></p>
            </div>
            <div class="auth-modal-footer">
                <button type="button" class="auth-modal-btn auth-modal-btn-cancel" @click="closeAuthModal()">Cancel</button>
                <button type="submit" class="auth-modal-btn auth-modal-btn-submit" :disabled="authModal.loading">
                    <span x-show="!authModal.loading">Unlock</span>
                    <span x-show="authModal.loading" x-cloak>Verifying...</span>
                </button>
            </div>
        </form>
    </div>
</div>