{% comment %}

Metacell selection dropdown

Features:
- Multiple selection of metacells by either cell type or specific metacell
- Metacell values can be converted to ranges (e.g., 1,2,3,5,6 to 1-3,5-6)
- On form submission, metacell selection is transformed into comma-separated
  string for URL query params and the page is reloaded with such params

Input:
- name: form field name (default: 'metacells')
- metacell_dict: dictionary of metacells
- selected: selected metacells
- selected2: selected metacells (backup for )
- placeholder: placeholder text

{% endcomment %}

<!-- Hide select and add margin to avoid Flash Of Unstyled Content (FOUC) -->
<style>
    #metacells {
        visibility: hidden;
        margin: 10px;
    }
</style>

<select required
        name="{{ name|default:'metacells' }}"
        value=""
        id="metacells"
        multiple
        placeholder="{{ placeholder|default:'Select metacells...' }}">
    <option value=""></option>
    {% for key, value in metacell_dict.items %}
        <optgroup label="{{ key }}">
            {% if key == "Cell types" %}
                {% for type, mc in value.items %}
                    <option value="{{ type.name|default:'Unannotated' }}"
                            data-type="cell_types"
                            data-metacells="{{ mc|join:',' }}"
                            data-color="{{ type.color|default:'#AAAAAA' }}">
                        {{ type.name|default:'Unannotated' }}
                    </option>
                {% endfor %}
            {% elif key == "Metacells" %}
                {% for mc in value %}
                    <option value="{{ mc.name }}"
                            data-type="metacells"
                            data-color="{{ mc.type.color }}"
                            data-celltype="{{ mc.type }}">
                        {{ mc.name }}
                    </option>
                {% endfor %}
            {% endif %}
        </optgroup>
    {% endfor %}
</select>

<!-- Metacell select options -->
<script type="module">
    {% load static %}
    import { initMetacellSelect } from "{% static 'app/dist/select/metacell.js' %}";
    initMetacellSelect("{{selected}}", "{{selected2}}");
</script>