{% extends "base.html" %}

{% block content %}
<div class="container d-flex justify-content-center align-items-center">
    <div class="card shadow-sm p-4" style="width: 100%; max-width: 400px;">
        <h3 class="mb-1 text-center">Login</h3>
        <p class="text-center text-muted small mb-4">
            Your timezone will be saved to show times correctly.
        </p>
        <form method="post">
            {{ form.hidden_tag() }}

            <div class="mb-3">
                {{ form.username.label(class="form-label") }}
                {{ form.username(class="form-control", placeholder="Enter username") }}
                {% if form.username.errors %}
                <div class="text-danger small">
                    {{ form.username.errors[0] }}
                </div>
                {% endif %}
            </div>

            <div class="mb-3">
                {{ form.password.label(class="form-label") }}
                {{ form.password(class="form-control", placeholder="Enter password") }}
                {% if form.password.errors %}
                <div class="text-danger small">
                    {{ form.password.errors[0] }}
                </div>
                {% endif %}
            </div>

            {{ form.timezone(id="timezone") }}

            <div class="d-grid">
                {{ form.submit(class="btn btn-primary btn-lg") }}
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const tzField = document.getElementById('timezone');
        tzField.value = Intl.DateTimeFormat().resolvedOptions().timeZone;
    });
</script>
{% endblock %}