{% extends "layout.html" %}

{% block content %}
<script src="https://www.google.com/recaptcha/api.js"></script>
    <header class="site-header">
        <div class="container header-inner">
            <a href="#" class="logo" aria-label="Home"></a>
        </div>
    </header>

    <main class="login-page-wrapper">
        <div class="container">
            <div class="login-card">
                
                <div class="login-header">
                    <h1 class="login-title">Welcome Back</h1>
                    <p class="login-subtitle">Please enter your credentials.</p>
					<!-- <p class="login-subtitle">{{ $current_page }}</p> -->
                </div>

                <form id="adminLoginForm" onsubmit="return false;">
                    
                    <div class="form-group">
                        <label for="usernameField">Username / Phone</label>
                        <div class="input-wrapper">
                            <input type="text" id="usernameField" placeholder="Enter username or phone" autocomplete="username">
                            <i class="fa-solid fa-circle-user input-icon"></i>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="passwordField">Password</label>
                        <div class="input-wrapper">
                            <input type="password" id="passwordField" placeholder="Enter your password" autocomplete="current-password">
                            <i class="fas fa-lock input-icon"></i>
                            <i class="fas fa-eye toggle-password" id="togglePasswordBtn"></i>
                        </div>
                    </div>

                    <button class="g-recaptcha btn-success" 
                            data-sitekey="6Lf8NTksAAAAALwIOhXE5W_N3CriwTqaO4ifZJDy" 
                            data-callback='onSubmit' 
                            data-action='submit'
                            id="btnLogin">
                        Login <i class="fas fa-arrow-right"></i>
                    </button>

                    <div id="globalMessage" class="status-message"></div>

                </form>
            </div>
        </div>
    </main>
{% endblock %}