{% comment %}

Species selection

Features:
- Allows user to search species by nomenclature and metadata (including taxonomic ranks)
- Atlas selection dropdown is initially invisible to prevent Flash of Unstyled Content (FOUC)
- Upon species selection, the user is redirected to that species page
- Navigation tabs redirect to different views for the selected species
- When no species is selected, mockup is shown and navigation tabs are disabled

Input:
- species_dict: dictionary of arrays of species grouped by their phylum
- species: selected species
- placeholder: text in search box (default: "Search species by nomenclature,
  taxonomic rank, division, ...")
- redirect: one of 'query', 'arg', 'atlas' or 'none' (default); if 'query',
  redirect to URL using a query parameter (e.g., '?species=Mus_musculus');
  if 'arg', redirect using species as an argument; if 'atlas', redirect to
  selected species in the Cell Atlas
- class: additional class for select element
- optgroup_columns: if 'true', enable the optgroup_columns plugin
- maxwidth: maximum width of the element

{% endcomment %}

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

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

<!-- Species select options -->
<script type="module">
    {% load static %}
    import { initSpeciesSelect }
        from "{% static 'app/dist/select/species.js' %}";
    document.addEventListener('DOMContentLoaded', function() {
        let id = "{{id}}",
            species = "{{species.slug}}",
            redirect = "{{redirect}}",
            optgroup_columns = "{{optgroup_columns}}" === "true",
            view = "{{view}}",
            extraParams = "{{extraParams}}";
        initSpeciesSelect(id, species, redirect, optgroup_columns, view, extraParams);
    });
</script>