{% extends "index.html" %}
{% load static %}
{% block content %}
    <div class="min-h-screen font-nerd bg-gradient-to-br from-bluelight-background-dark to-bluelight-background">
        <div class="container monospace py-4 space-y-2 text-[#E0FFFF] [text-shadow:_1px_1px_0_rgb(0_0_0_/_50%)]">
            {% include "tracker/about/index.html" %}
            <div class="p-2 bg-white rounded-lg shadow-lg bg-opacity-10 shadow-bluelight-background-dark">
                {% if debug != '' %}
                    <div class="px-2 space-y-2">
                        <div class="flex flex-col align-middle max-w-fit">
                            <div class="flex flex-row space-x-2 align-middle sm:h-12 max-w-fit">
                                <span class="flex flex-shrink-0 object-contain w-8 h-8 my-auto align-middle shake">
                                    <img src="{% static 'tracker/images/neofox_flag_trans_256.png' %}"
                                         alt="A trans pride fox emoji."
                                         width="32"
                                         height="32" />
                                </span>
                                <div class="min-w-0 pr-8 my-auto text-xl align-middle overflow-clip sm:text-3xl">Tunic Transition Tracker</div>
                            </div>
                            <div class="flex pb-2 text-lg sm:text-2xl max-w-fit font-trunic">
                                (
                                <div class="pt-1.5 text-sm sm:text-lg">&nbsp;tuniik' t'raan'ziishuun' t'raakx&nbsp;</div>
                                )
                            </div>
                        </div>
                    </div>
                    {% include "tracker/status/index.html" %}
                    <div class="space-y-1">
                        <hr class="border-2 border-bluelight-dark rounded-xl" />
                        <div class="flex flex-col px-2 space-y-2 text-lg rounded-sm md:flex-row md:space-x-4 md:space-y-0 bg-gradient-to-r from-bluelight-background-translucent to-bluelight-background-translucent-light"
                             id="overview-totals">
                            <div class="flex basis-1/2">
                                <div class="flex-col min-w-full">
                                    <div>
                                        Checks
                                        <hr class="border-2 border-bluelight-dark rounded-xl" />
                                    </div>
                                    <div class="overview-checks">
                                        {{ totals.Checks.Undiscovered }}/{{ totals.Checks.Total }} ({{ totals.Checks.Remaining }} left)
                                    </div>
                                </div>
                            </div>
                            <div class="flex basis-1/2">
                                <div class="flex-col min-w-full">
                                    <div>
                                        Entrances
                                        <hr class="border-2 border-bluelight-dark rounded-xl" />
                                    </div>
                                    <div class="overview-entrances">
                                        {{ totals.Entrances.Undiscovered }}/{{ totals.Entrances.Total }} ({{ totals.Entrances.Remaining }} left)
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr class="border-2 border-bluelight-dark rounded-xl" />
                    </div>
                    <div class="flex flex-col space-y-2">
                        <div class="flex flex-col max-w-full space-y-2">
                            <div class="flex flex-col space-y-2" id="breakdown-list">
                                {% include "tracker/breakdown/block.html" with extra_classes="hidden" is_current_scene="false" %}
                                {% for scene_title, scene_data in scenes.items %}
                                    {% if scene_title == current_scene %}
                                        {% include "tracker/breakdown/block.html" with extra_classes="order-first" is_current_scene="true" %}
                                    {% else %}
                                        {% include "tracker/breakdown/block.html" with extra_classes="order-last hidden" is_current_scene="false" %}
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                        {% include "tracker/summary/list.html" %}
                        {% include "tracker/codes/index.html" %}
                        {% include "tracker/hints/list.html" %}
                    </div>
                {% else %}
                    <div id="no_data"></div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock content %}
