{% extends "base.html" %}

{% comment %}

Downloads page

{% endcomment %}

{% block title %}
    Downloads
{% endblock title %}

{% block structured_data %}
    {% load bioschemas %}
    {% bioschemas_download_catalog species=species_all datasets=datasets_all name="Biodiversity Cell Atlas data download" description="Downloadable species and dataset files from the Biodiversity Cell Atlas, plus the REST API serving the same data as CSV, TSV and JSON." %}
{% endblock structured_data %}

{% block subnav %}
    <div class="container-xxl">
        <h1 class="h3">Data download</h1>
    </div>

    <div class="subnavbar sticky-top py-1">
        <div class="container-xxl">
            <ul class="nav nav-pills small d-md-none">
                <li class="nav-item">
                    <a class="nav-link p-2 small"
                       data-bs-toggle="offcanvas"
                       href="#offcanvas"
                       role="button">
                        <i class="fa fa-ellipsis-vertical fa-fw"></i>
                        Data download
                    </a>
                </li>
            </ul>

            <div class="offcanvas-md offcanvas-start"
                 tabindex="-1"
                 id="offcanvas"
                 aria-labelledby="bdSidebarOffcanvasLabel">
                <div class="offcanvas-header border-bottom">
                    <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Data download</h5>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="offcanvas"
                            aria-label="Close"
                            data-bs-target="#offcanvas"></button>
                </div>

                <div class="offcanvas-body">
                    <ul id="scrollspy-nav"
                        class="nav nav-pills small flex-column flex-md-row">
                        <li class="nav-item">
                            <a class="nav-link p-2" href="#species">
                                <i class="fa fa-kiwi-bird"></i>
                                Species data
                            </a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link p-2" href="#dataset">
                                <i class="fa fa-flask"></i>
                                Dataset data
                            </a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link p-2" href="{% url 'api' %}">
                                <i class="fa fa-code"></i>
                                REST API
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <hr />
{% endblock subnav %}

{% block content %}
    {% load cards %}
    {% load download_links %}
    {% load file_tags %}
    {% load string_extras %}
    {% load static %}

    <div data-bs-spy="scroll"
         data-bs-target="#scrollspy-nav"
         data-bs-root-margin="0px 0px -78%"
         tabindex="0">

        <!-- Species downloads -->
        <div id="species">
            {% load headings %}
            {% h2 "Species data" id='species' data_dropdown=False %}

            <div class="row row-cols-2 row-cols-md-auto g-4 mt-0 mb-4">
                <div class="col">
                    {% download_card view='rest:species-list' filename='BCA - species info' title='Species information' description='Details on all species in the BCA database.' img_url="https://images.unsplash.com/photo-1514907283155-ea5f4094c70c" img_author='Shaun Low' img_author_handle='@breadboyshaun' img_width='18rem' %}
                </div>
            </div>

            <table id="species_table" class="display nowrap w-100">
                <thead>
                    <tr>
                        <th>Species</th>
                        <th>Proteome</th>
                        <th>DIAMOND database</th>
                    </tr>
                </thead>
                <tbody>
                    {% with file_types="Proteome,DIAMOND" %}
                        {% for species in species_all %}
                            <tr>
                                <td>{{ species.get_named_html_link }}</td>
                                {% for file_type in file_types|split:"," %}
                                    {% with file=species.files.all|get_file_type:file_type %}
                                        <td>
                                            {% if file %}
                                                <a href="{% url 'download_file' file.slug %}">{{ file.ext.upper }}</a>
                                            {% else %}
                                                –
                                            {% endif %}
                                        </td>
                                    {% endwith %}
                                {% endfor %}
                            </tr>
                        {% endfor %}
                    {% endwith %}
                </tbody>
            </table>
        </div>

        <hr />

        <!-- Dataset downloads -->
        <div id="dataset">
            {% h2 "Dataset data" id='dataset' data_dropdown=False %}

            <div class="row row-cols-2 row-cols-md-auto g-4 mt-0 mb-4">
                <div class="col">
                    {% download_card view='rest:dataset-list' filename='BCA - dataset info' title='Dataset information' description='Details on all datasets in the BCA database.' img_url="https://images.unsplash.com/photo-1708649290066-5f617003b93f" img_author='NEOM' img_author_handle='@neom' img_width='18rem' %}
                </div>
                <div class="col">
                    {% download_card view='rest:stats-list' filename='BCA - metacell stats' title='Metacell statistics' description='Cells and UMI counts per metacell.' img_url="https://images.unsplash.com/photo-1508138119323-5452bd81d53d" img_author='Mathieu Turle' img_author_handle='@nbmat' img_width='18rem' %}
                </div>
            </div>

            <table id="dataset_table" class="display nowrap w-100">
                <thead>
                    <tr>
                        <th>Dataset name</th>
                        <th>Single cell data</th>
                        <th>Metacell data</th>
                        <th>Metacell counts</th>
                    </tr>
                </thead>
                <tbody>
                    {% for dataset in datasets_all %}
                        <tr>
                            <td>{{ dataset.get_named_html_link }}</td>
                            <td>{% download_dataset_data view='rest:singlecell-list' slug=dataset.slug suffix='single cells' %}</td>
                            <td>{% download_dataset_data view='rest:metacell-list' slug=dataset.slug suffix='metacells' %}</td>
                            <td>{% download_dataset_data view='rest:metacellcount-list' slug=dataset.slug suffix='metacell counts' %}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <script type="module">
            import { renderTables } from "{% static 'app/dist/downloads.js' %}";
            renderTables("#species_table, #dataset_table");
        </script>

    </div>
{% endblock content %}