@model Webzine.WebApplication.ViewModels.Titre.TitreDetail

@{
    ViewData["Title"] = Model.Details.Libelle;
}

<div class="container mt-4">

    <div class="mb-3">
        <h2>
            <a asp-area=""
               asp-controller="Artiste"
               asp-action="Index"
               asp-route-nom="@Model.Details.ArtisteNom">@Model.Details.ArtisteNom</a>
            - @Model.Details.Libelle
        </h2>

        <div class="d-flex justify-content-between align-items-center pb-2 mb-3">

            <div class="text-muted small d-flex align-items-center gap-4">

                <!-- Date -->
                <span class="text-dark">
                    <i class="fa fa-calendar me-1"></i>
                    Le @Model.Details.DateSortie.ToString("dd/MM/yyyy 'à' HH:mm")
                </span>

                <!-- Likes -->
                <span>
                    <i class="fa fa-heart text-dark me-1"></i>
                    @Model.Details.NbLikes
                </span>

                <!-- Styles -->
                <span class="text-dark">
                    <i class="fa fa-tags me-1"></i>
                    Styles :

                    @for (int i = 0; i < Model.Details.Styles.Count; i++)
                    {
                        var style = Model.Details.Styles[i];

                        <a class="text-primary fw-semibold"
                           asp-controller="Titre"
                           asp-action="Style"
                           asp-route-style="@style.Libelle">
                            @style.Libelle
                        </a>

                        @if (i < Model.Details.Styles.Count - 1)
                        {
                            <span>, </span>
                        }
                    }
                </span>

            </div>

            <!-- ACTION BUTTONS -->
            <div class="d-flex gap-2">

                <form asp-action="Like" method="post">
                    <input type="hidden" name="IdTitre" value="@Model.Details.IdTitre" />
                    <button type="submit" class="btn btn-outline-primary btn-sm">
                        <i class="fa fa-thumbs-up me-1"></i> Like
                    </button>
                </form>

                <a asp-area="Administration" asp-controller="Titre" asp-action="Edit" asp-route-id="@Model.Details.IdTitre" class="btn text-primary btn-sm">
                    <i class="fa fa-pen-to-square me-1"></i> Editer
                </a>

            </div>

        </div>
    </div>

    <!-- CONTENU -->
    <div class="row mt-4">
        <div class="col-md-8">
            <p class="text-justify">
                @Model.Details.Chronique
            </p>
        </div>

        <div class="col-md-4 text-center">
            <img src="@Model.Details.UrlJaquette"
                 class="img-fluid rounded shadow"
                 alt="Jaquette"
                 loading="lazy"
                 fetchpriority="high" />
        </div>
    </div>

    <!-- LECTEUR -->
    @if (!string.IsNullOrEmpty(Model.Details.UrlEcoute))
    {
        <div class="mt-4">
            <iframe width="100%" height="315"
                    src="@Model.Details.UrlEcoute"
                    title="Lecteur"
                    allowfullscreen>
            </iframe>
        </div>
    }

    <!-- FORMULAIRE COMMENTAIRE -->
    <div class="mt-4 mb-4">
        <div>

            <h4 class="mb-4">Donne ton avis sur le titre</h4>

            <form asp-action="Comment" method="post">
                <input type="hidden" name="IdTitre" value="@Model.Details.IdTitre"/>

                <div class="row mb-3 align-items-center">
                    <label class="col-sm-2 col-form-label">
                        Nom<span class="text-danger">*</span>
                    </label>
                    <div class="col">
                        <input name="Auteur"
                               class="form-control input-full"
                               placeholder="Votre nom"
                               required />
                    </div>
                </div>

                <div class="row mb-3 align-items-start">
                    <label class="col-sm-2 col-form-label">
                        Commentaire<span class="text-danger">*</span>
                    </label>
                    <div class="col">
                        <textarea name="Contenu"
                      rows="3"
                      class="form-control input-full"
                      placeholder="Votre commentaire..."
                      required></textarea>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6 offset-sm-2">
                        <button type="submit" class="btn btn-primary">
                            Envoyer
                        </button>
                    </div>
                </div>
            </form>

        </div>
    </div>


    <!-- COMMENTAIRES -->
    <div class="mt-4">

        <h4 class="mb-4">Commentaires</h4>

        @if (Model.Details.Commentaires != null && Model.Details.Commentaires.Any())
        {
            foreach (var comment in Model.Details.Commentaires.OrderByDescending(c => c.DateCreation))
            {
                <div class="row mb-4">

                    <div class="col-sm-1"></div>

                    <div class="col-sm-6 d-flex">
                        <img src="/images/avatar.png"
                             width="50"
                             height="50"
                             class="rounded-circle me-3 shadow-sm"
                             alt="avatar" />

                        <div>
                            <strong>@comment.Auteur</strong>,
                            <span class="text-muted small">
                                le @comment.DateCreation.ToString("dd/MM/yyyy HH:mm")
                            </span>

                            <p class="mb-0">@comment.Contenu</p>
                        </div>
                    </div>

                </div>
            }
        }
        else
        {
            <div class="row">
                <div class="col-sm-6 offset-sm-2">
                    <p class="text-muted">Aucun commentaire pour le moment.</p>
                </div>
            </div>
        }

    </div>

</div>