{% extends "index.html" %}
{% load static %}
{% block content %}
    <div class="container monospace py-4 space-y-2 text-[#E0FFFF] [text-shadow:_1px_1px_0_rgb(0_0_0_/_50%)]">
        <div class="p-2 rounded-lg bg-white bg-opacity-10 shadow-lg shadow-bluelight-background-dark">
            {% if debug != '' %}
                <div class="space-y-2 px-2">
                    <div class="flex flex-col align-middle max-w-fit">
                        <div class="flex flex-row align-middle max-w-fit h-12 space-x-2">
                            <span class="flex flex-shrink-0 object-contain w-8 h-8 my-auto align-middle backdrop-blur">
                                <img src="{% static 'tracker/images/neofox_flag_trans_256.png' %}"
                                     alt="A trans pride fox emoji."
                                     width="32"
                                     height="32" />
                            </span>
                            <img class="w-[15.5rem] h-11 align-middle invert drop-shadow-[1px_2px_2px_rgba(0,0,0,1)]"
                                 src="{% static 'tracker/images/trunic.svg' %}"
                                 alt="A trans pride fox emoji."
                                 width=""
                                 height="" />
                        </div>
                        <div class="mt-auto text-sm max-w-fit">(Tunic Transition Tracker)</div>
                    </div>
                </div>
                <div class="space-y-1">
                    {% include "tracker/howto/index.html" %}
                    <hr class="mt-2 border-2 border-bluelight-dark rounded-xl" />
                    <div class="px-2 flex flex-col md:flex-row md:space-x-4 space-y-2 md:space-y-0 text-lg bg-gradient-to-r from-bluelight-light to-bluelight-dark rounded-sm"
                         id="overview-totals">
                        <div class="flex basis-1/2 overview-checks">Checks: {{ totals.Checks.Undiscovered }}/{{ totals.Checks.Total }}</div>
                        <div class="flex basis-1/2 overview-entrances">
                            Entrances: {{ totals.Entrances.Undiscovered }}/{{ totals.Entrances.Total }}
                        </div>
                    </div>
                    <details class="group flex flex-col rounded-lg bg-gradient-to-br from-bluelight-background-light to-bluelight-background">
                        <summary class="py-2 px-4 justify-start">Summary</summary>
                        <div class="px-2 rounded-xl">
                            <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
                            <div class="py-2" id="summary-list">{% include "tracker/summary/list.html" %}</div>
                        </div>
                    </details>
                    <hr class="mb-2 border-2 border-bluelight-dark rounded-xl" />
                </div>
                <div class="flex flex-col space-y-2">
                    {% include "tracker/status/index.html" %}
                    <div class="p-flex flex-col max-w-full space-y-2">
                        <div id="breakdown-list">
                            {% include "tracker/breakdown/block.html" with extra_classes="hidden" %}
                            {% for scene_title, scene_data in scenes.items %}
                                {% include "tracker/breakdown/block.html" with extra_classes="hidden" %}
                            {% endfor %}
                        </div>
                        <div id="breakdown-current">
                            {% include "tracker/breakdown/block.html" with scene_title=current_scene.title scene_data=current_scene.data %}
                        </div>
                        {% include "tracker/codes/index.html" %}
                    </div>
                    <details class="py-2 px-4 flex flex-col space-y-2 max-w-full text-md rounded-lg bg-gradient-to-br from-bluelight-background-light to-bluelight-background">
                        <summary class="justify-start">Settings</summary>
                        {% include "tracker/settings/index.html" %}
                        {% include "tracker/address/index.html" %}
                        <div class="p-2 m-auto justify-center align-middle flex flex-row space-x-2">
                            <input onclick="hide_empty_summaries()"
                                   type="checkbox"
                                   id="hideDone"
                                   class="p-2 my-auto rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]" />
                            <label for="hideDone"
                                   class="my-auto justify-left align-top min-w-fit text-md text-nowrap">
                                Hide completed areas
                            </label>
                        </div>
                        <div class="p-2 m-auto justify-center align-middle flex flex-row space-x-2">
                            <input onclick="notices_ur_debug()"
                                   class="p-2 my-auto rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]"
                                   type="checkbox"
                                   id="show-debug" />
                            <label for="show-debug"
                                   class="my-auto justify-left align-top min-w-fit text-md text-nowrap">
                                Sh-OwO Debug
                            </label>
                        </div>
                    </details>
                </div>
            {% else %}
                <div id="no_data" />{% endif %}</div>
        <div class="p-2 flex flex-col space-y-2 max-w-full rounded-lg bg-white bg-opacity-10 shadow-lg shadow-bluelight-background-dark hidden"
             id="debug-block">
            <div class="px-2 text-lg">Tracker Debug</div>
            <div class="grid grid-flow-row md:grid-cols-2 xl:grid-cols-3 gap-2 space-y-2 max-w-full break-words debug-list">
                <div class="max-h-full align-bottom flex flex-col-reverse hidden">
                    <hr class="mt-1 border-2 border-[#24242480] rounded-xl" />
                    <ul class="px-2 break-all sm:break-word debug-item">
                    </ul>
                </div>
                {% for name, value in debug.items %}
                    <div class="max-h-full align-bottom flex flex-col-reverse">
                        <hr class="mt-1 border-2 border-[#24242480] rounded-xl" />
                        <ul class="px-2 break-all sm:break-word debug-item">
                            {{ name }}: {{ value }}
                        </ul>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock content %}
