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

{% block page_title %}Administration | Sortir{% endblock %}

{% block content_title %}Administration{% endblock %}

{% block main %}

    <style>
        .order-card {
            color: #fff;
        }

        .bg-c-blue {
            background: linear-gradient(45deg,#4099ff,#73b4ff);
        }

        .bg-c-green {
            background: linear-gradient(45deg,#2ed8b6,#59e0c5);
        }

        .bg-c-yellow {
            background: linear-gradient(45deg,#FFB64D,#ffcb80);
        }

        .bg-c-pink {
            background: linear-gradient(45deg,#FF5370,#ff869a);
        }


        .card {
            border-radius: 5px;
            -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
            box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
            border: none;
            margin-bottom: 30px;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        .card .card-block {
            padding: 25px;
        }

        .order-card i {
            font-size: 26px;
        }

        .f-left {
            float: left;
        }

        .f-right {
            float: right;
        }
    </style>

    <div class="container">
        <div class="row">
            <div class="col-md-4 col-xl-3">
                <div class="card bg-c-blue order-card">
                    <div class="card-block">
                        <h6 class="m-b-20">Utilisateurs actifs</h6>
                        <h2 class="text-right"><i class="fas fa-user f-left"></i><span>{{ numberUserActive }}</span></h2>
                        <p class="m-b-0">Comptes désactivés<span class="f-right">{{ numberUserDisable }}</span></p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 col-xl-3">
                <div class="card bg-c-pink order-card">
                    <div class="card-block">
                        <h6 class="m-b-20">Nombre de groupes</h6>
                        <h2 class="text-right"><i class="fa fa-group f-left"></i><span>{{ numberGroup }}</span></h2>
                        <p class="m-b-0">Incroyable<span class="f-right"></span></p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 col-xl-3">
                <div class="card bg-c-green order-card">
                    <div class="card-block">
                        <h6 class="m-b-20">Prochaine sorties</h6>
                        <h2 class="text-right"><i class="fa fa-person-hiking f-left"></i><span>{{ numberOutingNotStarted }}</span></h2>
                        <p class="m-b-0">Sorties terminées<span class="f-right">{{ numberOutingFinished }}</span></p>
                    </div>
                </div>
            </div>

            <div class="col-md-4 col-xl-3">
                <div class="card bg-c-yellow order-card">
                    <div class="card-block">
                        <h6 class="m-b-20">Total participations</h6>
                        <h2 class="text-right"><i class="fa fa-champagne-glasses f-left"></i><span>{{ numberRegistered }}</span></h2>
                        <p class="m-b-0">Sur l'ensemble des sorties<span class="f-right"></span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}