{% extends "index.html" %}
{% load static %}
{% block content %}
    <div class="container monospace py-4">
        <div class="border-4 rounded-xl text-[#eee] bg-bluelight-translucent-dark border-bluelight-dark">
            {% if debug != '' %}
                <h1 class="mt-2 px-2 flex text-2xl">
                    <span class="relative inline-block align-middle h-8 w-8">
                        <img src="{% static 'tracker/images/neofox_flag_trans_256.png' %}"
                             alt="A trans pride fox emoji."
                             width=""
                             height="" />
                    </span>
                    &nbsp;Tunic Transition Tracker
                </h1>
                <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
                <div class="p-2 flex flex-col space-y-2">
                    {% include "tracker/status/index.html" %}
                    <div class="p-2 flex flex-col max-w-full rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark"
                         id="overview">
                        <div class="text-lg mb-2">Overview</div>
                        <div class="flex flex-col md:flex-row md:space-x-4 space-y-2 md:space-y-0">
                            <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="mt-2 mb-4 border-2 border-bluelight-translucent-dark rounded-xl" />
                        <div class="flex flex-col space-y-2">
                            <details class="group flex flex-col rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark">
                                <summary class="justify-start p-2 text-lg">Summary</summary>
                                <div class="p-2 summary-list">{% include "tracker/summary/list.html" %}</div>
                            </details>
                            <details class="group flex flex-col rounded-xl border-4 bg-bluelight-translucent border-bluelight-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>
                    <div id="breakdown-current">
                        {% include "tracker/breakdown/block.html" with scene_title=current_scene.title scene_data=current_scene.data %}
                    </div>
                    <details class="group p-2 flex max-w-full rounded-xl border-4 bg-bluelight-translucent border-bluelight-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 border-bluelight-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 %}
