{% load i18n %}

<div id="ndr-password-gate" style="position:fixed;inset:0;background:rgba(0,0,0,0.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:9999;display:flex;align-items:center;justify-content:center;">
    <div style="background:var(--container-bg-color,#fff);color:var(--text-color,#333);border-radius:16px;padding:2.5rem 2rem;max-width:380px;width:90%;text-align:center;box-shadow:0 24px 64px rgba(0,0,0,0.5);">
        <div style="font-size:2.5rem;color:var(--accent-color-1,#5a8f5a);margin-bottom:1rem;">
            <i class="fa-solid fa-lock"></i>
        </div>
        <h4 style="color:var(--title-color,#111);margin-bottom:0.4rem;">{% trans "Preview Access" %}</h4>
        <p style="color:var(--text-color,#555);font-size:0.9rem;margin-bottom:1.5rem;">{% trans "This site is currently password protected." %}</p>
        <div id="ndr-gate-error" style="display:none;background:rgba(209,73,91,0.15);color:#d1495b;border:1px solid rgba(209,73,91,0.4);border-radius:8px;padding:0.5rem 0.75rem;margin-bottom:1rem;font-size:0.875rem;">
            {% trans "Incorrect password. Please try again." %}
        </div>
        <input type="password" id="ndr-gate-password" class="form-control mb-3"
               placeholder="{% trans 'Enter password' %}" autofocus autocomplete="off">
        <button id="ndr-gate-submit" class="btn btn-primary w-100">
            <i class="fa-solid fa-unlock"></i> {% trans "Unlock" %}
        </button>
    </div>
</div>

<script>
(function () {
    var csrfToken = '{{ csrf_token }}';
    var input = document.getElementById('ndr-gate-password');
    var btn = document.getElementById('ndr-gate-submit');
    var errBox = document.getElementById('ndr-gate-error');
    var gate = document.getElementById('ndr-password-gate');

    function tryUnlock() {
        var pw = input.value;
        if (!pw) { input.focus(); return; }
        btn.disabled = true;
        errBox.style.display = 'none';

        fetch("{% url 'ndr_core:unlock_site' %}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRFToken': csrfToken
            },
            body: 'password=' + encodeURIComponent(pw)
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            if (data.success) {
                gate.style.transition = 'opacity 0.4s ease';
                gate.style.opacity = '0';
                setTimeout(function () { gate.remove(); }, 400);
            } else {
                errBox.style.display = 'block';
                input.value = '';
                input.focus();
                btn.disabled = false;
            }
        })
        .catch(function () { btn.disabled = false; });
    }

    btn.addEventListener('click', tryUnlock);
    input.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') tryUnlock();
    });
})();
</script>