{% extends 'admin/base_site.html' %}

{% load i18n unfold %}

{% block breadcrumbs %}{% endblock %}


{% block title %}
    {% trans 'Dashboard' %} | {{ site_title|default:_('Django site admin') }}
{% endblock %}


{% block extrahead %}
    {% if plausible_domain %}
        <script defer data-domain="{{ plausible_domain }}" src="https://plausible.io/js/script.js"></script>
    {% endif %}    
{% endblock %}

{% block content %}
    {% component "unfold/components/container.html" %}
        {% component "unfold/components/flex.html" with class="gap-4" %}
            {% component "unfold/components/navigation.html" with items=navigation %}{% endcomponent %}

            {% component "unfold/components/navigation.html" with class="ml-auto" items=filters %}{% endcomponent %}
        {% endcomponent %}

        {% component "unfold/components/flex.html" with class="gap-8 mb-8 flex-col lg:flex-row" %}
                {% for stats in kpi %}
                    {% trans stats.label as label %}
                    {% component "unfold/components/card.html" with class="" label=label footer=stats.footer %}
                        {% component "unfold/components/text.html" %}
                            {{ stats.title }}
                        {% endcomponent %}   
                        {% component "unfold/components/title.html" %}
                            {{ stats.metric_total }}
                        {% endcomponent %}
                        {% if stats.metric_success %}
                            {% component "unfold/components/text.html" with class="text-xs text-base-500 mt-1" %}
                                {{ stats.metric_success }}
                            {% endcomponent %}
                        {% endif %}                                  
                    {% endcomponent %}
                {% endfor %}
        {% endcomponent %}
        
        {% trans "Website performance in last 28 days" as title %}
        {% trans "Successful vs failed requests per day, users and anonymous visitors" as chart_description %}
        {% component "unfold/components/card.html" with class="mb-8" title=title title_icon="monitoring" description=chart_description %}
            {% component "unfold/components/chart/bar.html" with data=chart height=320 %}{% endcomponent %}
        {% endcomponent %}

        {% comment %}
        {% component "unfold/components/flex.html" with class="gap-8 mb-8 flex-col lg:flex-row" %}
            {% trans "The most trending products in last 2 weeks" as title %}
            {% component "unfold/components/card.html" with class="lg:w-1/2" title=title %}
                {% component "unfold/components/card.html" %}
                    {% component "unfold/components/title.html" with class="mb-2" %}
                        $1,234,567.89
                    {% endcomponent %}
                
                    {% component "unfold/components/text.html" %}
                        {% blocktrans %}
                            Total revenue between <span class="font-medium text-gray-700 dark:text-white">1 - 31 October</span>. Increase <span class="text-green-600 font-medium">+3.14%</span> comparing to previous month <span class="font-medium text-gray-700 dark:text-white">1 - 30 September</span>. <a href="#" class="text-primary-500 underline">View detailed analytics.</a>
                        {% endblocktrans %}
                    {% endcomponent %}                
                {% endcomponent %}
                {% component "unfold/components/separator.html" %}{% endcomponent %}
                
                {% component "unfold/components/flex.html" with col=1 class="gap-8" %}
                    {% for metric in progress %}
                        {% component "unfold/components/progress.html" with title=metric.title description=metric.description value=metric.value %}{% endcomponent %}
                    {% endfor %}
                {% endcomponent %}
            {% endcomponent %}    

            {% component "unfold/components/flex.html" with class="gap-8 lg:w-1/2" col=1 %}
                {% for stats in performance %}
                    {% component "unfold/components/card.html" %}
                        {% component "unfold/components/text.html" %}
                            {{ stats.title }}
                        {% endcomponent %}   

                        {% component "unfold/components/title.html" with class="mb-8" %}
                            {{ stats.metric }}
                        {% endcomponent %}                                  

                        {% component "unfold/components/chart/line.html" with data=stats.chart %}{% endcomponent %}
                    {% endcomponent %}
                {% endfor %}
            {% endcomponent %}        
        {% endcomponent %}   
        {% endcomment %}
        
    {% endcomponent %}
{% endblock %}