{% load form_helpers %}
{% load get_key from helpers %}
{% load render_table from django_tables2 %}

<div id="lease-search" hx-target="#lease-search" hx-swap="outerHTML" hx-push-url="true">
  <div class="row px-3">
    <div class="col col-6 offset-3 py-3">
      <form
        class="form form-horizontal"
        hx-get="."
        hx-indicator="#search-indicator"
        hx-disabled-elt="#lease-search-btn"
        {% if form.is_bound and is_embedded and form.is_valid %}hx-trigger="load"{% endif %}
      >
        {% if form.cleaned_data.page %}
          {# Only include on full page load so that the user lands on the correct page. #}
          <input type="hidden" id="id_page" name="page" value="{{ form.cleaned_data.page }}">
        {% endif %}
        {% for e in form.errors.page %}
          <div class="alert alert-danger" role="alert">{{ e }}</div>
        {% endfor %}
        {% render_form form %}
        {% if form.subnet_choices %}
        {% comment %}
          Editable comboboxes for the Search field: offered only when the
          selected attribute is Subnet (CIDR) or Subnet ID. Free typing stays
          allowed — a <datalist> only suggests, it never constrains.
        {% endcomment %}
        <datalist id="kea-lease-subnet-cidrs">
          {% for cidr, sid in form.subnet_choices %}
          <option value="{{ cidr }}">{% if sid is not None %}id {{ sid }}{% endif %}</option>
          {% endfor %}
        </datalist>
        <datalist id="kea-lease-subnet-ids">
          {% for cidr, sid in form.subnet_choices %}
          {% if sid is not None %}<option value="{{ sid }}">{{ cidr }}</option>{% endif %}
          {% endfor %}
        </datalist>
        <script>
        (function () {
          var by = document.getElementById("id_by");
          var q = document.getElementById("id_q");
          if (!by || !q) { return; }
          function syncSubnetCombobox() {
            if (by.value === "subnet") {
              q.setAttribute("list", "kea-lease-subnet-cidrs");
              q.setAttribute("placeholder", "Select or type a subnet (CIDR)");
            } else if (by.value === "subnet_id") {
              q.setAttribute("list", "kea-lease-subnet-ids");
              q.setAttribute("placeholder", "Select or type a subnet ID");
            } else {
              q.removeAttribute("list");
              q.removeAttribute("placeholder");
            }
          }
          by.addEventListener("change", syncSubnetCombobox);
          syncSubnetCombobox();
        })();
        </script>
        {% endif %}
        <div class="text-end">
          <div id="search-indicator" class="spinner-border d-inline-block align-middle htmx-indicator me-2" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
          <button id="lease-search-btn" type="submit" class="btn btn-primary">
            <span class="mdi mdi-magnify" aria-hidden="true"></span> Search
          </button>
        </div>
      </form>
    </div>
  </div>

  {% if not is_embedded and form.is_valid %}
    {% include "inc/table_controls_htmx.html" with table_modal="LeasesTable_config" %}
    {% with preferences|get_key:"pagination.placement" as paginator_placement %}
      <form method="post" action="{{ delete_action }}" id="lease-delete-form">
        {% csrf_token %}
        <input type="hidden" name="return_url" value="{{ return_url }}">{# stripped URL fed into BaseLeaseDeleteForm and flows to confirmation #}
        <div class="card table-responsive">
          {% if paginator_placement == 'top' or paginator_placement == 'both' %}
            {% include "netbox_kea/inc/server_dhcp_leases_paginator.html" with table=table paginate=paginate placement="top" %}
          {% endif %}
          {% render_table table "inc/table_htmx.html" %}
          {% if paginator_placement != "top" %}
            {% include "netbox_kea/inc/server_dhcp_leases_paginator.html" with table=table paginate=paginate placement="bottom" %}
          {% endif %}
        </div>
        <div class="d-print-none d-flex justify-content-between mt-2">
          <div>
            {% if can_delete %}
              <button type="submit" class="btn btn-sm btn-danger"><i class="mdi mdi-trash-can-outline" aria-hidden="true"></i> Delete Selected</button>
            {% endif %}
          </div>

          <div class="dropdown">
            <button type="button" class="btn btn-purple dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="mdi mdi-download"></i> Export
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
              <li><a class="dropdown-item" href="{% querystring export="table" %}">Current View</a></li>
              <li><a class="dropdown-item" href="{% querystring export="" %}">All Data (CSV)</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="?export_all=1">Export All Leases (CSV)</a></li>
            </ul>
          </div>
        </div>
      </form>
    {% endwith %}
  {% endif %}
</div>