{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "IPv4 Addresses" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "IPv4 Addresses" %}</h1>
            <div class="eenos-page-subtitle">{% translate "View and manage IPv4 addresses configured on this server." %}</div>
        </div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "Network & DNS" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "IP Addresses" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "IPv4 Addresses" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="mb-4">
            <div class="eenos-panel-title">{% translate "Configured IPv4 Addresses" %}</div>
            <div class="eenos-panel-subtitle">{% translate "Assigned addresses are protected from deletion." %}</div>
        </div>
        <div class="mb-3">
            <button id="bulk-delete"
                    type="button"
                    class="btn btn-outline-danger btn-sm"
                    disabled><i data-lucide="trash-2" class="me-1"></i>{% translate "Delete Selected" %}</button>
        </div>
        <table id="eenos-data-table" class="table table-hover align-middle w-100">
            <thead>
                <tr>
                    <th>
                        <input id="select-all"
                               type="checkbox"
                               class="form-check-input mt-0 align-middle"
                               aria-label="{% translate 'Select all available addresses' %}">
                    </th>
                    <th>{% translate "Address" %}</th>
                    <th>{% translate "Subnet" %}</th>
                    <th>{% translate "Gateway" %}</th>
                    <th>{% translate "Interface" %}</th>
                    <th>{% translate "Owner" %}</th>
                    <th>{% translate "Status" %}</th>
                    <th class="text-end">{% translate "Action" %}</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="mt-3"><a href="{% url 'addipv4' %}" class="btn btn-primary btn-sm"><i data-lucide="plus" class="me-1"></i>{% translate "Add IPv4" %}</a></div>
    <form id="delete-form" method="post">
        {% csrf_token %}
        <input type="hidden" name="delete_ip" id="delete-ip"><input type="hidden" name="nic" id="delete-nic"><input type="hidden" name="delete" value="yes">
    </form>
    <form id="bulk-form" method="post">
        {% csrf_token %}
        <input type="hidden" name="iplist" id="ip-list"><input type="hidden" name="bulk_delete" value="yes">
    </form>
    <div class="modal fade" id="delete-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i data-lucide="trash-2" class="me-2"></i>{% translate "Delete IPv4 Address" %}</h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <p id="delete-description" class="mb-3"></p>
                    <div class="eenos-notice eenos-notice-danger">
                        <div class="eenos-notice-icon">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title">{% translate "Permanent action" %}</div>
                            <div class="eenos-notice-text">{% translate "The selected address configuration will be removed from this server." %}</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{% translate "Cancel" %}</button><button id="confirm-delete" type="button" class="btn btn-danger">{% translate "Delete" %}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
$(function () {
  const escapeHtml = value => $("<div>").text(value == null ? "" : value).html();
  const selected = new Set();
  const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById("delete-modal"));
  let pending = null;
  const updateSelection = () => { $("#bulk-delete").prop("disabled", selected.size === 0); };
  const table = $("#eenos-data-table").DataTable({
    responsive: { details: { renderer: DataTable.Responsive.renderer.listHiddenNodes() } }, processing: true, pageLength: 25,
    lengthMenu: [[10,25,50,100,-1],[10,25,50,100,"{% translate 'All' %}"]],
    ajax: { url: "{% url 'networking_ipv4_data' %}", type: "GET", dataSrc: "data" }, order: [[1,"asc"]],
    columns: [
      { data: null, orderable: false, searchable: false, width: "36px", className: "text-nowrap align-middle", render: (d,t,r) => t !== "display" || r.is_assigned ? "" : '<input type="checkbox" class="form-check-input row-select mt-0 align-middle" value="'+escapeHtml(r.selection_value)+'" aria-label="{% translate "Select address" %}">' },
      { data: "address", responsivePriority: 1, render: (d,t) => t === "display" ? '<span class="font-monospace fw-semibold">'+escapeHtml(d || "-")+'</span>' : d },
      { data: "subnet", render: (d,t) => t === "display" ? '<span class="font-monospace">'+escapeHtml(d || "-")+'</span>' : d },
      { data: "gateway", render: (d,t) => t === "display" ? '<span class="font-monospace">'+escapeHtml(d || "-")+'</span>' : d },
      { data: "interface", render: (d,t) => t === "display" ? escapeHtml(d || "-") : d },
      { data: "owner", render: (d,t) => t === "display" ? escapeHtml(d || "-") : d },
      { data: "is_assigned", responsivePriority: 2, render: (d,t) => t !== "display" ? d : d ? '<span class="eenos-status text-success"><i data-lucide="user-check"></i> {% translate "Assigned" %}</span>' : '<span class="eenos-status text-muted"><i data-lucide="circle-dashed"></i> {% translate "Available" %}</span>' },
      { data: null, orderable: false, searchable: false, className: "text-end", width: "70px", responsivePriority: 1, render: (d,t,r) => t !== "display" || r.is_assigned ? "" : '<div class="eenos-dt-actions"><button type="button" class="btn btn-sm btn-outline-danger delete-address" data-address="'+escapeHtml(r.address)+'" data-interface="'+escapeHtml(r.interface)+'" title="{% translate "Delete IPv4 Address" %}" aria-label="{% translate "Delete IPv4 Address" %}"><i data-lucide="trash-2"></i></button></div>' }
    ],
    language: { processing: '{% translate "Loading..." %}', emptyTable: "{% translate 'No IPv4 addresses have been configured.' %}", zeroRecords: "{% translate 'No matching IPv4 addresses found.' %}" },
    drawCallback: function () { $(".row-select").each(function(){ this.checked = selected.has(this.value); }); if (typeof lucide !== "undefined") lucide.createIcons(); }
  });
  $(document).on("change", ".row-select", function(){ this.checked ? selected.add(this.value) : selected.delete(this.value); updateSelection(); });
  $("#select-all").on("change", function(){ const checked=this.checked; $(".row-select").each(function(){ this.checked=checked; checked ? selected.add(this.value) : selected.delete(this.value); }); updateSelection(); });
  table.on("draw", function(){ $("#select-all").prop("checked", false); });
  $(document).on("click", ".delete-address", function(){ pending={address:$(this).data("address"), interface:$(this).data("interface")}; $("#delete-description").text("{% translate 'Delete IPv4 address' %} " + pending.address + "?"); modal.show(); });
  $("#bulk-delete").on("click", function(){ pending={bulk:true}; $("#delete-description").text("{% translate 'Delete the selected IPv4 addresses?' %}"); modal.show(); });
  $("#confirm-delete").on("click", function(){ if (!pending) return; if (pending.bulk) { $("#ip-list").val(Array.from(selected).join(",")); $("#bulk-form").trigger("submit"); } else { $("#delete-ip").val(pending.address); $("#delete-nic").val(pending.interface); $("#delete-form").trigger("submit"); } });
});
    </script>
{% endblock %}