@model Webzine.WebApplication.ViewModels.Accueil.AccueilIndexViewModel
@{
    ViewData["Title"] = "Accueil";
}

<h1>Derniers titres chroniqués</h1>

<div class="container">
    @foreach (var titre in Model.DerniersTitres)
    {
        <div class="row bg-light p-3 mt-3 align-items-center">

            <!-- Image -->
            <div class="col-12 col-md-3 text-center mb-3 mb-md-0">
                <img class="img-fluid img-thumbnail"
                     src="@titre.UrlJaquette"
                     alt="@titre.Libelle"
                     loading="lazy" />
            </div>

            <!-- Contenu -->
            <div class="col-12 col-md-9">

                <!-- Artiste - Titre -->
                <div class="fw-light h4 text-primary">
                    <a asp-action="Index"
                       asp-controller="Artiste"
                       asp-route-nom="@titre.Artiste.Nom">
                        @titre.Artiste.Nom
                    </a>
                    -
                    <a asp-action="Index"
                       asp-controller="Titre"
                       asp-route-id="@titre.IdTitre">
                        @titre.Libelle
                    </a>
                </div>

                <!-- Chronique -->
                <p class="mt-2 mb-3 text-muted">
                    @(titre.Chronique.Length > 200 ? titre.Chronique.Substring(0, 200) + "..." : titre.Chronique)
                </p>

                <!-- Footer -->
                <div class="d-flex flex-wrap align-items-center gap-3">
                    <a asp-action="Index"
                       asp-controller="Titre"
                       asp-route-id="@titre.IdTitre"
                       class="btn btn-primary btn-sm">
                        Lire la suite
                    </a>

                    <div class="d-flex align-items-center text-muted small">
                        <i class="fa-solid fa-calendar me-1"></i>
                        @titre.DateCreation
                    </div>

                    <div class="d-flex align-items-center text-muted small flex-wrap">
                        <i class="fa-solid fa-tags me-2"></i>

                        @foreach (var style in titre.Styles)
                        {
                            <a asp-controller="Titre"
                                   asp-action="Style"
                                   asp-route-id="@style.Libelle"
                                   class="text-decoration-none me-1">
                                @style.Libelle@(style != titre.Styles.Last() ? "," : "")
                            </a>
                        }
                    </div>
                </div>
            </div>
        </div>
    }
    <!-- Bouton -->
    <div class="row justify-content-end">
        <button class="btn btn-secondary col-auto mt-3">
            Titres plus anciens >>
        </button>
    </div>
</div>

<div class="container">
    <h1 class="mt-5">Titres les plus populaires</h1>
    <div class="row g-3">
        @foreach (var titre in Model.TopTitres)
        {
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card h-100">
                    <img class="card-img-top" src="@titre.UrlJaquette" alt="@titre.Album"  loading="lazy" />

                    <div class="card-body">
                        <a asp-controller="Titre" asp-action="Index" asp-route-id="@titre.IdTitre" class="card-link">
                            @titre.Libelle
                        </a>
                        <br />
                        par
                        <a asp-controller="Artiste" asp-action="Index" asp-route-nom="@titre.Artiste.Nom" class="card-link">
                            @titre.Artiste.Nom
                        </a>
                    </div>
                </div>
            </div>
        }
    </div>
</div>