{% extends "./atlas.html" %}

{% comment %}

Gene expression and orthologs comparison page for a gene from a given species

Features:
- Gene selection via select element or using URL path parameters, such as
  `/atlas/Homo_sapiens/gene/BRCA1`
- Mockup plot if no gene is selected
- Expression data for selected gene and orthologs:
    - Fetches via REST API
    - Plots for data
    - Download data button
    - Copy link to clipboard button

Input:
- species: Species object from `models.py`

{% endcomment %}

{% block title %}
    {{ dataset }} {{ gene|default:'Gene' }}
{% endblock title %}

{% block structured_data %}
    {% comment %}
    The canonical Gene entity page is `entry/gene/...`, so the emitted node
    points its `url` there and records this page as `mainEntityOfPage`.
    {% endcomment %}
    {% load bioschemas %}
    {% bioschemas_gene gene %}
{% endblock structured_data %}

{% block content %}
    <style>
        .gene-info .key {
            font-weight: 500;
            width: 150px;
        }
    </style>

    {% include "../components/modals/list_editor.html" with id="selection" type="gene_lists" %}

    <div class="d-flex flex-wrap justify-content-between align-items-center small">
        <label class="col-form-label">
            <i class="fa fa-dna"></i>
            Gene selection
        </label>
        <div class="d-flex column-gap-3 flex-wrap justify-content-end ms-auto">
            <button type="button"
                    class="btn btn-link btn-sm"
                    data-bs-toggle="modal"
                    data-bs-target="#selection_gene_lists_editor">
                Select from gene lists...
            </button>
            <button type="button"
                    class="btn btn-link btn-sm"
                    data-bs-toggle="modal"
                    data-bs-target="#selection_alignment">
                Select from sequence search...
            </button>
        </div>
    </div>

    {% include "../components/select/gene.html" with gene=gene placeholder="Search gene by symbol, description or domains..." display="all" redirect="arg" %}

    {% include "../components/warning_alert.html" %}

    {% if gene %}
        {% load headings %}
        {% h1 gene.get_html_link id="gene" %}

        <div class="row row-cols-1 row-cols-md-2">
            <div class="col">
                <p class="text-muted">
                    <b>Description:</b>
                    {{ gene.description|default:"No description available" }}
                </p>
            </div>

            <div class="col">
                <table class="table table-sm table-striped gene-info">
                    <tbody>
                        <tr>
                            <td class="key">Pfam domains</td>
                            <td>{{ gene.get_domain_html_links|default:'—' }}</td>
                        </tr>

                        <tr>
                            <td class="key">Gene lists</td>
                            <td>{{ gene.get_genelist_html_links|default:'—' }}</td>
                        </tr>

                        <tr>
                            <td class="key">Gene modules</td>
                            <td>
                                {% for member in gene.modules.all %}
                                    {% if member.module.dataset == dataset %}
                                        {{ member.module.get_html_link }}:
                                        <span title="Membership score">{{ member.membership_score }}</span>
                                        <br>
                                    {% endif %}
                                {% empty %}
                                    —
                                {% endfor %}
                            </td>
                        </tr>

                        <tr>
                            <td class="key">Orthogroups</td>
                            <td>{{ gene.get_orthogroup_html_links|default:"—" }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        {% h1 "Metacell projection" id="projection" %}
        {% include "../components/plots/metacell_projection.html" with id="projection" %}

        {% h1 "Gene expression" id="expression" %}
        {% include "../components/plots/expression_plot.html" with species=species gene=gene %}

        {% h1 "Correlated genes" id="correlation" %}
        {% include "../components/tables/gene_correlation.html" with id="correlation" dataset=dataset species=species gene=gene gene2="" %}

        {% h1 "Orthologs" id="orthologs" %}
        {% include "../components/tables/expression_conservation.html" with id="orthologs" dataset=dataset species=species gene=gene %}

    {% else %}
        {% include "../components/mockup/barplot.html" %}
    {% endif %}

{% endblock content %}