{% extends 'core/base.html' %}

{% block title %}{{ title }} - {{ org.name }} | Killian{% endblock %}
{% block scripts %}<script src="/static/js/firewall-router-form.js"></script>{% endblock %}

{% block content %}
<div class="breadcrumbs">
    <a href="{% url 'org_list' %}">Organizations</a>
    <span>/</span>
    <a href="{% url 'org_detail' org.pk %}">{{ org.name }}</a>
    <span>/</span>
    <a href="{% url 'org_module' org.pk 'firewall-router' %}">Firewall / Router</a>
    <span>/</span>
    <strong>{{ title }}</strong>
</div>

<div class="page-head page-head-width-1200">
    <div>
        <h1>{{ title }}</h1>
        <p>{{ subtitle }}</p>
    </div>
    <div class="page-head-actions">
        <a class="button secondary" href="{{ back_url }}">Back</a>
    </div>
</div>

<div class="form-card" style="max-width:1200px;">
    <form method="post" id="firewall-router-form">
        {% csrf_token %}

        {% if form.non_field_errors %}
            <div style="margin-bottom:18px;color:var(--danger);">
                {{ form.non_field_errors }}
            </div>
        {% endif %}

        <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;">
            <div>
                <label for="{{ form.name.id_for_label }}">{{ form.name.label }}</label>
                {{ form.name }}
                {{ form.name.errors }}
            </div>

            <div>
                <label for="{{ form.device_type.id_for_label }}">{{ form.device_type.label }}</label>
                {{ form.device_type }}
                {{ form.device_type.errors }}
            </div>

            <div>
                <label for="{{ form.status.id_for_label }}">{{ form.status.label }}</label>
                {{ form.status }}
                {{ form.status.errors }}
            </div>

            <div>
                <label for="{{ form.location.id_for_label }}">{{ form.location.label }}</label>
                {{ form.location }}
                {{ form.location.errors }}
            </div>

            <div>
                <label for="{{ form.serial_number.id_for_label }}">{{ form.serial_number.label }}</label>
                {{ form.serial_number }}
                {{ form.serial_number.errors }}
            </div>

            <div>
                <label for="{{ form.model.id_for_label }}">{{ form.model.label }}</label>
                {{ form.model }}
                {{ form.model.errors }}
            </div>

            <div>
                <label for="{{ form.installed_date.id_for_label }}">{{ form.installed_date.label }}</label>
                {{ form.installed_date }}
                {{ form.installed_date.errors }}
            </div>

            <div>
                <label for="{{ form.hostname.id_for_label }}">{{ form.hostname.label }}</label>
                {{ form.hostname }}
                {{ form.hostname.errors }}
            </div>

            <div style="grid-column:1 / -1;">
                <label for="{{ form.primary_ip.id_for_label }}">{{ form.primary_ip.label }}</label>
                {{ form.primary_ip }}
                {{ form.primary_ip.errors }}
            </div>
        </div>

        <div style="margin-top:26px;padding-top:22px;border-top:1px solid var(--line);">
            <label for="{{ form.notes.id_for_label }}">{{ form.notes.label }}</label>
            {{ form.notes }}
            {{ form.notes.errors }}
        </div>

        <div style="margin-top:30px;padding-top:24px;border-top:1px solid var(--line);">
            <div class="section-head" style="margin-bottom:16px;">
                <div>
                    <h2 style="margin:0;font-size:19px;">Interfaces</h2>
                    <p class="section-subtitle">
                        Add the firewall/router interfaces, optional VLAN IDs, and one or more named MAC addresses per interface.
                    </p>
                </div>
                <button type="button" class="button secondary compact" id="add-interface">
                    Add Interface
                </button>
            </div>

            {{ interface_formset.management_form }}

            {% if interface_formset.non_form_errors %}
                <div style="margin-bottom:12px;color:var(--danger);">
                    {{ interface_formset.non_form_errors }}
                </div>
            {% endif %}

            <div id="interface-forms" style="display:flex;flex-direction:column;gap:16px;">
                {% for interface_form, mac_formset in interface_rows %}
                    <section class="firewall-interface-row"
                             data-interface-index="{{ forloop.counter0 }}"
                             style="padding:16px;border:1px solid var(--line);border-radius:10px;background:#0e1628;">
                        {% for hidden in interface_form.hidden_fields %}
                            {{ hidden }}
                        {% endfor %}

                        <div style="display:grid;grid-template-columns:minmax(0,1fr) 180px auto;gap:12px;align-items:end;">
                            <div>
                                <label for="{{ interface_form.name.id_for_label }}">{{ interface_form.name.label }}</label>
                                {{ interface_form.name }}
                                {{ interface_form.name.errors }}
                            </div>

                            <div>
                                <label for="{{ interface_form.vlan.id_for_label }}">{{ interface_form.vlan.label }}</label>
                                {{ interface_form.vlan }}
                                {{ interface_form.vlan.errors }}
                            </div>

                            <div>
                                {% if interface_form.instance.pk %}
                                    <label style="display:flex;align-items:center;gap:8px;margin-bottom:11px;cursor:pointer;">
                                        {{ interface_form.DELETE }}
                                        <span>Delete Interface</span>
                                    </label>
                                {% else %}
                                    <button type="button" class="button secondary compact remove-interface">
                                        Remove Interface
                                    </button>
                                {% endif %}
                            </div>
                        </div>

                        <div class="mac-section"
                             style="margin-top:16px;padding-top:16px;border-top:1px solid var(--line);">
                            <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;">
                                <strong style="font-size:14px;">MAC Addresses</strong>
                                <button type="button" class="button secondary compact add-mac">
                                    Add MAC
                                </button>
                            </div>

                            {{ mac_formset.management_form }}

                            {% if mac_formset.non_form_errors %}
                                <div style="margin-bottom:10px;color:var(--danger);">
                                    {{ mac_formset.non_form_errors }}
                                </div>
                            {% endif %}

                            <div class="mac-forms" style="display:flex;flex-direction:column;gap:10px;">
                                {% for mac_form in mac_formset %}
                                    <div class="mac-row"
                                         style="display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:end;">
                                        {% for hidden in mac_form.hidden_fields %}
                                            {{ hidden }}
                                        {% endfor %}

                                        <div>
                                            <label for="{{ mac_form.name.id_for_label }}">{{ mac_form.name.label }}</label>
                                            {{ mac_form.name }}
                                            {{ mac_form.name.errors }}
                                        </div>

                                        <div>
                                            <label for="{{ mac_form.mac_address.id_for_label }}">{{ mac_form.mac_address.label }}</label>
                                            {{ mac_form.mac_address }}
                                            {{ mac_form.mac_address.errors }}
                                        </div>

                                        <div>
                                            {% if mac_form.instance.pk %}
                                                <label style="display:flex;align-items:center;gap:8px;margin-bottom:11px;cursor:pointer;">
                                                    {{ mac_form.DELETE }}
                                                    <span>Delete</span>
                                                </label>
                                            {% else %}
                                                <button type="button" class="button secondary compact remove-mac">
                                                    Remove
                                                </button>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </section>
                {% endfor %}
            </div>

            <template id="interface-empty-template">
                <section class="firewall-interface-row"
                         data-interface-index="__iface__"
                         style="padding:16px;border:1px solid var(--line);border-radius:10px;background:#0e1628;">
                    {% for hidden in interface_formset.empty_form.hidden_fields %}
                        {{ hidden }}
                    {% endfor %}

                    <div style="display:grid;grid-template-columns:minmax(0,1fr) 180px auto;gap:12px;align-items:end;">
                        <div>
                            <label for="id_interfaces-__iface__-name">Interface Name</label>
                            <input type="text"
                                   name="interfaces-__iface__-name"
                                   maxlength="120"
                                   class="form-control"
                                   id="id_interfaces-__iface__-name">
                        </div>

                        <div>
                            <label for="id_interfaces-__iface__-vlan">VLAN</label>
                            <input type="number"
                                   name="interfaces-__iface__-vlan"
                                   min="0"
                                   class="form-control"
                                   id="id_interfaces-__iface__-vlan">
                        </div>

                        <div>
                            <button type="button" class="button secondary compact remove-interface">
                                Remove Interface
                            </button>
                        </div>
                    </div>

                    <div class="mac-section"
                         style="margin-top:16px;padding-top:16px;border-top:1px solid var(--line);">
                        <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;">
                            <strong style="font-size:14px;">MAC Addresses</strong>
                            <button type="button" class="button secondary compact add-mac">
                                Add MAC
                            </button>
                        </div>

                        <input type="hidden"
                               name="macs-__iface__-TOTAL_FORMS"
                               value="1"
                               id="id_macs-__iface__-TOTAL_FORMS">
                        <input type="hidden"
                               name="macs-__iface__-INITIAL_FORMS"
                               value="0"
                               id="id_macs-__iface__-INITIAL_FORMS">
                        <input type="hidden"
                               name="macs-__iface__-MIN_NUM_FORMS"
                               value="0"
                               id="id_macs-__iface__-MIN_NUM_FORMS">
                        <input type="hidden"
                               name="macs-__iface__-MAX_NUM_FORMS"
                               value="1000"
                               id="id_macs-__iface__-MAX_NUM_FORMS">

                        <div class="mac-forms" style="display:flex;flex-direction:column;gap:10px;">
                            <div class="mac-row"
                                 style="display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:end;">
                                <div>
                                    <label for="id_macs-__iface__-0-name">MAC Name</label>
                                    <input type="text"
                                           name="macs-__iface__-0-name"
                                           maxlength="120"
                                           class="form-control"
                                           id="id_macs-__iface__-0-name">
                                </div>

                                <div>
                                    <label for="id_macs-__iface__-0-mac_address">MAC Address</label>
                                    <input type="text"
                                           name="macs-__iface__-0-mac_address"
                                           maxlength="17"
                                           class="form-control"
                                           placeholder="AA:BB:CC:DD:EE:FF"
                                           id="id_macs-__iface__-0-mac_address">
                                </div>

                                <div>
                                    <button type="button" class="button secondary compact remove-mac">
                                        Remove
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </template>

            <template id="mac-empty-template">
                <div class="mac-row"
                     style="display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:end;">
                    <div>
                        <label>MAC Name</label>
                        <input type="text"
                               name="macs-__iface__-__mac__-name"
                               maxlength="120"
                               class="form-control">
                    </div>

                    <div>
                        <label>MAC Address</label>
                        <input type="text"
                               name="macs-__iface__-__mac__-mac_address"
                               maxlength="17"
                               class="form-control"
                               placeholder="AA:BB:CC:DD:EE:FF">
                    </div>

                    <div>
                        <button type="button" class="button secondary compact remove-mac">
                            Remove
                        </button>
                    </div>
                </div>
            </template>
        </div>

        <div class="form-actions">
            <button type="submit">Save Firewall / Router</button>
            <a class="button secondary" href="{{ back_url }}">Cancel</a>
        </div>
    </form>
</div>


{% endblock %}