{% extends "base.html" %}

{% block body_class %}auth-page{% endblock %}
{% block navbar %}{% endblock %}

{% block content %}
<style>
.auth-card-wrap{max-width:440px;margin:0 auto;}
.auth-logo{max-width:180px;max-height:140px;width:auto;height:auto;object-fit:contain;}
.auth-submit{width:100%;}
@media(max-width:480px){
  .card-body{padding:1.5rem!important;}
  .container{padding-left:.75rem!important;padding-right:.75rem!important;}
  .py-5{padding-top:1.5rem!important;padding-bottom:1.5rem!important;}
}
</style>
<div class="container py-5">
    <div class="auth-card-wrap">
        <div class="card shadow-lg border-0 rounded-4">
            <div class="card-body p-5">
                <div class="text-center mb-4">
                    <div class="mb-3">
                        <img src="{{ url_for('static', filename='images/logo.png') }}"
                             alt="KitchenCrate"
                             class="auth-logo mb-2">
                    </div>
                    <h5 class="fw-bold text-success mb-3">Welcome Back</h5>
                    <p class="text-muted small">Sign in to your account</p>
                </div>

                <form method="POST" action="{{ url_for('login') }}" class="auth-form" id="loginForm">
                    <div class="auth-form-inner">
                        <div class="mb-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Username <span class="text-danger">*</span></label>
                            <input type="text" name="username" class="form-control bg-light border-0 py-3" required autofocus>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold small text-muted text-uppercase">Password <span class="text-danger">*</span></label>
                            <input type="password" name="password" class="form-control bg-light border-0 py-3" required>
                        </div>

                        <div class="row mb-3 auth-form-narrow">
                            <div class="col-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="remember_username" id="rememberUsername">
                                    <label class="form-check-label text-muted small" for="rememberUsername">
                                        Remember username
                                    </label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="remember" id="staySignedIn">
                                    <label class="form-check-label text-muted small" for="staySignedIn">
                                        Stay signed in
                                    </label>
                                </div>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-success py-3 shadow-sm mb-3 auth-submit">
                            <i class="bi bi-box-arrow-in-right me-2"></i>Sign In
                        </button>

                        <div class="text-center">
                            <p class="text-muted small mb-0">
                                <a href="#" class="text-success fw-bold text-decoration-none" onclick="event.preventDefault();" data-bs-toggle="modal" data-bs-target="#forgotPasswordModal">Forgot password?</a>
                                <span class="mx-2">•</span>
                                <a href="{{ url_for('register') }}" class="text-success fw-bold text-decoration-none">Create account</a>
                            </p>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Forgot Password Modal -->
<div class="modal fade" id="forgotPasswordModal" tabindex="-1" aria-labelledby="forgotPasswordModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header border-0 pb-0">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center px-5 py-4">
                <div class="mb-3">
                    <i class="bi bi-clock-history text-success auth-modal-icon"></i>
                </div>
                <h5 class="fw-bold mb-3">Feature Coming Soon</h5>
                <p class="text-muted mb-4">The password recovery feature is currently under development and will be available in a future update. We appreciate your patience as we work to enhance the security and usability of {{ site_name }}.</p>
                <button type="button" class="btn btn-success px-5" data-bs-dismiss="modal">Got it</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const usernameField = document.querySelector('input[name="username"]');
    const rememberCheckbox = document.getElementById('rememberUsername');

    const rememberedUsername = localStorage.getItem('rememberedUsername');
    if (rememberedUsername) {
        usernameField.value = rememberedUsername;
        rememberCheckbox.checked = true;
    }

    document.getElementById('loginForm').addEventListener('submit', function() {
        if (rememberCheckbox.checked) {
            localStorage.setItem('rememberedUsername', usernameField.value);
        } else {
            localStorage.removeItem('rememberedUsername');
        }
    });
});
</script>
{% endblock %}