{% comment %}

Dataset selection element for Cell Atlas and related components.

Features:
- Search and select datasets by species or metadata (e.g., taxonomic rank)
- Hide dropdown until styled to prevent FOUC
- Redirect to selected dataset page
- Disable navigation tabs when no dataset is selected
- Show mockup when no dataset is active

Input:
- id (string)              : prefix for all element selectors
- dataset_dict (dict)      : datasets grouped by species phylum
- dataset (string|object)  : selected dataset
- placeholder (string)     : search box placeholder text
- redirect (string)        : "arg" (default), "query", or "none"
    - "arg"   : redirect using dataset as an argument
    - "query" : redirect using a query parameter (e.g., '?dataset=mus-musculus')
- class (string)           : extra classes for <select>
- optgroup_columns (bool)  : enable optgroup_columns plugin if "true"
- maxwidth (int)           : max width in pixels
- small (bool)             : use smaller font size if "true"

{% endcomment %}

<!-- Hide select and add margin to avoid Flash Of Unstyled Content (FOUC) -->
<style>
    #dataset-select-{{ id }} {
        margin-bottom: 18px !important;
        visibility: hidden;
        max-width: 200px;
        {% if width %} width: {{ width }} !important; {% endif %}
    }

    .w-20px {
        width: 20px;
    }
</style>

<select id="dataset-select-{{ id }}"
        class="mb-2 {{ class }} {% if small == 'true' %}small{% endif %}"
        placeholder="{{ placeholder|default:'Search datasets by species, taxonomic rank, division, ...' }}">
    <option value=""></option>
    {% for phylum, dataset_list in dataset_dict.items %}
        <optgroup label="{{ phylum }}">
            {% for elem in dataset_list %}
                <option value="{{ elem.dataset.slug }}"
                        data-meta="{{ elem.meta|join:',' }}"
                        data-image="{{ elem.dataset.image_url|default:elem.dataset.species.image_url }}"
                        data-species="{{ elem.dataset.species }}"
                        data-dataset="{{ elem.dataset.name|default:'' }}"
                        data-label="{{ elem.dataset.get_html }}"
                        data-name="{{ elem.dataset.species.common_name|default_if_none:'' }}"
                        {% if dataset == elem.dataset or dataset == elem.dataset.slug %}selected{% endif %}>
                    {{ elem.dataset }}
                </option>
            {% endfor %}
        </optgroup>
    {% endfor %}
</select>

<!-- Species select options -->
<script type="module">
    {% load static %}
    import { initDatasetSelect } from "{% static 'app/dist/select/dataset.js' %}";
    let id = "{{id}}",
        dataset = "{{dataset.slug}}",
        query = "{{query.dataset}}",
        redirect = "{{redirect}}",
        optgroup_columns = "{{optgroup_columns}}" === "true",
        view = "{{view}}",
        anchor = "{{anchor}}";
    initDatasetSelect(id, dataset, query, redirect, optgroup_columns, view, anchor);
</script>