{% comment %}

Gene selection dropdown

Features:
- Allows user to search genes by name, description and domains
- Upon gene selection, the user is redirected to that gene page

Input:
- id: prefix used to identify elements
- name: form field name (default: 'gene')
- class: select element class (default: 'mb-3')
- gene: default gene to select with properties 'name', 'description' and
  'domains' (default: none, i.e., no gene is selected)
- selected: selected genes (only use instead of gene if multiple = 'true')
- multiple: allow to select multiple genes (default: 'false'); when enabled,
  also shows available gene lists
- placeholder: text in search box (default: "Search gene by symbol,
  description or domains...")
- disabled: start the element as disabled
- width: element width (default: '100%')
- display: if 'name' (default), show only gene name for selected gene; if 'all',
  show gene name, description and domains
- redirect: one of 'query', 'arg' or 'none' (default); if 'query', redirect to
  URL using a query parameter (e.g., '?gene=BRCA1'); if 'arg', redirect using
  gene as an argument
- hash: hash to add to URL (default: none)
- limit: maximum number of genes to fetch from API (default: 50 genes or 3 if multiple)

{% endcomment %}

<!-- Hide select and add margin to avoid Flash Of Unstyled Content (FOUC) -->
<style>
    #{{ id }}_gene_selection {
        width: {{ width|default:'100%' }};
        visibility: hidden;
        margin-top: 12px;
    }
</style>

<select id="{{ id }}_gene_selection"
        class="{{ class|default:'mb-3' }}"
        name="{{ name|default:'gene' }}"
        placeholder="{% if placeholder %}{{ placeholder }}{% elif multiple == 'true' %}Search gene lists, modules, domains...{% else %}Search gene...{% endif %}"
        {% if multiple == 'true' %}multiple{% endif %}
        {% if disabled == 'true' %}disabled{% endif %}>
    <option value=""></option>
</select>

<!-- Species select options -->
<script type="module">
    {% load static %}
    import { initGeneSelect } from "{% static 'app/dist/select/gene.js' %}";


    let geneName = "{{ gene.name }}";

    let id = "{{ id }}",
        hash = "{{ hash }}",
        redirect = "{{ redirect }}",
        species = "{{ species }}",
        dataset = "{{ dataset.slug }}",
        gene = {
            name: geneName !== "" ? geneName : null,
            description: "{{ gene.description|default:'' }}",
            domains: [
                {% for domain in gene.domains.all %}
                    "{{ domain }}"
                    {% if not forloop.last %}, {% endif %}
                {% endfor %}
            ]
        },
        selected = "{{ selected }}",
        limit = {% if limit %}{{ limit }}{% elif multiple == "true" %}3{% else %}50{% endif %},
        multiple = "{{ multiple }}",
        display = "{{ display|default:'name' }}" === "all";

    document.addEventListener("DOMContentLoaded", function() {
        initGeneSelect(
            id, hash, redirect, species, dataset, gene, selected, limit, multiple, display
        );
    });
</script>