{% load static %}
{% comment %}
Select2 auto-init. Initialises any <select data-s2> on the page.
- Multi-select widgets (with `multiple` attr) get the multi treatment.
- Single-select widgets get the searchable single treatment.
- `data-s2-placeholder="..."` overrides the default placeholder.
- Idempotent: safe to include on multiple templates / partials.

Note on the marker name: we use `data-s2` (not `data-select2`) because Select2
internally uses `$(el).data('select2')` to track instances. An empty HTML
`data-select2` attribute confuses Select2's destroy-then-init code path.
{% endcomment %}
<link href="{% static 'css/vendor/select2.min.css' %}" rel="stylesheet">
<style>
  /* SINGLE */
  .select2-container--default .select2-selection--single {
    height: 38px;
    border-radius: 0.5rem;
    border-color: #ddd0bc;
    background: #fff;
  }
  .select2-container--default.select2-container--focus .select2-selection--single,
  .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #c49a3c;
    outline: 1px solid rgba(196, 154, 60, 0.35);
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    padding-left: 12px;
    padding-right: 28px;
    font-size: 0.875rem;
    color: #2c1f06;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
  }

  /* MULTI */
  .select2-container--default .select2-selection--multiple {
    min-height: 42px;
    border-radius: 0.5rem;
    border-color: #ddd0bc;
    background: #fff;
    padding: 3px 6px;
    box-shadow: 0 1px 2px rgba(66, 48, 12, 0.06);
  }
  .select2-container--default.select2-container--focus .select2-selection--multiple,
  .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #c49a3c;
    outline: 1px solid rgba(196, 154, 60, 0.35);
  }
  .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 4px 6px;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
  }
  /* Chip — reset vendor's absolute-positioned × button, lay out as flex pill. */
  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    position: static !important;
    float: none !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow: visible !important;
    text-overflow: clip !important;
    margin: 0 !important;
    border: 1px solid #ddd0bc !important;
    background: #f5efe4 !important;
    color: #1c1610 !important;
    border-radius: 9999px !important;
    padding: 5px 6px 5px 12px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    transition: background-color 120ms ease, border-color 120ms ease;
  }
  .select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
    background: #efe5d3 !important;
    border-color: #c8b692 !important;
  }
  .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    order: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: default !important;
  }
  /* Reset vendor's `position: absolute; left: 0; top: 0` and put the × at the
     end of the flex row with breathing room. */
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    float: none !important;
    order: 2 !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #72675c !important;
    font-size: 14px !important;
    line-height: 1 !important;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
    border-radius: 9999px !important;
    flex-shrink: 0 !important;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
  }
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove > span {
    display: inline-block !important;
    line-height: 1 !important;
    transform: none !important;
  }
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    color: #1c1610 !important;
    background: rgba(28, 22, 16, 0.08) !important;
    outline: none;
  }
  .select2-container--default .select2-selection--multiple .select2-search--inline {
    float: none;
    width: auto;
    min-width: 1.5em;
    flex: 0 1 auto;
    margin: 0;
    padding: 0;
  }
  .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: auto !important;
    min-width: 2em !important;
    max-width: min(100%, 40em);
    margin-top: 0 !important;
    margin-left: 0 !important;
    padding: 4px 0;
    font-size: 0.875rem;
    color: #1c1610;
    line-height: 1.4;
  }

  /* SHARED */
  .select2-container { width: 100% !important; max-width: 100%; }
  /* The dropdown is appended to <body> (dropdownParent), so it is a root-level
     sibling of the sticky top chrome. Vendor CSS gives it z-index:1051, which
     paints it OVER the sticky nav (z-40) and breadcrumb bar (z-30) when the
     field scrolls under them. Normalise it below the sticky chrome (but above
     page content) so an open dropdown tucks neatly under the nav instead. */
  .select2-container--open { z-index: 20; }
  .select2-dropdown {
    z-index: 20;
    border-color: #ddd0bc;
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(28, 22, 16, 0.08);
  }
  .select2-container--default .select2-results__option {
    padding: 8px 12px;
    font-size: 0.875rem;
    color: #1c1610;
    line-height: 1.35;
  }
  .select2-container--default .select2-results__option--highlighted[aria-selected],
  .select2-container--default .select2-results__option--highlighted {
    background: #c49a3c;
    color: #fff;
  }
  .select2-container--default .select2-results__option[aria-selected="true"] {
    background: #f5efe4;
    color: #1c1610;
  }
  .select2-search--dropdown .select2-search__field {
    border-radius: 0.375rem;
    border-color: #ddd0bc;
    font-size: 0.875rem;
    padding: 6px 10px;
  }
  .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: none;
    border-color: #c49a3c;
    box-shadow: 0 0 0 2px rgba(196, 154, 60, 0.18);
  }
  /* Select2 itself hides the original <select> after init; we don't pre-hide
     it so that if JS fails the form remains usable as a native control. */
</style>

<script src="{% static 'js/vendor/jquery.min.js' %}"></script>
<script src="{% static 'js/vendor/select2.min.js' %}"></script>
<script>
(function () {
  function warn(msg) { try { (window.console && console.warn) && console.warn("[select2-auto]", msg); } catch (e) {} }
  function info(msg) { try { (window.console && console.log) && console.log("[select2-auto]", msg); } catch (e) {} }

  function initOne($, el) {
    var $el = $(el);
    // Marker on the JS side (not the HTML attr) so Select2's own data store
    // remains untouched; this is what lets us safely re-run initAll().
    if (el.__s2_inited__) return;
    var isMulti = el.multiple === true;
    var defaultPh = isMulti ? "Pick one or more..." : "Search...";
    var placeholder = el.getAttribute("data-s2-placeholder") || defaultPh;
    var hasBlankOption = $el.find('option[value=""]').length > 0;
    try {
      $el.select2({
        placeholder: placeholder,
        allowClear: !isMulti && hasBlankOption,
        width: "100%",
        minimumResultsForSearch: 0,
        closeOnSelect: !isMulti,
        dropdownParent: $(document.body),
      });
      el.__s2_inited__ = true;
    } catch (e) {
      warn("init failed for " + (el.name || el.id || "<select>") + ": " + (e && e.message));
    }
  }

  function initAll(root) {
    if (!window.jQuery) { warn("jQuery missing — Select2 will not initialise."); return; }
    var $ = window.jQuery;
    if (!$.fn || !$.fn.select2) { warn("Select2 plugin missing — vendor script may have failed to load."); return; }
    var nodes = (root || document).querySelectorAll("select[data-s2]");
    info("initAll found " + nodes.length + " select(s) with data-s2");
    nodes.forEach(function (el) { initOne($, el); });
  }

  // Single registration of lifecycle listeners — not nested inside run() so
  // they don't compound on each tick.
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", function () { initAll(document); });
  } else {
    initAll(document);
  }
  if (document.body) {
    document.body.addEventListener("htmx:afterSwap", function (evt) {
      initAll(evt.target || document);
    });
  }
})();
</script>