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

{% comment %}

Species info page

Features:
- Species description and image
- Table metadata (including taxonomic information)
- Download button for species info and metadata
- Copy link to clipboard button

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

{% endcomment %}

{% block title %}
    {{ dataset }}
{% endblock title %}

{% block structured_data %}
    {% load bioschemas %}
    {% bioschemas_dataset dataset %}
{% endblock structured_data %}

{% block content %}

    <style>
        .key {
            font-weight: 500;
        }

        table {
            hyphens: auto;
            word-break: break-word;
        }
    </style>

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

    <div class="row">
        <div class="col-md-4">

            <!-- Show image and credits -->
            <p>{% include "../components/dataset_image.html" %}</p>

            <h2 class="h5 mt-4">Dataset information</h2>

            <table class="table table-sm table-striped mx-auto">
                <tbody>
                    <tr>
                        <td>
                            <span class="key">Source</span>
                        </td>
                        <td class="text-end">
                            {{ dataset.publication.get_source_html_link|default:'<span class="text-secondary small fst-italic">Not available</span>' }}
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="key">Processed</span>
                        </td>
                        <td class="text-end">{{ dataset.date_created|date:"j F Y" }}</td>
                    </tr>
                    <tr>
                        <td>
                            <span class="key">Last update</span>
                        </td>
                        <td class="text-end">{{ dataset.date_updated|date:"j F Y" }}</td>
                    </tr>
                </tbody>
            </table>

            <h2 class="h5 mt-4">Metadata</h2>

            <table class="table table-sm table-striped mx-auto">
                <tbody>
                    {% for meta in species.meta_set.all %}
                        {% if meta.key != "species" %}
                            <tr>
                                <td>
                                    <span class="key">
                                        {% if meta.key == "taxon_id" %}
                                            NCBI Taxonomy
                                        {% else %}
                                            {{ meta.key | capfirst }}
                                        {% endif %}
                                    </span>
                                </td>
                                <td class="text-end">
                                    {% if meta.query_url %}
                                        <a target="_blank" href="{{ meta.query_url }}">{{ meta.value }}</a>
                                    {% else %}
                                        {{ meta.value }}
                                    {% endif %}
                                </td>
                            </tr>
                        {% endif %}
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="col-md-8 mt-4 mt-sm-0">
            {% load headings %}
            {% h1 dataset.get_html id="info" %}

            <p>{{ species.description|default:'No description available.'|safe }}</p>

            <div class="row text-center mt-5">
                <div class="col-6 col-lg-3">
                    <p id="n_cells" class="h3 mb-0">0</p>
                    <p>cells</p>
                </div>

                <div class="col-6 col-lg-3">
                    <p id="n_metacells" class="h3 mb-0">0</p>
                    <a data-bs-toggle="tooltip"
                       data-bs-placement="bottom"
                       data-bs-title="Groups of cells with highly similar gene expression">
                        metacells <i class="fa fa-question-circle fa-sm"></i>
                    </a>
                </div>

                <div class="col-6 col-lg-3">
                    <p id="n_umis" class="h3 mb-0">0</p>
                    <a data-bs-toggle="tooltip"
                       data-bs-placement="bottom"
                       data-bs-title="Total number of Unique Molecular Identifiers (UMIs)">
                        UMIs <i class="fa fa-question-circle fa-sm"></i>
                    </a>
                </div>

                <div class="col-6 col-lg-3">
                    <p id="n_genes" class="h3 mb-0">0</p>
                    <p>genes</p>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-6">{% include "../components/plot_container.html" with id="metacell-cells" height="270px" %}</div>

                <div class="col-md-6">{% include "../components/plot_container.html" with id="metacell-umis" height="270px" %}</div>
            </div>

            {% load headings %}
            {% h2 "Quality control metrics" id="qc" %}

            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 small">
                {% load cards %}
                {% for item in qc_metrics %}
                    {% qc_card title=item.title description=item.description img_url=item.img_url img_author=item.img_author img_author_handle=item.img_author_handle metrics=item.values %}
                {% endfor %}
            </div>
        </div>
    </div>
    <script type="module">
        import { loadDatasetStats, renderStatsPlots } from "{% static 'app/dist/atlas/stats.js' %}";
        loadDatasetStats("{{dataset.slug}}");
        renderStatsPlots("{{dataset.slug}}");
    </script>

{% endblock content %}