{# SPDX-FileCopyrightText: 2026 Marcin Zieba <marcinpsk@gmail.com> #}
{# SPDX-FileCopyrightText: 2026 Andrew Backeby <andrew@backeby.eu> #}
{# SPDX-License-Identifier: Apache-2.0 #}
{% extends "netbox_kea/server_workspace.html" %}
{% load form_helpers %}
{% load kea_options %}

{% block content %}
{% kea_option_datalist dhcp_version %}
{% include "netbox_kea/includes/persist_config_warning.html" %}
<div class="row">
  <div class="col col-md-6 offset-md-3">
    <div class="card">
      <div class="card-header">
        <strong>{{ action }} DHCPv{{ dhcp_version }} Reservation</strong>
      </div>
      <div class="card-body">
        {% if not mutation_available %}
        <div class="alert alert-warning d-flex align-items-start mb-3" role="alert">
          <i class="mdi mdi-lock-alert-outline me-2 mt-1" aria-hidden="true"></i>
          <div>
            <strong>Mutation is unavailable.</strong>
            NetBox Kea could not verify the live Reservation identifiers and required host commands.
            Existing Reservations remain available in the read-only list.
          </div>
        </div>
        {% endif %}
        {% if not subnet_cmds_available %}
        <div class="alert alert-warning d-flex align-items-start mb-3" role="alert">
          <i class="mdi mdi-alert-circle-outline me-2 mt-1" aria-hidden="true"></i>
          <div>
            <strong>The <code>subnet_cmds</code> hook library is not loaded on this Kea server.</strong>
            The subnet list comes from the running configuration.
            Saving an in-Subnet Reservation requires this hook to verify Subnet identity.
          </div>
        </div>
        {% endif %}
        <form method="post" id="reservation-form">
          {% csrf_token %}
          {% for field in form.hidden_fields %}{{ field }}{% endfor %}
          {% if dhcp_version == 4 %}{% firstof "#id_ip_address" as address_field %}{% else %}{% firstof "#id_ip_addresses" as address_field %}{% endif %}
          {% for field in form.visible_fields %}
          {% render_field field %}
          {% if field.name == "hostname" %}
          {# The server computes the preview; a disabled Subnet field is not sent, so the edit URL carries it. #}
          <div class="row mb-3">
            <div class="col offset-sm-3 form-text mt-0" id="published-name-preview" aria-live="polite"
                 hx-get="{{ published_name_url }}"
                 hx-trigger="load, input changed delay:400ms from:#id_hostname, change from:#id_subnet_cidr, change from:{{ address_field }}"
                 hx-include="#id_hostname, #id_subnet_cidr, {{ address_field }}"></div>
          </div>
          {% endif %}
          {% endfor %}
          {# Advisory NetBox IPAM conflict check (Add mode only) — populated on IP blur. #}
          <div id="netbox-ip-check"></div>

          {# DHCP Options section #}
          <hr>
          {% if dhcp_version == 4 %}
          <div class="d-flex justify-content-between align-items-center mb-2">
            <strong>DHCP Options <span class="text-muted fw-normal">(optional)</span></strong>
            <button type="button" class="btn btn-sm btn-outline-secondary"
                    data-bs-toggle="collapse" data-bs-target="#ztp-examples" aria-expanded="false">
              <i class="mdi mdi-help-circle-outline" aria-hidden="true"></i> ZTP Examples
            </button>
          </div>

          <div class="collapse mb-3" id="ztp-examples">
            <div class="card card-body small bg-light">
              <p class="mb-2"><strong>Common ZTP / vendor options</strong></p>
              <table class="table table-sm table-bordered mb-2">
                <thead><tr><th>Name</th><th>Example value</th><th>Use case</th></tr></thead>
                <tbody>
                  <tr><td><code>boot-file-name</code></td><td><code>http://10.0.0.1/ztp.py</code></td><td>Cisco IOS XE / NX-OS / Junos bootstrap URL (option 67)</td></tr>
                  <tr><td><code>tftp-server-name</code></td><td><code>10.0.0.1</code></td><td>TFTP server for legacy IOS (option 66)</td></tr>
                  <tr><td><code>vendor-encapsulated-options</code></td><td><code>0117687474703a2f2f31302e302e302e312f706f61702e7079</code></td><td>Cisco POAP / Aruba Central (option 43, hex TLV)</td></tr>
                </tbody>
              </table>
              <p class="mb-0 text-muted">
                Option 43 value is a hex string encoding TLV sub-options — see
                <a href="https://kea.readthedocs.io/en/latest/arm/dhcp4-srv.html#standard-dhcpv4-options" target="_blank">Kea docs</a>
                for full reference.
              </p>
            </div>
          </div>
          {% else %}
          <div class="mb-2">
            <strong>DHCP Options <span class="text-muted fw-normal">(optional)</span></strong>
          </div>
          {% endif %}

          {{ options_formset.management_form }}
          {% if options_formset.non_form_errors %}
            <div class="alert alert-danger">
              {% for error in options_formset.non_form_errors %}<div>{{ error }}</div>{% endfor %}
            </div>
          {% endif %}
          <table class="table table-sm" id="options-table">
            <thead>
              <tr><th>Option Name</th><th>Value</th><th>Always Send</th><th>Delete</th></tr>
            </thead>
            <tbody id="formset-rows">
              {% for opt_form in options_formset %}
                <tr class="formset-row">
                  <td>{{ opt_form.original_index }}{{ opt_form.name }}{% for err in opt_form.name.errors %}<div class="text-danger small">{{ err }}</div>{% endfor %}</td>
                  <td>{{ opt_form.data }}{% for err in opt_form.data.errors %}<div class="text-danger small">{{ err }}</div>{% endfor %}</td>
                  <td class="text-center">{{ opt_form.always_send }}</td>
                  <td class="text-center">{{ opt_form.DELETE }}</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
          <div class="mb-3">
            <button type="button" class="btn btn-sm btn-outline-secondary" id="add-row">
              <i class="mdi mdi-plus" aria-hidden="true"></i> Add Option
            </button>
          </div>

          <div class="text-end mt-3">
            <a href="{{ return_url }}" class="btn btn-secondary me-2">Cancel</a>
            <button type="submit" class="btn btn-primary"{% if not mutation_available %} disabled aria-disabled="true"{% endif %}>
              <i class="mdi mdi-content-save" aria-hidden="true"></i> Save
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

{% include "netbox_kea/inc/formset_add_row.html" %}

{% if action == "Add" %}
{% comment %}
  Live NetBox IPAM conflict advisory: on blur of the IP field, fetch a small
  HTML fragment and show it under the field.  Plain fetch, no HTMX dependency.
  Only attached in Add mode — the IP field is disabled (read-only) when editing.
{% endcomment %}
<script>
(function () {
  var fieldId = {{ dhcp_version }} === 6 ? "id_ip_addresses" : "id_ip_address";
  var input = document.getElementById(fieldId);
  var target = document.getElementById("netbox-ip-check");
  if (!input || !target) { return; }
  var baseUrl = "{% url 'plugins:netbox_kea:reservation_check_ip' object.pk %}";

  input.addEventListener("blur", function () {
    // DHCPv6 reservations may list several comma-separated addresses; check each
    // one so a conflict in the 2nd+ address is not silently missed.
    var values = (input.value || "")
      .split(",")
      .map(function (value) { return value.trim(); })
      .filter(Boolean);
    if (!values.length) {
      target.innerHTML = "";
      return;
    }
    Promise.all(values.map(function (value) {
      return fetch(baseUrl + "?ip=" + encodeURIComponent(value), {
        headers: { "X-Requested-With": "XMLHttpRequest" },
        credentials: "same-origin",
      })
        .then(function (resp) { return resp.ok ? resp.text() : ""; })
        .catch(function () { return ""; });
    })).then(function (fragments) {
      target.innerHTML = fragments.filter(Boolean).join("");
    });
  });
})();
</script>
{% endif %}
{% endblock %}