{% extends 'layouts/admin/admin.html.twig' %}

{% block title %}Administration | {{ app.user.username }}{% endblock %}
{% block stylesheets %}
    <style>
        h2.mb-2{
            font-size: 17px!important;
        }
    </style>
{% endblock %}
{% block body %}
    <h4 class="font-weight-bold py-3 mb-0">Dashboard</h4>
    <div class="text-muted small mt-0 mb-4 d-block breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#"><i class="feather icon-home"></i></a></li>
            <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
            <li class="breadcrumb-item active">{{ title }}</li>
        </ol>
    </div>
    <div class="row">
        <!-- Staustic card 8 Start -->
        <div class="col-xl-3 col-md-6">
            <div class="card bg-pattern-3-dark mb-4">
                <div class="card-body text-center">
                    <i class="feather icon-mail bg-primary ui-rounded-icon"></i>
                    <h4 class="mt-2"><span class="text-primary">{{ countAbonne }}</span> Abonnés</h4>
                    <p class="mb-3">Gestion des abonnés</p>
                    <a href="{{ path('admin.abonnes.index') }}" class="btn btn-primary btn-sm btn-round">Voir la liste</a>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-pattern-3-dark mb-4">
                <div class="card-body text-center">
                    <i class="feather icon-users bg-success ui-rounded-icon"></i>
                    <h4 class="mt-2"><span class="text-success">0</span> Utilisateurs</h4>
                    <p class="mb-3">Gestion des utilisateurs</p>
                    <a href="javascript:" class="btn btn-success btn-sm btn-round">Voir la liste</a>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-pattern-3-dark mb-4">
                <div class="card-body text-center">
                    <i class="feather icon-file-text bg-danger ui-rounded-icon"></i>
                    <h4 class="mt-2"><span class="text-danger">{{ countReservation }}</span> Reservations</h4>
                    <p class="mb-3">Gestion des reservations</p>
                    <a href="{{ path('admin.reservations.index') }}" class="btn btn-danger btn-sm btn-round">Voir la liste</a>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-pattern-3-dark mb-4">
                <div class="card-body text-center">
                    <i class="feather icon-phone bg-warning ui-rounded-icon"></i>
                    <h4 class="mt-2"><span class="text-warning">{{ countContact }}</span> Contacts</h4>
                    <p class="mb-3">Gestion des contacts</p>
                    <button class="btn btn-warning btn-sm btn-round text-white">Voir la liste</button>
                </div>
            </div>
        </div>
        <!-- Staustic card 8 end -->
    </div>
    {{ tabs_home() }}
{% endblock %}