@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="container bg-light row p-3 mt-3">
            <div class="col-auto">
                <img class="img-thumbnail img-fluid"
                     style="max-width:200px;" @* TODO à virer pour que ça soit responsive *@
                     @* UrlJaquette *@
                     src="@titre.UrlJaquette" />
            </div>
            <div class="col">
                @* Artiste - Titre @titre.Artiste - @titre.Libelle*@
                <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="Details"
                       asp-controller="Titre"
                       asp-route-id="@titre.IdTitre">
                        @titre.Libelle
                    </a>
                </div>
                @* Chronique *@
                <p class="mt-2 mb-3 text-muted ">
                    @titre.Chronique
                </p>
                <div class="d-flex flex-wrap align-items-center gap-3">
                    <a asp-action="Details" 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>
                        @* Date de création  *@
                        @titre.DateCreation
                    </div>

                    <div class="d-flex align-items-center text-muted small">
                        <i class="fa-solid fa-tags"></i>
                        @* Style *@
                        <a asp-controller="Titre" asp-action="Style" asp-route-id="Pop" class="text-decoration-none m-1">Pop</a>
                    </div>
                </div>
            </div>
        </div>
    }
    <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" />

                    <div class="card-body">
                        <a asp-controller="Titre" asp-action="Details" asp-route-id="@titre.IdTitre" class="card-link">
                            @titre.Album
                        </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>