{% extends "generic/object.html" %}
{% load form_helpers %}
{% load kea_options %}

{% block content %}
{% kea_option_datalist dhcp_version %}
<div class="row">
  <div class="col col-md-6 offset-md-3">
    {% if lease_diff %}
    <div class="alert alert-warning d-flex align-items-start mb-3" role="alert">
      <i class="mdi mdi-information-outline me-2 mt-1" aria-hidden="true"></i>
      <div>
        <strong>Active lease differs from reservation</strong><br>
        {% if lease_diff.hostname %}
        The active lease has hostname: <code>{{ lease_diff.hostname }}</code>
        <button type="button" class="btn btn-sm btn-outline-secondary ms-2"
                onclick="document.getElementById('id_hostname').value = '{{ lease_diff.hostname|escapejs }}'">
          ← Use this value
        </button>
        {% endif %}
      </div>
    </div>
    {% endif %}
    <div class="card">
      <div class="card-header">
        <strong>{{ action }} DHCPv{{ dhcp_version }} Reservation</strong>
      </div>
      <div class="card-body">
        {# Both banners promise an IPAM record, which only holds for a reservation that #}
        {# actually reserves an address. Identifier-only and prefix-only hosts have none. #}
        {% if object.sync_enabled and object.sync_reservations_enabled %}
        <div class="alert alert-info d-flex align-items-start mb-3" role="alert">
          <i class="mdi mdi-sync me-2 mt-1" aria-hidden="true"></i>
          <div>
            <strong>Automatic IPAM sync is enabled for this server.</strong>
            A reservation with a fixed IP address will be synced to NetBox IPAM on the next
            scheduled sync run (not instantly). You can also use the checkbox below to sync
            immediately. Reservations that reserve no address are skipped — there is nothing
            to record in IPAM.
          </div>
        </div>
        {% else %}
        <div class="alert alert-secondary d-flex align-items-start mb-3" role="alert">
          <i class="mdi mdi-sync-off me-2 mt-1" aria-hidden="true"></i>
          <div>
            <strong>Automatic IPAM sync is disabled for this server.</strong>
            Use the checkbox below to sync this reservation to NetBox IPAM immediately.
            A reservation that reserves no address has nothing to sync.
          </div>
        </div>
        {% endif %}
        <form method="post" id="reservation-form">
          {% csrf_token %}
          {% render_form form %}
          {% if subnet_choices %}
          {# Suggests the server's configured subnets on the Subnet CIDR field. Free typing #}
          {# stays allowed: a datalist only suggests, it never constrains. #}
          <datalist id="{{ subnet_datalist_id }}">
            {% for cidr, sid in subnet_choices %}
            <option value="{{ cidr }}">{% if sid is not None %}id {{ sid }}{% endif %}</option>
            {% endfor %}
          </datalist>
          {% endif %}

          {# 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.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">
              <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 %}