{% extends "base.html" %}

{% comment %}

Template for the Cell Atlas pages

Features:
- Atlas selection via select element or using URL path parameters, such as
  `/atlas/Homo_sapiens`
- Warning message (e.g., if selected dataset is not available in the database)
- Placeholders shown when no dataset is selected

Input:
- warning: warning message to display
- icon: the FontAwesome icon to show if no dataset is selected (e.g., 'question-circle')

{% endcomment %}

{% block title %}
    Cell Atlas
{% endblock title %}

{% block subnav %}
    {% include "../components/select/atlas.html" with redirect="arg" class="atlas-select" optgroup_columns="true" view="atlas" %}
{% endblock subnav %}

{% block content %}
    <style>
        .species-placeholder {
            background-color: lightgray;
            height: 140px;
            text-align: center;
            color: white;
        }

        .row-placeholder {
            display: block;
            margin-bottom: 0.5rem;
        }

        #row1 {
            width: 290px;
            max-width: 100%;
        }
        #row2 {
            width: 260px;
            max-width:  89%;
        }
        #row3 {
            width: 280px;
            max-width:  96%;
        }
        #row4 {
            width: 270px;
            max-width:  93%;
        }
        #row5 {
            width: 150px;
            max-width:  52%;
        }
    </style>

    {% include "../components/warning_alert.html" %}
    <div class="container-xxl">
        <div class="row">
            <div class="col-4 pt-4 d-flex flex-column align-items-center justify-content-center species-placeholder">
                <i class="fa fa-{{ icon }} fa-4x d-block d-md-none"></i>
                <i class="fa fa-{{ icon }} fa-5x d-none d-md-block d-lg-none"></i>
                <i class="fa fa-{{ icon }} fa-6x d-none d-lg-block"></i>
                <p>
                    <small>No dataset selected</small>
                </p>
            </div>
            <div class="col-8">
                <span id="row1" class="placeholder row-placeholder"></span>
                <span id="row2" class="placeholder row-placeholder"></span>
                <span id="row3" class="placeholder row-placeholder"></span>
                <span id="row4" class="placeholder row-placeholder"></span>
                <span id="row5" class="placeholder row-placeholder"></span>
            </div>
        </div>
    </div>

{% endblock content %}