{#
  Macro: category_select(selected_cat, selected_sub, apple_categories)
  Renders a linked Category + Subcategory pair of <select> elements.
  apple_categories is the APPLE_CATEGORIES dict: {cat: set(subs)}.
  JS updates the subcategory options whenever the category changes.
#}
{% macro category_select(selected_cat, selected_sub, apple_categories) %}
<label>Category</label>
<select name="category" id="cat-select" onchange="updateSubcats()" required>
  {% for cat in apple_categories|sort %}
    <option value="{{ cat }}" {% if cat == selected_cat %}selected{% endif %}>{{ cat }}</option>
  {% endfor %}
</select>

<label>Subcategory</label>
<select name="subcategory" id="subcat-select">
  <option value="">(none)</option>
  {% set subs = apple_categories.get(selected_cat, []) %}
  {% for sub in subs|sort %}
    <option value="{{ sub }}" {% if sub == selected_sub %}selected{% endif %}>{{ sub }}</option>
  {% endfor %}
</select>

<script>
  (function () {
    // Build the full map on the client so changing category repopulates subs.
    const CATS = {{ apple_categories | tojson }};
    // Convert the Python sets (serialised as arrays) to sorted arrays.
    const CAT_SUBS = {};
    for (const [cat, subs] of Object.entries(CATS)) {
      CAT_SUBS[cat] = Array.isArray(subs)
        ? [...subs].sort()
        : Object.keys(subs).sort();
    }

    window.updateSubcats = function () {
      const cat = document.getElementById('cat-select').value;
      const subSel = document.getElementById('subcat-select');
      const prev = subSel.value;
      subSel.innerHTML = '<option value="">(none)</option>';
      for (const sub of (CAT_SUBS[cat] || [])) {
        const o = document.createElement('option');
        o.value = sub;
        o.textContent = sub;
        if (sub === prev) o.selected = true;
        subSel.appendChild(o);
      }
    };
  })();
</script>
{% endmacro %}