{% comment %}
Reusable "Add Device Type Mapping" form for the import validation modal.

Required context:
  - libre_device (dict-like with device_id, hardware)
Optional context:
  - preselect_device_type: a DeviceType instance to pre-fill the typeahead
    (used in the existing-device + mismatch branch so a single click maps
    `libre_device.hardware` → `existing_device.device_type`).
  - submit_label (defaults to "Add Mapping")
{% endcomment %}
<form hx-post="{% url 'plugins:netbox_librenms_plugin:add_device_type_mapping' device_id=libre_device.device_id %}"
      hx-swap="none"
      hx-include="[name=role_{{ libre_device.device_id }}], [name=rack_{{ libre_device.device_id }}], [name=cluster_{{ libre_device.device_id }}], #use-sysname-toggle, #strip-domain-toggle"
      class="mt-1"
      id="dt-mapping-form-{{ libre_device.device_id }}">
  {% csrf_token %}
  <div class="position-relative">
    <label for="dt-search-{{ libre_device.device_id }}" class="visually-hidden">
      Search device types
    </label>
    <input type="text"
           class="form-control form-control-sm"
           id="dt-search-{{ libre_device.device_id }}"
           placeholder="Search device types…"
           autocomplete="off"
           {% if preselect_device_type %}value="{% if preselect_device_type.manufacturer %}{{ preselect_device_type.manufacturer.name }} — {% endif %}{{ preselect_device_type.display }}"{% endif %}>
    <input type="hidden"
           name="device_type_id"
           id="dt-id-{{ libre_device.device_id }}"
           value="{% if preselect_device_type %}{{ preselect_device_type.pk }}{% endif %}">
    <div id="dt-dropdown-{{ libre_device.device_id }}"
         class="dropdown-menu w-100 shadow"
         style="z-index:1050; max-height:200px; overflow-y:auto; display:none;"></div>
  </div>
  <button type="submit" class="btn btn-sm btn-primary mt-1 w-100">{{ submit_label|default:"Add Mapping" }}</button>
</form>
<script>
  (function () {
    var searchEl = document.getElementById("dt-search-{{ libre_device.device_id }}");
    var dropdownEl = document.getElementById("dt-dropdown-{{ libre_device.device_id }}");
    var hiddenEl = document.getElementById("dt-id-{{ libre_device.device_id }}");
    if (!searchEl) return;
    var timer = null;
    var requestSeq = 0;

    searchEl.addEventListener("input", function () {
      clearTimeout(timer);
      hiddenEl.value = "";
      var q = this.value.trim();
      if (q.length < 2) { dropdownEl.style.display = "none"; dropdownEl.innerHTML = ""; return; }
      timer = setTimeout(function () {
        var seq = ++requestSeq;
        fetch("{% url 'dcim-api:devicetype-list' %}?q=" + encodeURIComponent(q) + "&limit=20")
          .then(function (r) { return r.json(); })
          .then(function (data) {
            if (seq !== requestSeq) return;
            dropdownEl.innerHTML = "";
            if (!data.results || data.results.length === 0) {
              dropdownEl.innerHTML = '<a class="dropdown-item small py-1 text-muted disabled">No results</a>';
            } else {
              data.results.forEach(function (dt) {
                var a = document.createElement("a");
                a.className = "dropdown-item small py-1";
                a.href = "#";
                a.textContent = (dt.manufacturer ? dt.manufacturer.display + " — " : "") + dt.display;
                a.addEventListener("click", function (e) {
                  e.preventDefault();
                  searchEl.value = (dt.manufacturer ? dt.manufacturer.display + " — " : "") + dt.display;
                  hiddenEl.value = dt.id;
                  dropdownEl.style.display = "none";
                });
                dropdownEl.appendChild(a);
              });
            }
            dropdownEl.style.display = "block";
          })
          .catch(function () { dropdownEl.style.display = "none"; });
      }, 300);
    });

    // Outside-click hides the dropdown. The listener self-removes once the
    // form leaves the DOM (HTMX swap, modal teardown) so handlers don't
    // accumulate on document each time this template re-renders.
    function onDocClick(e) {
      if (!document.body.contains(searchEl)) {
        document.removeEventListener("click", onDocClick);
        return;
      }
      if (!searchEl.contains(e.target) && !dropdownEl.contains(e.target)) {
        dropdownEl.style.display = "none";
      }
    }
    document.addEventListener("click", onDocClick);
  })();
</script>