{% extends "base.html" %}

{% comment %}

Homepage

Features:
- Quick description of the BCA project
- Tree of Life plot
- Sections with latest news, publications, meetings and tutorials

{% endcomment %}

{% block structured_data %}
    {% load bioschemas %}
    {% bioschemas_data_catalog %}
{% endblock structured_data %}

{% block content %}
    <style>
        #tree {
            width: 100%;
            min-height: 10px;
        }

        .fixed-width {
            width: 100px;
        }

        .bca-logo {
            margin: -40px;
            min-height: 200px;
            min-width: 300px;
        }

        .bca-lead {
            max-width: 400px;
            text-wrap: balance;
        }
    </style>

    {% load static %}
    {% load bca_website_links %}
    {% load string_extras %}

    <div class="px-2 text-center">
        <h1 class="d-none">Biodiversity Cell Atlas: Data Portal</h1>

        <img title="Biodiversity Cell Atlas"
             fetchpriority="high"
             width="500"
             height="100%"
             alt="Biodiversity Cell Atlas logotype"
             class="img-fluid bca-logo"
             src="{% static 'app/images/logos/BCA/BCALogotypeDesign_2024_Primary_Logo_Color.svg' %}">

        <h2 class="h5 fw-semibold text-body-emphasis">BCA Data Portal</h2>

        <p class="lead mb-3 mx-auto bca-lead">
            Explore and download single-cell datasets
            across the eukaryotic tree of life.
        </p>

        <div class="d-flex justify-content-center text-center gap-3">
            <div class="fixed-width">
                <p class="h3 mb-0">{{ counter.cells|human_number }}</p>
                <p>cells</p>
            </div>

            <a href="{% url 'species_entry' %}" class="fixed-width">
                <p class="h3 mb-0">{{ counter.species|human_number }}</p>
                <p>species</p>
            </a>

            <a href="{% url 'dataset_entry' %}" class="fixed-width">
                <p class="h3 mb-0">{{ counter.datasets|human_number }}</p>
                <p>datasets</p>
            </a>
        </div>
    </div>

    <div class="container-fluid d-flex justify-content-center align-items-center pt-4">
        {% include "app/components/select/dataset.html" with redirect="arg" class="w-100 atlas-select home" optgroup_columns="true" view="atlas_info" %}
    </div>

    <!-- Tree of Life -->
    <div id="tree_container"
         class="container d-flex align-items-center justify-content-center"
         aria-label="Tree of life.">
        <div id="tree"></div>
    </div>

    <div class="text-center mt-3">
        <div class="btn-group" role="group" aria-label="Tree layout">
            <input type="radio"
                   class="btn-check"
                   name="tree_layout"
                   id="tree_layout_linear"
                   autocomplete="off">
            <label class="btn btn-outline-primary btn-xs" for="tree_layout_linear">Linear</label>
            <input type="radio"
                   class="btn-check"
                   name="tree_layout"
                   id="tree_layout_radial"
                   autocomplete="off"
                   checked>
            <label class="btn btn-outline-primary btn-xs" for="tree_layout_radial">Radial</label>
            <input type="radio"
                   class="btn-check"
                   name="tree_layout"
                   id="tree_layout_unrooted"
                   autocomplete="off">
            <label class="btn btn-outline-primary btn-xs" for="tree_layout_unrooted">Unrooted</label>
        </div>
    </div>

    <script type="module">
        import { createTreeOfLife } from "{% static 'app/dist/tree_of_life.js' %}";
        createTreeOfLife("#tree", "{{ tree_of_life }}");
    </script>

    {% comment %}
        <svg xmlns="http://www.w3.org/2000/svg" class="position-absolute">
            <defs>
                <clipPath id="gaudi1" clipPathUnits="objectBoundingBox">
                    <path d="M 0.716 0.221 C 0.794 0.258 0.873 0.295 0.952 0.333 C 0.966 0.34 0.982 0.345 0.991 0.358 C 1.007 0.383 0.997 0.423 0.991 0.45 C 0.974 0.516 0.94 0.547 0.89 0.591 C 0.845 0.633 0.8 0.677 0.752 0.717 C 0.651 0.803 0.582 0.823 0.451 0.843 C 0.371 0.855 0.29 0.869 0.209 0.872 C 0.143 0.873 0.058 0.87 0.025 0.805 C 0 0.757 0.001 0.7 0 0.648 C 0 0.584 0 0.521 0 0.458 C 0 0.346 0 0.234 0 0.122 C 0 0.101 0 0.079 0 0.057 C 0.001 0.039 0.003 0.016 0.023 0.008 C 0.039 0.002 0.056 0.001 0.072 0 C 0.099 -0.001 0.126 0 0.152 0.001 C 0.211 0.005 0.271 0.012 0.325 0.035 C 0.455 0.096 0.585 0.159 0.716 0.221" />
                </clipPath>
            </defs>
        </svg>
    {% endcomment %}

    <!-- Data portal features -->
    <h2 class="h3 mt-5" id="features">BCA Data Portal features</h2>

    <div class="row row-cols-1 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-4">
        {% url 'atlas_info' dataset=example_dataset.slug as info_url %}
        {% static 'app/images/features/qc.png' as qc_img %}
        {% include "app/components/cards/feature.html" with title="Quality control" img_url=qc_img img_alt="Quality control screenshot" description="Assess key metrics for each dataset." example_url=info_url %}

        {% url 'atlas_overview' dataset=example_dataset.slug as overview_url %}
        {% static 'app/images/features/cell-projection.svg' as projection_img %}
        {% include "app/components/cards/feature.html" with title="Cell projection" img_url=projection_img img_alt="Cell projection screenshot" description="Visualize dimensionality reduction of cells, colored by cell types or expression of a gene of interest." example_url=overview_url %}

        {% static 'app/images/features/expression-heatmap.svg' as heatmap_img %}
        {% include "app/components/cards/feature.html" with title="Gene expression heatmap" img_url=heatmap_img img_alt="Gene expression heatmap screenshot" description="Explore expression patterns of top cell type markers or specific genes." example_url=overview_url %}

        {% url 'atlas_gene' dataset=example_dataset.slug gene=example_gene as gene_url %}
        {% static 'app/images/features/orthologs.png' as orthologs_img %}
        {% include "app/components/cards/feature.html" with title="Gene and ortholog expression" img_url=orthologs_img img_alt="Gene and ortholog expression screenshot" description="Compare gene expression across cell types and their corresponding orthologs." example_url=gene_url %}

        {% url 'atlas_markers' dataset=example_dataset.slug as markers_url %}
        {% static 'app/images/features/markers.png' as markers_img %}
        {% include "app/components/cards/feature.html" with title="Cell type markers" img_url=markers_img img_alt="Cell type markers screenshot" description="Identify genes enriched in selected cell types." example_url=markers_url %}

        {% url 'atlas_compare' dataset=example_dataset.slug as compare_url %}
        {% static 'app/images/features/compare.png' as compare_img %}
        {% include "app/components/cards/feature.html" with title="Comparative analysis" img_url=compare_img img_alt="Comparative analysis screenshot" description="Perform cross-species comparisons and check cell type similarities." example_url=compare_url %}

        {% url 'downloads' as downloads_url %}
        {% static 'app/images/features/downloads.png' as downloads_img %}
        {% include "app/components/cards/feature.html" with title="Data download" img_url=downloads_img img_alt="Data download screenshot" description="Access and download processed data." explore_url=downloads_url %}

        {% url 'rest:index' as rest_url %}
        {% static 'app/images/features/rest.png' as rest_img %}
        {% include "app/components/cards/feature.html" with title="REST API" img_url=rest_img img_alt="REST API screenshot" description="Download data programmatically." docs_url=rest_url %}

        {% url 'entry' as entries_url %}
        {% static 'app/images/features/entries.png' as entries_img %}
        {% include "app/components/cards/feature.html" with title="Database entries" img_url=entries_img img_alt="Database entry screenshot" description="Browse an index of the entries in the BCA database." explore_url=entries_url %}
    </div>

    <!-- News fetched from Ghost blog RSS -->
    <h2 class="h3 mt-5" id="news">
        <a href="{% bca_url 'blog' %}" target="_blank">Latest news</a>
    </h2>

    <div class="row row-cols-1 row-cols-md-3 align-items-stretch g-4 py-2">
        {% load cards %}
        {% for post in posts.latest %}
            <div class="col">{% news_card title=post.title date=post.date|date:"j F Y" img_url=post.image link=post.link %}</div>
        {% empty %}
            <span class="text-secondary"><i>No posts available.</i></span>
        {% endfor %}
    </div>

    <!-- Publications, meetings and tutorials -->
    {% load lists %}
    {% load dict_extras %}

    <div class="row row-cols-1 row-cols-md-3 align-items-stretch g-4 py-2">
        {% for category in "publications,meetings,tutorials"|split:"," %}
            <div class="col">
                <h2 class="h4" id="{{ category }}">
                    <a href="{% bca_url 'blog/tag/'|add:category %}" target="_blank">{{ category|capfirst }}</a>
                </h2>
                <div class="bd-example m-0 border-0">
                    <ul class="list-group list-group-flush">
                        {% for post in posts|get_item:category %}
                            {% if category == "publications" %}
                                {% news_list title=post.items.title category=category link=post.link date=post.items.published journal=post.items.journal %}
                            {% elif category == "meetings" %}
                                {% news_list title=post.title category=category link=post.link date=post.items.date location=post.items.location %}
                            {% elif category == "tutorials" %}
                                {% news_list title=post.title category=category link=post.link date=post.items.date duration=post.items.duration type=post.items.type %}
                            {% endif %}
                        {% empty %}
                            <li class="list-group-item">
                                <span class="text-secondary"><i>No {{ category }} available yet.</i></span>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock content %}