{% extends "index.html" %}
{% load static %}
{% block content %}
    <div class="container monospace py-4">
        <div class="p-2 border-4 rounded-xl text-[#eee] bg-bluelight-translucent-dark border-bluelight-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="h-8 max-w-8 my-auto align-middle">
                                <img src="{% static 'tracker/images/neofox_flag_trans_256.png' %}"
                                     alt="A trans pride fox emoji."
                                     width="32"
                                     height="32" />
                            </span>
                            <span class="max-h-12 max-w-64 my-auto align-middle">
                                <img src="{% static 'tracker/images/trunic_title.png' %}"
                                     alt="A trans pride fox emoji."
                                     width="365"
                                     height="64" />
                            </span>
                        </div>
                        <div class="mt-auto text-sm max-w-fit">(Tunic Transition Tracker)</div>
                    </div>
                </div>
                <div class="space-y-1">
                    <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-bluelight-translucent-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>
                    <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" id="overview">
                        <div class="flex flex-col space-y-2">
                            <div id="breakdown-current">
                                {% include "tracker/breakdown/block.html" with scene_title=current_scene.title scene_data=current_scene.data %}
                            </div>
                            <hr class="my-2 border-2 border-bluelight-translucent-dark rounded-xl" />
                            <details class="group flex flex-col rounded-xl border-4 bg-bluelight-translucent-light border-bluelight-translucent-dark">
                                <summary class="justify-start p-2 text-lg">Summary</summary>
                                <div class="mb-2 px-2 space-y-2 rounded-xl">
                                    <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
                                    <div class="summary-list">{% include "tracker/summary/list.html" %}</div>
                                </div>
                            </details>
                            <details class="group flex flex-col rounded-xl border-4 bg-bluelight-translucent-light border-bluelight-translucent-dark">
                                <summary class="justify-start p-2 text-lg">Breakdown</summary>
                                <div class="px-2 flex flex-col space-y-2 breakdown-list">
                                    {% include "tracker/breakdown/block.html" with extra_classes="hidden" %}
                                    {% for scene_title, scene_data in scenes.items %}
                                        {% if scene_title == current_scene.title %}
                                            {% include "tracker/breakdown/block.html" with extra_classes="hidden" %}
                                        {% else %}
                                            {% include "tracker/breakdown/block.html" %}
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </details>
                        </div>
                    </div>
                    <details class="group p-2 flex max-w-full rounded-xl border-4 bg-bluelight-translucent-light border-bluelight-translucent-dark">
                        <summary class="justify-start">Settings</summary>
                        <div class="p-2 flex flex-col space-y-2">
                            {% include "tracker/settings/index.html" %}
                            {% include "tracker/address/index.html" %}
                        </div>
                    </details>
                    <details class="group p-2 flex max-w-full rounded-xl border-4 bg-bluelight-translucent-light border-bluelight-translucent-dark">
                        <summary class="justify-start">Tracker Debug</summary>
                        <div class="py-2 flex flex-col space-y-2" id="debug-block">
                            <ul class="p-2 rounded-xl bg-bluelight-translucent hidden">
                            </ul>
                            {% for name, value in debug.items %}
                                <ul class="p-2 rounded-xl bg-bluelight-translucent">
                                    {{ name }}: {{ value }}
                                </ul>
                            {% endfor %}
                        </div>
                    </details>
                </div>
            {% else %}
                <div id="no_data" />{% endif %}</div>
    </div>
{% endblock content %}
