{% extends "base.html" %}
{% block title %}{% if editing %}Edit{% else %}Add{% endif %} plan - RadiusForge{% endblock %}
{% block content %}
    <div class="rf-page-head">
        <div>
            <h1>{% if editing %}Edit {{ editing.name }}{% else %}Add plan{% endif %}</h1>
        </div>
    </div>
    <p class="hint">Hover over a field's label for an explanation. The speed fields change with the
       router type you pick, because each vendor controls speed differently.</p>

    <form method="post" class="rf-form-card">
        {% csrf_token %}
        {{ form.organization }}

        <label for="{{ form.name.id_for_label }}" title="{{ form.name.field.widget.attrs.title }}">{{ form.name.label }}</label>
        {{ form.name }}
        {% if form.name.errors %}<div class="errorlist">{{ form.name.errors }}</div>{% endif %}

        <label for="{{ form.vendor.id_for_label }}" title="{{ form.vendor.field.widget.attrs.title }}">{{ form.vendor.label }}</label>
        {{ form.vendor }}
        {% if form.vendor.errors %}<div class="errorlist">{{ form.vendor.errors }}</div>{% endif %}

        <div id="group-numeric">
            <label for="{{ form.download_mbps.id_for_label }}" title="{{ form.download_mbps.field.widget.attrs.title }}">{{ form.download_mbps.label }}</label>
            {{ form.download_mbps }}
            {% if form.download_mbps.help_text %}<div class="helptext">{{ form.download_mbps.help_text }}</div>{% endif %}

            <label for="{{ form.upload_mbps.id_for_label }}" title="{{ form.upload_mbps.field.widget.attrs.title }}">{{ form.upload_mbps.label }}</label>
            {{ form.upload_mbps }}
            {% if form.upload_mbps.help_text %}<div class="helptext">{{ form.upload_mbps.help_text }}</div>{% endif %}
        </div>

        <div id="group-named">
            <label for="{{ form.primary_profile_name.id_for_label }}">
                <span id="primary-profile-label">Profile / policy name</span>
            </label>
            {{ form.primary_profile_name }}
            <div class="helptext" id="primary-profile-help">{{ form.primary_profile_name.help_text }}</div>

            <div id="group-cisco-secondary">
                <label for="{{ form.secondary_profile_name.id_for_label }}" title="{{ form.secondary_profile_name.field.widget.attrs.title }}">{{ form.secondary_profile_name.label }}</label>
                {{ form.secondary_profile_name }}
                <div class="helptext">{{ form.secondary_profile_name.help_text }}</div>
            </div>

            <div id="group-juniper-rate">
                <label for="{{ form.shaping_rate_kbps.id_for_label }}" title="{{ form.shaping_rate_kbps.field.widget.attrs.title }}">{{ form.shaping_rate_kbps.label }}</label>
                {{ form.shaping_rate_kbps }}
                <div class="helptext">{{ form.shaping_rate_kbps.help_text }}</div>
            </div>
        </div>

        <label for="{{ form.simultaneous_use.id_for_label }}" title="{{ form.simultaneous_use.field.widget.attrs.title }}">{{ form.simultaneous_use.label }}</label>
        {{ form.simultaneous_use }}

        <label for="{{ form.session_timeout_minutes.id_for_label }}">{{ form.session_timeout_minutes.label }}</label>
        {{ form.session_timeout_minutes }}
        {% if form.session_timeout_minutes.help_text %}<div class="helptext">{{ form.session_timeout_minutes.help_text }}</div>{% endif %}

        <label for="{{ form.idle_timeout_minutes.id_for_label }}">{{ form.idle_timeout_minutes.label }}</label>
        {{ form.idle_timeout_minutes }}
        {% if form.idle_timeout_minutes.help_text %}<div class="helptext">{{ form.idle_timeout_minutes.help_text }}</div>{% endif %}

        <h2 class="rf-card-title">Allowances</h2>
        <label for="{{ form.data_cap_gb.id_for_label }}" title="{{ form.data_cap_gb.field.widget.attrs.title }}">{{ form.data_cap_gb.label }}</label>
        {{ form.data_cap_gb }}
        <div class="helptext">{{ form.data_cap_gb.help_text }}</div>
        {% if form.data_cap_gb.errors %}<div class="errorlist">{{ form.data_cap_gb.errors }}</div>{% endif %}

        <label for="{{ form.time_cap_hours.id_for_label }}" title="{{ form.time_cap_hours.field.widget.attrs.title }}">{{ form.time_cap_hours.label }}</label>
        {{ form.time_cap_hours }}
        <div class="helptext">{{ form.time_cap_hours.help_text }} When either allowance is used up, the choice below applies.</div>
        {% if form.time_cap_hours.errors %}<div class="errorlist">{{ form.time_cap_hours.errors }}</div>{% endif %}

        <label for="{{ form.cap_counts.id_for_label }}" title="{{ form.cap_counts.field.widget.attrs.title }}">{{ form.cap_counts.label }}</label>
        {{ form.cap_counts }}

        <label for="{{ form.cap_action.id_for_label }}" title="{{ form.cap_action.field.widget.attrs.title }}">{{ form.cap_action.label }}</label>
        {{ form.cap_action }}
        {% if form.cap_action.errors %}<div class="errorlist">{{ form.cap_action.errors }}</div>{% endif %}

        <div id="group-cap-slow">
            <label for="{{ form.cap_slow_download_mbps.id_for_label }}" title="{{ form.cap_slow_download_mbps.field.widget.attrs.title }}">{{ form.cap_slow_download_mbps.label }}</label>
            {{ form.cap_slow_download_mbps }}
            {% if form.cap_slow_download_mbps.errors %}<div class="errorlist">{{ form.cap_slow_download_mbps.errors }}</div>{% endif %}

            <label for="{{ form.cap_slow_upload_mbps.id_for_label }}" title="{{ form.cap_slow_upload_mbps.field.widget.attrs.title }}">{{ form.cap_slow_upload_mbps.label }}</label>
            {{ form.cap_slow_upload_mbps }}
            {% if form.cap_slow_upload_mbps.errors %}<div class="errorlist">{{ form.cap_slow_upload_mbps.errors }}</div>{% endif %}
        </div>

        <div class="checkbox-row">
            {{ form.is_active }}
            <label for="{{ form.is_active.id_for_label }}">{{ form.is_active.label }}</label>
        </div>

        <div class="rf-form-actions">
            <button type="submit">Save</button>
            <a href="{% url 'plan-list' %}">Cancel</a>
        </div>
    </form>

    {% if editing %}
    <hr class="rf-divider">
    <h2>Advanced attributes</h2>
    <p class="hint">Extra RADIUS attributes on top of the settings above: a fixed IP address, a DNS
       server, a firewall filter and more. Pick from the list rather than typing a raw attribute name;
       each option explains the value it expects.</p>

    {% if extra_attributes %}
    <table class="rf-cards">
        <thead>
            <tr><th>Attribute</th><th>Value</th><th><span class="rf-visually-hidden">Actions</span></th></tr>
        </thead>
        <tbody>
        {% for extra in extra_attributes %}
            <tr>
                <td data-label="Attribute" class="rf-primary">{{ extra.attribute }}</td>
                <td data-label="Value" class="mono">{{ extra.value }}</td>
                <td class="rf-actions">
                    <form method="post" action="{% url 'plan-attribute-delete' editing.pk extra.pk %}"
                          onsubmit="return confirm('Remove this attribute from the plan?');">
                        {% csrf_token %}
                        <button type="submit" class="small-button">Remove</button>
                    </form>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p class="rf-empty">No advanced attributes on this plan.</p>
    {% endif %}

    <form method="post" action="{% url 'plan-attribute-add' editing.pk %}" class="rf-form-card rf-form-spaced">
        {% csrf_token %}
        <label for="{{ attribute_form.attribute.id_for_label }}">{{ attribute_form.attribute.label }}</label>
        {{ attribute_form.attribute }}

        <label for="{{ attribute_form.value.id_for_label }}" title="{{ attribute_form.value.field.widget.attrs.title }}">{{ attribute_form.value.label }}</label>
        {{ attribute_form.value }}

        <div class="rf-form-actions">
            <button type="submit">Add attribute</button>
        </div>
    </form>
    {% endif %}

    <script>
        const NAMED_PROFILE_VENDORS = ["cisco", "juniper", "fortinet"];
        const PRIMARY_LABELS = {
            cisco: "Inbound QoS policy-map name",
            juniper: "Traffic-control profile name",
            fortinet: "FortiGate group name",
        };

        function updateVendorFields() {
            const vendorSelect = document.getElementById("id_vendor");
            if (!vendorSelect) return;
            const vendor = vendorSelect.value;
            const isNamedProfile = NAMED_PROFILE_VENDORS.includes(vendor);

            document.getElementById("group-numeric").style.display = isNamedProfile ? "none" : "";
            document.getElementById("group-named").style.display = isNamedProfile ? "" : "none";
            document.getElementById("group-cisco-secondary").style.display = vendor === "cisco" ? "" : "none";
            document.getElementById("group-juniper-rate").style.display = vendor === "juniper" ? "" : "none";

            const labelEl = document.getElementById("primary-profile-label");
            if (labelEl) labelEl.textContent = PRIMARY_LABELS[vendor] || "Profile / policy name";
        }

        document.getElementById("id_vendor").addEventListener("change", updateVendorFields);
        window.addEventListener("DOMContentLoaded", updateVendorFields);

        // The slow-down speeds only matter when the plan slows people down.
        function updateCapFields() {
            const action = document.getElementById("id_cap_action");
            if (!action) return;
            document.getElementById("group-cap-slow").style.display = action.value === "slow" ? "" : "none";
        }
        document.getElementById("id_cap_action").addEventListener("change", updateCapFields);
        window.addEventListener("DOMContentLoaded", updateCapFields);
    </script>
{% endblock %}