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

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

@* TEMPLATE  *@
@* <div class="container">
    <div class="container bg-light row p-3 mt-3">
        <div class="col-auto">
            <img class="img-thumbnail"
                src="" />
        </div>
        <div class="col">
            <a class="text-primary text-decoration-none fw-light h4">Justice - D.A.N.C.E</a>
            <p class="mt-2 mb-3 text-muted ">
                Insérer texte
            </p>
            <div class="d-flex flex-wrap align-items-center gap-3">
                <a 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"></i> 
                    Date :
                    17/12/2022 11:08:08
                </div>

                <div class="d-flex align-items-center text-muted small">
                    <i class="fa-solid fa-tags"></i>
                    <a class="text-decoration-none m-1">Insérer style</a>
                </div>
            </div>
        </div>
    </div>
</div> *@

<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;"
                     @* UrlJaquette *@
                     src="@titre.UrlJaquette" />
            </div>
            <div class="col">
                @* Artiste - Titre @titre.Artiste - @titre.Libelle*@
                <a class="text-primary text-decoration-none fw-light h4">@titre.Artiste.Nom - @titre.Libelle</a>
                @* Chronique *@
                <p class="mt-2 mb-3 text-muted ">
                    @titre.Chronique
                </p>
                <div class="d-flex flex-wrap align-items-center gap-3">
                    <a 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 class="text-decoration-none m-1">STYLE</a>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

<div class="row justify-content-end">
    <button class="btn btn-secondary col-auto mt-3">Titres plus anciens >></button>
</div>

<h1 class="mt-5">Titres les plus populaires</h1>

@* TEMPLATE *@
@* <div class="container">
    <div class="row">
        <div class="card col m-1" style="width: 18rem;">
            <img class="card-img-top"
                 src="" alt="Alternate Text" />

            <div class="card-body">
                <a class="card-link" href="#">Album</a><br />
                par <a class="card-link">Artiste</a>
            </div>
        </div>
    </div>
</div> *@
<div class="container">
    <div class="row">
    @foreach (var titre in Model.TopTitres)
    {
        <div class="card col-4 m-1" style="width: 18rem;">
            <img class="card-img-top"
            src="@titre.UrlJaquette" />

            <div class="card-body">
                <a class="card-link" href="#">@titre.Album</a><br />
                par <a class="card-link">@titre.Artiste.Nom</a>
            </div>
        </div>
    }
    </div>

</div>