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

{% block content %}

    <div class="container-fluid py-4">

        <div>
            <h1 class="display-4">Tableau de bord</h1>
            <p class="lead"> Interface d'administration</p>
        </div>

        <div class="row" style="margin-top:5%;">

            <div class="col-lg-12">

                <div class="row">

                    <div class="col-lg-4 col-sm-6" style="margin-top:5%;">

                        <div class="card  mb-2">
                            <div class="card-header p-3 pt-2">
                                <div class="icon icon-lg icon-shape bg-gradient-primary shadow-dark shadow text-center border-radius-xl mt-n4 position-absolute">
                                    <i class="material-icons opacity-10">woman</i>
                                </div>
                                <div class="text-end pt-1">
                                    <p class="text-sm mb-0 text-capitalize">Mères</p>
                                    <h4 class="mb-0">{{ countSub }}</h4>
                                </div>
                            </div>

                            <hr class="dark horizontal my-0">

                            <div class="card-footer p-3">
                                <p class="mb-0">
                                    <span class="text-success text-sm font-weight-bolder">{{ countCancelSub }} </span>désabonnement(s) pour le mois en cours
                                </p>
                            </div>
                        </div>

                    </div>


                    <div class="col-lg-4 col-sm-6" style="margin-top:5%;">

                        <div class="card  mb-2">
                            <div class="card-header p-3 pt-2">
                                <div class="icon icon-lg icon-shape bg-gradient-warning shadow-primary shadow text-center border-radius-xl mt-n4 position-absolute">
                                    <i class="material-icons opacity-10">child_care</i>
                                </div>
                                <div class="text-end pt-1">
                                    <p class="text-sm mb-0 text-capitalize">Bébés</p>
                                    <h4 class="mb-0">{{ countBabies }}</h4>
                                </div>
                            </div>

                            <hr class="dark horizontal my-0">

                            <div class="card-footer p-3">
                                <p class="mb-0">
                                    <span class="text-success text-sm font-weight-bolder">{{ birthBabies|length }} </span>anniversaire(s)
                                </p>
                            </div>
                        </div>
                    
                    </div>

                    <div class="col-lg-4 col-sm-6" style="margin-top:5%;">

                        <div class="card  mb-2">
                            <div class="card-header p-3 pt-2">
                                <div class="icon icon-lg icon-shape bg-gradient-info shadow-dark shadow text-center border-radius-xl mt-n4 position-absolute">
                                    <i class="material-icons opacity-10">newspaper</i>
                                </div>
                                <div class="text-end pt-1">
                                    <p class="text-sm mb-0 text-capitalize">News</p>
                                    <h4 class="mb-0">{{ countNews }}</h4>
                                </div>
                            </div>

                            <hr class="dark horizontal my-0">

                            <div class="card-footer p-3">
                                <p class="mb-0">
                                    Dernier ajout :<span class="text-success text-sm font-weight-bolder"> {{ lastNews.title }} </span>
                                </p>
                            </div>
                        </div>

                    </div>

                </div>


                <div class="row" style="margin-top:5%;">


                    <div class="col-lg-4 col-sm-6" style="margin-top:5%;">

                        <div class="card  mb-2">
                            <div class="card-header p-3 pt-2">
                                <div class="icon icon-lg icon-shape bg-gradient-info shadow-primary shadow text-center border-radius-xl mt-n4 position-absolute">
                                    <i class="material-icons opacity-10">chat</i>
                                </div>
                                <div class="text-end pt-1">
                                    <p class="text-sm mb-0 text-capitalize">Messages</p>
                                    <h4 class="mb-0">{{ countMessages }}</h4>
                                </div>
                            </div>

                            <hr class="dark horizontal my-0">

                            <div class="card-footer p-3">
                                <p class="mb-0">
                                    <span class="text-success text-sm font-weight-bolder">{{ countComs }} </span>commentaires
                                </p>
                            </div>
                        </div>

                    </div>

                    <div class="col-lg-4 col-sm-6" style="margin-top:5%;">

                        <div class="card  mb-2">
                            <div class="card-header p-3 pt-2 bg-transparent">
                                <div class="icon icon-lg icon-shape bg-gradient-primary shadow-success text-center border-radius-xl mt-n4 position-absolute">
                                    <i class="material-icons opacity-10">cast_for_education</i>
                                </div>
                                <div class="text-end pt-1">
                                    <p class="text-sm mb-0 text-capitalize ">Contenus</p>
                                    <h4 class="mb-0 ">{{ listCBA|length }}</h4>
                                </div>
                            </div>

                            <hr class="horizontal my-0 dark">

                            <div class="card-footer p-3">
                                <p class="mb-0 ">
                                    Dernier ajout :<span class="text-success text-sm font-weight-bolder"> {{ lastCBA.nameMonth }} </span>
                                </p>
                            </div>
                        </div>

                    </div>

                    <div class="col-lg-4 col-sm-6" style="margin-top:5%;">

                        <div class="card ">
                            <div class="card-header p-3 pt-2 bg-transparent">
                                <div class="icon icon-lg icon-shape bg-gradient-warning shadow-info text-center border-radius-xl mt-n4 position-absolute">
                                    <i class="material-icons opacity-10">store</i>
                                </div>
                                <div class="text-end pt-1">
                                    <p class="text-sm mb-0 text-capitalize ">Ateliers</p>
                                    <h4 class="mb-0 ">{{ countEvent }}</h4>
                                </div>
                            </div>

                            <hr class="horizontal my-0 dark">

                            <div class="card-footer p-3">
                                <span class="text-success text-sm font-weight-bolder">{{ countReplay }} </span>replay(s)
                            </div>
                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="row" style="margin-top:5%;" align="center">
            <div class="col-12">
                <hr style="background-color:black;"/>
            </div>
        </div>

       

    </div>


{% endblock %}