{% extends 'domain/backend/layouts/base.html.twig' %}

{% block title %}Tableau de bord{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('templates/backend/libs/jsvectormap/css/jsvectormap.min.css') }}">
{% endblock %}

{% block javascript %}
<script src="{{ asset('templates/backend/libs/apexcharts/apexcharts.min.js') }}"></script>
<script src="{{ asset('templates/backend/data/stock-prices.js') }}"></script>
<script src="{{ asset('templates/backend/libs/jsvectormap/js/jsvectormap.min.js') }}"></script>
<script src="{{ asset('templates/backend/libs/jsvectormap/maps/world.js') }}"></script>
<script src="{{ asset('templates/backend/js/pages/index.init.js') }}"></script>
{% endblock %}

{% block body %}
    <div class="container-xxl">
        <div class="row justify-content-center">
            <div class="col-md-6 col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <div class="row d-flex justify-content-center border-dashed-bottom pb-3">
                            <div class="col-9">
                                <p class="text-dark mb-0 fw-semibold fs-14">Partenaires</p>
                                <h3 class="mt-2 mb-0 fw-bold">{{ partners|length }}</h3>
                            </div>
                            <!--end col-->
                            <div class="col-3 align-self-center">
                                <div class="d-flex justify-content-center align-items-center thumb-xl bg-light rounded-circle mx-auto">
                                    <i class="iconoir-hexagon-dice h1 align-self-center mb-0 text-secondary"></i>
                                </div>
                            </div>
                            <!--end col-->
                        </div>
                        <!--end row-->
                        {#<p class="mb-0 text-truncate text-muted mt-3"><span class="text-success">8.5%</span>
                            New Sessions Today</p>#}
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end col-->
            <div class="col-md-6 col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <div class="row d-flex justify-content-center border-dashed-bottom pb-3">
                            <div class="col-9">
                                <p class="text-dark mb-0 fw-semibold fs-14">Total Posts</p>
                                <h3 class="mt-2 mb-0 fw-bold">{{ posts|length }}</h3>
                            </div>
                            <!--end col-->
                            <div class="col-3 align-self-center">
                                <div class="d-flex justify-content-center align-items-center thumb-xl bg-light rounded-circle mx-auto">
                                    <i class="iconoir-clock h1 align-self-center mb-0 text-secondary"></i>
                                </div>
                            </div>
                            <!--end col-->
                        </div>
                        <!--end row-->
                       {# <p class="mb-0 text-truncate text-muted mt-3"><span class="text-success">1.5%</span>
                            Weekly Avg.Sessions</p>#}
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end col-->
            <div class="col-md-6 col-lg-4">
                <div class="card">
                    <div class="card-body">
                        <div class="row d-flex justify-content-center border-dashed-bottom pb-3">
                            <div class="col-9">
                                <p class="text-dark mb-0 fw-semibold fs-14">Nombre de Stations-services</p>
                                <h3 class="mt-2 mb-0 fw-bold">{{ stations|length }}</h3>
                            </div>
                            <!--end col-->
                            <div class="col-3 align-self-center">
                                <div class="d-flex justify-content-center align-items-center thumb-xl bg-light rounded-circle mx-auto">
                                    <i class="iconoir-percentage-circle h1 align-self-center mb-0 text-secondary"></i>
                                </div>
                            </div>
                            <!--end col-->
                        </div>
                        <!--end row-->
                      {#  <p class="mb-0 text-truncate text-muted mt-3"><span class="text-danger">8%</span>
                            Up Bounce Rate Weekly</p>#}
                    </div>
                    <!--end card-body-->
                </div>
                <!--end card-->
            </div>
            <!--end col-->
        </div>
        <!--end row-->
        <!--end row-->

        <div class="card card-h-100">
            <div class="card-header">
                <div class="row align-items-center">
                    <div class="col">
                        <h4 class="card-title">Visites des différentes pages</h4>
                    </div>
                    <!--end col-->
                </div>
                <!--end row-->
            </div>
            <!--end card-header-->
            <div class="card-body pt-0">
                <div class="table-responsive browser_users">
                    <table class="table mb-0">
                        <thead class="table-light">
                        <tr>
                            <th class="border-top-0">Clé</th>
                            <th class="border-top-0">Libelle</th>
                            <th class="border-top-0">Clics</th>
                        </tr>
                        <!--end tr-->
                        </thead>
                        <tbody>
                        {% for key, statistique in statistiques %}
                            <tr>
                                <td class="text-truncate text-muted "><h5>{{ key }}</h5></td>
                                <td class="text-truncate text-muted "><h5>{{ key }}</h5></td>
                                <td style="display:block;text-align: right">
                                    <h5><span class="text-success">{{ statistique.clicks }} clics</span></h5>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <!--end table-->
                </div>
                <!--end /div-->
            </div>
            <!--end card-body-->
        </div>
    </div><!-- container -->
    <!--end footer-->
{% endblock %}