{% extends "base.html" %}
{% block title %}Authentication - RadiusForge{% endblock %}
{% block content %}
    <div class="rf-page-head">
        <div>
            <h1>Authentication</h1>
            {% if organization %}<p class="rf-lede">For <strong>{{ organization.name }}</strong></p>{% endif %}
        </div>
    </div>
    <p class="hint">Choose where your subscribers' passwords are checked. With <strong>Local</strong>, RadiusForge
       stores them. With <strong>LDAP / Active Directory</strong>, they are checked against your own directory
       and RadiusForge stores no password for them at all. Changes usually take effect in under a minute.
       Hover over a label for an explanation.</p>

    {% if status %}
    <div class="status-box {% if status.state == 'active' %}status-active{% elif status.state == 'applying' %}status-applying{% elif status.state == 'none' %}status-neutral{% else %}status-bad{% endif %}">
        <strong>{{ status.headline }}</strong>{% if status.when %} <span class="rf-muted">({{ status.when }})</span>{% endif %}<br>
        {{ status.detail }}
    </div>
    {% endif %}

    <form method="post" class="rf-auth-settings">
        {% csrf_token %}
        {{ form.non_field_errors }}

        <h2>{{ form.auth_backend.label }}</h2>
        {{ form.auth_backend.errors }}
        {{ form.auth_backend }}

        <div id="ldap-fields" class="rf-form-card">
            <h2 class="rf-card-title">Your directory</h2>
            {% for field in form %}
                {% if field.name != "auth_backend" %}
                <div class="rf-field" data-field="{{ field.name }}">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    {{ field }}
                    {% if field.help_text %}<div class="helptext">{{ field.help_text }}</div>{% endif %}
                    {{ field.errors }}
                </div>
                {% endif %}
            {% endfor %}
        </div>

        <div class="rf-form-actions">
            <button type="submit">Save</button>
        </div>
    </form>

    <script>
        function showHideDirectory() {
            var chosen = document.querySelector('input[name="auth_backend"]:checked');
            document.getElementById('ldap-fields').style.display =
                (chosen && chosen.value === 'ldap') ? 'block' : 'none';
        }
        document.querySelectorAll('input[name="auth_backend"]').forEach(function (radio) {
            radio.addEventListener('change', showHideDirectory);
        });
        showHideDirectory();

        // The certificate fields only matter when the connection is encrypted.
        // Hidden fields are still sent, so a saved CA is kept if security is
        // switched to None and back.
        var security = document.getElementById('id_security');
        var port = document.getElementById('id_port');
        function showHideCertificate() {
            var encrypted = security && security.value !== 'none' && security.value !== '';
            document.querySelectorAll('[data-field="ca_certificate"], [data-field="verify_certificate"]')
                .forEach(function (el) { el.style.display = encrypted ? '' : 'none'; });
        }
        if (security) {
            security.addEventListener('change', function () {
                // Suggest the usual port, unless a non-standard one was typed
                // (found 30 Sep 2026: LDAPS chosen with the port left on 389).
                if (port && (port.value === '' || port.value === '389' || port.value === '636')) {
                    port.value = security.value === 'ldaps' ? '636' : '389';
                }
                showHideCertificate();
            });
            showHideCertificate();
        }
    </script>
    {% if status and status.state == "applying" %}
    <script>setTimeout(function () { location.reload(); }, 5000);</script>
    {% endif %}
{% endblock %}