@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"
               class="text-decoration-none">

                <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 class="text-primary">
                        @Model.ArtistCount
                    </h3>

                    <p class="text-primary">
                        artistes
                    </p>
                </div>

            </a>
        </div>

        <!-- L'ARTIST LE PLUS CHRONICLED -->
        <div class="col-md-4">
            <a asp-area=""
               asp-controller="Artiste"
               asp-route-nom="@Model.MostChronicledArtistName"
               class="text-decoration-none">

                <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 class="text-primary">
                        @Model.MostChronicledArtistName
                    </h3>

                    <p class="text-primary">
                        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.TopArtistAlbumsName"
               class="text-decoration-none">

                <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 class="text-primary">
                        @Model.TopArtistAlbumsName
                    </h3>

                    <p class="text-primary">
                        artiste avec le plus d'albums distincts
                    </p>
                </div>

            </a>
        </div>

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

                <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 class="text-primary">
                        @Model.BiographyCount
                    </h3>

                    <p class="text-primary">
                        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.MostPlayedTrackId"
               class="text-decoration-none">

                <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 class="text-primary">
                        @Model.MostPlayedTrack
                    </h4>

                    <p class="text-primary">
                        titre le plus lu
                    </p>
                </div>

            </a>
        </div>

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

                <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 class="text-primary">
                        @Model.TrackCount
                    </h3>

                    <p class="text-primary">
                        titres
                    </p>
                </div>

            </a>
        </div>

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

                <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 class="text-primary">
                        @Model.GenreCount
                    </h3>

                    <p class="text-primary">
                        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.TotalPlays
                </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.TotalLikes
                </h3>

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

    </div>

</div>