{% extends 'main/base.html' %}
{% load static %}

{% block title %}Login - ODEON{% endblock %}

{% block extra_head %}
<style>
    /* Fancy cinematic cover behind the login card. */
    body {
        background: linear-gradient(rgba(0,18,46,0.62), rgba(0,18,46,0.78)),
            url('{% static "assets/B2.jpg" %}') center / cover fixed no-repeat;
    }
</style>
{% endblock %}

{% block content %}
    <section class="content-card section-inner" style="max-width: 460px; margin: 0 auto; background: var(--bg-card); border-radius: 24px; border: 1px solid rgba(148, 163, 184, 0.15); box-shadow: 0 24px 60px rgba(0,0,0,0.35);">
        <h1 style="margin: 0 0 0.75rem; font-size: 2rem;">Login to ODEON</h1>
        <p style="margin: 0 0 1.5rem; color: var(--text-muted);">Enter your username and password to continue.</p>
        <form method="post">
            {% csrf_token %}
            <div class="field" style="margin-bottom: 1rem;">
                <label for="phone" style="display: block; margin-bottom: 0.5rem; color: var(--text-muted);">Phone number</label>
                <!-- Phone with API-driven country code (matches the register form). -->
                <div style="display: flex; gap: 0.5rem;">
                    <!-- Real flag image (renders on every OS, unlike emoji flags). -->
                    <img id="country_flag" src="https://flagcdn.com/48x36/cz.png" alt=""
                         style="flex: 0 0 2.25rem; width: 2.25rem; height: 1.5rem; align-self: center; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgba(148,163,184,0.25);" />
                    <select id="country_code" name="country_code" aria-label="Country code"
                            style="flex: 0 0 6.5rem; min-width: 0; padding: 0.95rem 0.5rem; border-radius: 12px; border: var(--border-soft); background: var(--bg-elev); color: var(--text-main); font-size: 0.9rem; font-weight: 600;">
                        <option value="+420" data-iso="CZ">🇨🇿 +420</option>
                        <option value="+48" data-iso="PL">🇵🇱 +48</option>
                        <option value="+421" data-iso="SK">🇸🇰 +421</option>
                        <option value="+43" data-iso="AT">🇦🇹 +43</option>
                        <option value="+32" data-iso="BE">🇧🇪 +32</option>
                        <option value="+33" data-iso="FR">🇫🇷 +33</option>
                    </select>
                    <input id="phone" name="phone" type="tel" autocomplete="tel" required placeholder="Please enter phone number" value="{{ phone|default:'' }}"
                           style="flex: 1; min-width: 0; padding: 0.95rem 1rem; border-radius: 12px; border: var(--border-soft); background: var(--bg-elev); color: var(--text-main); font-size: 0.95rem;" />
                </div>
            </div>
            <div class="field" style="margin-bottom: 1rem;">
                <label for="password" style="display: block; margin-bottom: 0.5rem; color: var(--text-muted);">Password</label>
                <input id="password" name="password" type="password" autocomplete="current-password" required style="width: 100%; padding: 0.95rem 1rem; border-radius: 14px; border: var(--border-soft); background: var(--bg-elev); color: var(--text-main); font-size: 1rem;" />
            </div>
            <button class="button primary" type="submit" style="width: 100%;">Login</button>
        </form>
        {% if error %}
            <div class="error" style="margin-top: 1rem; padding: 0.9rem 1rem; background: #7f1d1d; border-radius: 12px; color: white;">{{ error }}</div>
        {% endif %}
        <p style="margin: 1.25rem 0 0; text-align: center; color: var(--text-muted); font-size: 0.85rem;">Are you an agent? <a href="/agent/login/" style="color: #f5c451; text-decoration: none; font-weight: 600;">Agent portal &rarr;</a></p>
    </section>

    <script>
        // Populate the country-code dropdown from a public API covering all
        // countries (identical to the register form). Falls back to a small
        // static list if the API is unreachable so login always works.
        (function () {
            const sel = document.getElementById('country_code');
            if (!sel) return;
            // Priority countries shown first (with flags), then the rest.
            const PRIORITY = ['CZ', 'PL', 'SK', 'AT', 'BE'];
            const FALLBACK = [
                ['CZ', '🇨🇿', '+420', 'Czechia'], ['PL', '🇵🇱', '+48', 'Poland'],
                ['SK', '🇸🇰', '+421', 'Slovakia'], ['AT', '🇦🇹', '+43', 'Austria'],
                ['BE', '🇧🇪', '+32', 'Belgium'],
                ['FR', '🇫🇷', '+33', 'France'], ['GB', '🇬🇧', '+44', 'United Kingdom'],
                ['DE', '🇩🇪', '+49', 'Germany'], ['ES', '🇪🇸', '+34', 'Spain'],
                ['IT', '🇮🇹', '+39', 'Italy'], ['NL', '🇳🇱', '+31', 'Netherlands'],
                ['US', '🇺🇸', '+1', 'United States'], ['CN', '🇨🇳', '+86', 'China'],
                ['IN', '🇮🇳', '+91', 'India'], ['JP', '🇯🇵', '+81', 'Japan'],
                ['KR', '🇰🇷', '+82', 'South Korea'], ['AE', '🇦🇪', '+971', 'UAE'],
            ];
            const flagImg = document.getElementById('country_flag');
            // Update the flag image to match the currently selected country.
            function syncFlag() {
                if (!flagImg) return;
                const opt = sel.options[sel.selectedIndex];
                const iso = opt && opt.getAttribute('data-iso');
                if (iso) flagImg.src = 'https://flagcdn.com/48x36/' + iso.toLowerCase() + '.png';
            }
            sel.addEventListener('change', syncFlag);
            function render(rows, keep) {
                const cur = keep || sel.value || '+420';
                sel.innerHTML = '';
                rows.forEach(([iso, flag, dial, name]) => {
                    const o = document.createElement('option');
                    o.value = dial;
                    o.setAttribute('data-iso', iso);
                    o.textContent = (flag ? flag + ' ' : '') + dial + (name ? ' ' + name : '');
                    if (dial === cur) o.selected = true;
                    sel.appendChild(o);
                });
                syncFlag();
            }
            render(FALLBACK);
            fetch('https://restcountries.com/v3.1/all?fields=name,idd,cca2,flag,region')
                .then(r => r.ok ? r.json() : Promise.reject())
                .then(list => {
                    const rows = [];
                    list.forEach(c => {
                        // All countries with an international dial code.
                        const root = c.idd && c.idd.root;
                        if (!root) return;
                        const sfx = (c.idd.suffixes && c.idd.suffixes.length === 1) ? c.idd.suffixes[0] : '';
                        rows.push([c.cca2, c.flag || '', root + sfx, (c.name && c.name.common) || c.cca2]);
                    });
                    if (!rows.length) return;
                    rows.sort((a, b) => a[3].localeCompare(b[3]));
                    // Pull the priority countries to the top of the list.
                    const pri = [], rest = [];
                    rows.forEach(r => (PRIORITY.indexOf(r[0]) !== -1 ? pri : rest).push(r));
                    pri.sort((a, b) => PRIORITY.indexOf(a[0]) - PRIORITY.indexOf(b[0]));
                    render(pri.concat(rest));
                })
                .catch(() => { /* keep fallback list */ });
        })();
    </script>
{% endblock %}