@model Webzine.WebApplication.Areas.Administration.ViewModels.DashboardViewModel

<h1 class="mb-4">Tableau de bord</h1>

<hr/>

<div class="container">

    <div class="row g-4 text-center">

        <!-- ARTISTS -->
        <div class="col-md-4">
            <a asp-area="Administration"
               asp-controller="Artiste">
                <div class="ratio ratio-4x3">

                    <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
                        <i class="fa fa-users fa-5x text-primary mb-3"></i>

                        <h2>
                            @Model.NombreArtistes 
                        </h2>
                        <p>
                            artistes
                        </p>
                   </div>
                </div>
            </a>
        </div>

        <!-- L'ARTIST LE PLUS CHRONIQUE -->
        <div class="col-md-4">
            <a asp-area=""
               asp-controller="Artiste"
               asp-route-nom="@Model.ArtisteLePlusChronique">
               <div class="ratio ratio-4x3">
                    <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
                        <i class="fa fa-user fa-5x text-primary mb-3"></i>

                        <h2>
                            @Model.ArtisteLePlusChronique
                        </h2>

                        <p>artiste le plus chroniqué</p>
                    </div>
                </div>
            </a>
        </div>

        <!-- LE PLUS D'ALBUMS -->
        <div class="col-md-4">
            <a asp-area=""
               asp-controller="Artiste"
               asp-route-nom="@Model.AlbumLePlusChronique">
             <div class="ratio ratio-4x3">

                <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
                    <i class="fa fa-trophy fa-5x text-primary mb-3"></i>

                    <h2>
                        @Model.AlbumLePlusChronique
                    </h2>

                    <p>
                        artiste avec le plus d'albums distincts
                    </p>
                </div>
            </div>
            </a>
        </div>

        <!-- BIOGRAPHIES -->
        <div class="col-md-4">
            <a asp-area="Administration"
               asp-controller="Titre">
                <div class="ratio ratio-4x3">

                <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
                    <i class="fa fa-book fa-5x text-primary mb-3"></i>

                    <h2>
                        @Model.NombreBiographies
                    </h2>

                    <p>
                        biographies d'artistes
                    </p>
                </div>
                </div>
            </a>
        </div>

        <!-- LA TRACK AVEC LE PLUS D'ÉCOUTE -->
        <div class="col-md-4">
            <a asp-area=""
               asp-controller="Titre"
               asp-action="Details"
                asp-route-id="@Model.IdMusiqueLaPlusJouee">
                <div class="ratio ratio-4x3">

                <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
                    <i class="fa fa-compact-disc fa-5x text-primary mb-3"></i>

                    <h2>
                        @Model.MusiqueLaPlusJouee
                    </h2>

                    <p>
                        titre le plus lu
                    </p>
                </div>
                </div>
            </a>
        </div>

        <!-- TITRE NOMBRE -->
        <div class="col-md-4">
            <a asp-area="Administration"
               asp-controller="Titre">
                <div class="ratio ratio-4x3">

                <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
                    <i class="fa fa-music fa-5x text-primary mb-3"></i>

                    <h2>
                        @Model.NombreTitres
                    </h2>

                    <p>
                        titres
                    </p>
                </div>
                </div>
            </a>
        </div>

        <!-- GENRES -->
        <div class="col-md-4">
            <a asp-area="Administration"
               asp-controller="Style">
                <div class="ratio ratio-4x3">

                <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center text-primary">
                    <i class="fa fa-tags fa-5x text-primary mb-3"></i>

                    <h2>
                        @Model.NombreGenres
                    </h2>

                    <p>
                        styles de musique
                    </p>
                </div>
                </div>
            </a>
        </div>

        <!-- NOMBRE DE LECTURES -->
        <div class="col-md-4">
            <div class="ratio ratio-4x3">

                <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center">
                    <i class="fa fa-eye fa-5x text-dark mb-3"></i>

                    <h2>
                        @Model.NombreLectures
                    </h2>

                    <p>
                        lectures
                    </p>
                </div>
            </div>
        </div>

        <!-- TOTAL LIKES -->
        <div class="col-md-4">
            <div class="ratio ratio-4x3">

            <div class="py-5 bg-light rounded-3 d-flex flex-column justify-content-center align-items-center">
                <i class="fa fa-thumbs-up fa-5x text-dark mb-3"></i>

                <h2>
                    @Model.NombreLikes
                </h2>

                <p>
                    likes
                </p>
            </div>
            </div>
        </div>

    </div>

</div>