{% extends '@EasyAdmin/page/content.html.twig' %}

{% block content_title %}Tableau de bord{% endblock %}
{% block page_actions %}
    {# <a class="btn btn-primary" href="...">Some Action</a> #}
{% endblock %}

{% block main %}
    <div style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 15px;">
        {# Card #}
        <div class="card" style="width: 25%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; height: 100px">
            <div style="width: 30%; background-color: #A60F0F; display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 4px;">
                <i class="faw fa fa-user" style="color: white; font-size: 28px"></i>
            </div>
            <div style="height: 100%; padding: 10px 0px">
                <h5>Utilisateurs</h5>
                <h4>{{utilisateurs}}</h4>
            </div>
        </div>
        {# End Card #}
        {# Card #}
        <div class="card" style="width: 25%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; height: 100px">
            <div style="width: 30%; background-color: #A60F0F; display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 4px;">
                <i class="faw fa fa-tag" style="color: white; font-size: 28px"></i>
            </div>
            <div style="height: 100%; padding: 10px 0px">
                <h5>Catégories</h5>
                <h4>{{categories}}</h4>
            </div>
        </div>
        {# End Card #}
        {# Card #}
        <div class="card" style="width: 25%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; height: 100px">
            <div style="width: 30%; background-color: #A60F0F; display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 4px;">
                <i class="faw fa fa-box" style="color: white; font-size: 28px"></i>
            </div>
            <div style="height: 100%; padding: 10px 0px">
                <h5>Produits</h5>
                <h4>{{produits}}</h4>
            </div>
        </div>
        {# End Card #}
        {# Card #}
        <div class="card" style="width: 25%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; height: 100px">
            <div style="width: 30%; background-color: #A60F0F; display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 4px;">
                <i class="faw fa fa-city" style="color: white; font-size: 28px"></i>
            </div>
            <div style="height: 100%; padding: 10px 0px">
                <h5>Ville</h5>
                <h4>{{cities}}</h4>
            </div>
        </div>
        {# End Card #}
        
    </div>
    
    
    <div style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 15px; margin-top: 25px">
        {# Card #}
        <div class="card" style="width: 25%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; height: 100px">
            <div style="width: 30%; background-color: #A60F0F; display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 4px;">
                <i class="faw fa fa-truck" style="color: white; font-size: 28px"></i>
            </div>
            <div style="height: 100%; padding: 10px 0px">
                <h5>Véhicule</h5>
                <h4>{{trucks}}</h4>
            </div>
        </div>
        {# End Card #}
        {# Card #}
        <div class="card" style="width: 25%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; height: 100px">
            <div class="bg-primary" style="width: 30%; display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 4px;">
                <i class="faw fa fa-shopping-bag" style="color: white; font-size: 28px"></i>
            </div>
            <div style="height: 100%; padding: 10px 0px">
                <h5>Livraison en cours</h5>
                <h4>{{ordersProgressing}}</h4>
            </div>
        </div>
        {# End Card #}
        {# Card #}
        <div class="card" style="width: 25%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; height: 100px">
            <div class="bg-success" style="width: 30%; display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 4px;">
                <i class="faw fa fa-shopping-bag" style="color: white; font-size: 28px"></i>
            </div>
            <div style="height: 100%; padding: 10px 0px">
                <h5>Commandes livrées</h5>
                <h4>{{ordersDelivered}}</h4>
            </div>
        </div>
        {# End Card #}
        {# Card #}
        <div class="card" style="width: 25%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; height: 100px">
            <div class="bg-warning" style="width: 30%; display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 4px;">
                <i class="faw fa fa-shopping-bag" style="color: white; font-size: 28px"></i>
            </div>
            <div style="height: 100%; padding: 10px 0px">
                <h5>En cours de préparation</h5>
                <h4>{{ordersInRoad}}</h4>
            </div>
        </div>
        {# End Card #}
        
    </div>
    
{% endblock %}