@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="card shadow-sm p-4 bg-light h-100 dashboard-card">
                    <i class="fa fa-users fa-3x text-primary mb-3"></i>

                    <h3>
                        @Model.NombreArtistes 
                    </h3>

                    <p>
                        artistes
                    </p>
                </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="card shadow-sm p-4 bg-light h-100 dashboard-card">
                    <i class="fa fa-user fa-3x text-primary mb-3"></i>

                    <h3>
                        @Model.ArtisteLePlusChronique
                    </h3>

                    <p>artiste le plus chroniqué</p>
                </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="card shadow-sm p-4 bg-light h-100 dashboard-card">
                    <i class="fa fa-trophy fa-3x text-primary mb-3"></i>

                    <h3>
                        @Model.AlbumLePlusChronique
                    </h3>

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

            </a>
        </div>

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

                <div class="card shadow-sm p-4 bg-light h-100 dashboard-card">
                    <i class="fa fa-book fa-3x text-primary mb-3"></i>

                    <h3>
                        @Model.NombreBiographies
                    </h3>

                    <p>
                        biographies d'artistes
                    </p>
                </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="card shadow-sm p-4 bg-light h-100 dashboard-card">
                    <i class="fa fa-compact-disc fa-3x text-primary mb-3"></i>

                    <h4>
                        @Model.MusiqueLaPlusJouee
                    </h4>

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

            </a>
        </div>

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

                <div class="card shadow-sm p-4 bg-light h-100 dashboard-card">
                    <i class="fa fa-music fa-3x text-primary mb-3"></i>

                    <h3>
                        @Model.NombreTitres
                    </h3>

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

            </a>
        </div>

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

                <div class="card shadow-sm p-4 bg-light h-100 dashboard-card">
                    <i class="fa fa-tags fa-3x text-primary mb-3"></i>

                    <h3>
                        @Model.NombreGenres
                    </h3>

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

            </a>
        </div>

        <!-- NOMBRE DE LECTURES -->
        <div class="col-md-4">
            <div class="card shadow-sm p-4 bg-light h-100">
                <i class="fa fa-eye fa-3x text-dark mb-3"></i>

                <h3>
                    @Model.NombreLectures
                </h3>

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

        <!-- TOTAL LIKES -->
        <div class="col-md-4">
            <div class="card shadow-sm p-4 bg-light h-100">
                <i class="fa fa-thumbs-up fa-3x text-dark mb-3"></i>

                <h3>
                    @Model.NombreLikes
                </h3>

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

    </div>

</div>