{% extends 'admin/base.html' %} 
{% load static %}
{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static 'override.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'fonts.css' %}" />
{% endblock %}
{% load i18n unfold %}

{% block html_attrs %}
    lang="fa" dir="rtl"
{% endblock %}

{% block breadcrumbs %}{% endblock %}

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



{% block branding %}
    <h1 id="site-name"><a href="{% url 'admin:index' %}">{{ site_header|default:_('Django administration') }}</a></h1>
{% endblock %}

{% block content %}
    {% include "unfold/helpers/messages.html" %}

    {% component "unfold/components/container.html" %}        
        <div class="flex flex-col gap-8 mb-12">
            {% include "formula/service.html" %}
            <!-- <div class="flex gap-4">
                {% component "unfold/components/navigation.html" with items=navigation %}{% endcomponent %}
            </div> -->
            

            <div class="flex flex-col gap-8 lg:flex-row">
                {% for stats in kpi %}                
                    {% component "unfold/components/card.html" with class="lg:w-1/3" footer=stats.footer %}
                        {% component "unfold/components/text.html" %}
                            {{ stats.title }}
                        {% endcomponent %}   

                        {% component "unfold/components/title.html" %}
                            {{ stats.metric }}
                        {% endcomponent %}                                  
                    {% endcomponent %}
                {% endfor %}
            </div>
            


            {% component "unfold/components/card.html" with title='بازدید های وبسایت در ماه اخیر' %}
                {% component "unfold/components/chart/bar.html" with data=chart height=320 %}{% endcomponent %}
            {% endcomponent %}
            
            <div class="flex flex-col gap-8 lg:flex-row">            
                {% component "unfold/components/card.html" with class="lg:w-1/2" title='محبوب ترین دسته بندی ها' %}
                    {% component "unfold/components/title.html" with class="mb-2" %}
                        $1,234,567.89
                    {% endcomponent %}
                
                    {% component "unfold/components/text.html" %}                    
                        {% blocktrans %}
                            Total revenue between <strong class="font-semibold text-font-important-light dark:text-font-important-dark dark:text-white">1 - 31 October</strong>. Increase <span class="text-green-700 font-semibold dark:text-green-400">+3.14%</span> comparing to previous month <strong class="font-semibold text-font-important-light dark:text-font-important-dark dark:text-white">1 - 30 September</strong>.
                        {% endblocktrans %}
                    {% endcomponent %}     

                    {% component "unfold/components/separator.html" %}{% endcomponent %}

                    <div class="flex flex-col gap-5">                
                        {% for metric in progress %}
                            {% component "unfold/components/progress.html" with title=metric.title description=metric.description value=metric.value %}{% endcomponent %}
                        {% endfor %}                                    
                    </div>



                {% endcomponent %}    

                
                <div class="flex flex-col gap-8 lg:w-1/2">


                    {% 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 %}                                
                </div>            
            </div>
        </div>
    {% endcomponent %}
{% endblock %}