{% extends "home.html" %}

{% block circlecharts %}
{% for ups in data %}
    <div class="flex self-center items-center justify-between flex-wrap text-slate-800 dark:text-slate-200 text-3xl p-4 {{ups}} cursor-pointer">
    <div>
        <div class="flex gap-4">
            <button class="{{ups}}plus p-2 border-2 rounded border-slate-800 dark:border-slate-200 bg-blue-800 hidden">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                    <path class="fill-white" d="M19 6.25l-1.5-1.5-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z"/>
                </svg>
            </button>
            <button class="{{ups}}minus p-2 border-2 rounded border-slate-800 dark:border-slate-200 bg-blue-800">
                <svg width="20" height="20" viewBox="0 0 20 20">
                    <path class="fill-white" d="M1 13.75l1.5 1.5 7.5-7.5 7.5 7.5 1.5-1.5-9-9-9 9z"/>
                </svg>
            </button>
            {{ups}}
            <button class="block flex-grow hidden md:flex md:items-center md:w-auto text-lg px-5 align-bottom">
                {{date}}
            </button>
            <button class="block flex-grow hidden lg:flex lg:items-center lg:w-auto text-lg px-1 rounded bg-{{data[ups]['4']['color']}}-900 dark:bg-{{data[ups]['4']['color']}}-500 align-bottom text-slate-200 dark:text-slate-900">
                Load: {{data[ups]['4']['value']}} {{data[ups]['4']['valueLabel']}}
            </button>
            <button class="block flex-grow hidden lg:flex lg:items-center lg:w-auto text-lg px-1 rounded bg-{{data[ups]['5']['color']}}-900 dark:bg-{{data[ups]['5']['color']}}-500 align-bottom text-slate-200 dark:text-slate-900">
                Runtime: {{data[ups]['5']['value']}} {{data[ups]['5']['valueLabel']}}
            </button>
        </div>
        
        
    </div>
    
   
    </div>
    <div class="flex w-auto self-center items-center justify-center align-center {{ups}}-data gap-2 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

    {% for chart in data[ups] %}
        {% set label = data[ups][chart]['label']%}
        {% set value = data[ups][chart]['value']%}
        {% set valueLabel = data[ups][chart]['valueLabel'] %}
        {% if "Load" in label or "Runtime" in label %}
        {% set classes = "flex lg:hidden single-chart justify-items-stretch w-90 mx-4 py-3 rounded overflow-hidden shadow-lg bg-slate-200 dark:bg-slate-700 w-72 h-72"%}
        {% else %}
        {% set classes = "single-chart justify-items-stretch w-90 mx-4 py-3 rounded overflow-hidden shadow-lg bg-slate-200 dark:bg-slate-700 w-72 h-72"%}
        {% endif %}
        <div class="{{classes}}">
            <svg viewBox="0 0 36 36" class="circular-chart">
            <path class="circle-bg"
            d="M18 2.0845
                a 15.9155 15.9155 0 0 1 0 31.831
                a 15.9155 15.9155 0 0 1 0 -31.831"
            />
            <path class="circle stroke-{{data[ups][chart]['color']}}-800"
            stroke-dasharray="{{data[ups][chart]['percent']}}, 100"
            d="M18 2.0845
                a 15.9155 15.9155 0 0 1 0 31.831
                a 15.9155 15.9155 0 0 1 0 -31.831"
            />
            <text x="18" y="18" class="circleChartValue fill-slate-800 dark:fill-slate-100">{{value}} {{valueLabel}}</text>
            <text x="18" y="22" class="circleChartLabel fill-slate-800 dark:fill-slate-100">{{label}}</text>
        </svg>
        </div>
    {% endfor %}
    <script>
        const {{ups}}div = document.querySelector(".{{ups}}")
        const {{ups}}plus = document.querySelector(".{{ups}}plus")
        const {{ups}}minus = document.querySelector(".{{ups}}minus")
        const {{ups}}data = document.querySelector(".{{ups}}-data")

        // Add Event Listener
        {{ups}}div.addEventListener("click", () =>{
        {{ups}}data.classList.toggle("hidden")
        {{ups}}plus.classList.toggle("hidden")
        {{ups}}minus.classList.toggle("hidden")
        })
</script>
{% endfor %}
</div>

<div>
<table class="p-5 table-auto w-full border-separate border-spacing-1 border border-slate-400">
    <thead>
        <tr>
            <th class="px-4 py-2 bg-blue-500">Date</th>
            <th class="px-4 py-2 bg-blue-500">Charge</th>
            <th class="px-4 py-2 bg-blue-500">Runtime</th>
            <th class="px-4 py-2 bg-blue-500">AC Input</th>
            <th class="px-4 py-2 bg-blue-500">AC Output</th>
            <th class="px-4 py-2 bg-blue-500">Battery</th>
            <th class="px-4 py-2 bg-blue-500">Load</th>
            <th class="px-4 py-2 bg-blue-500">Status</th>
        </tr>
    </thead>
    <tbody>
        {% for row in upsData %}
        <tr>
        {% for data in upsData[row] %}
        {% if data != "id" and data != "input_nominal" %}
            <td class="text-center px-4 py-2 bg-blue-300">{{upsData[row][data]}}</td>
        {% endif %}
        {% endfor %}
        </tr>
        {% endfor %}

    </tbody>
</table>
</div>
{% endblock %}