@model  Webzine.WebApplication.ViewModels.Artiste.ArtisteDetailsViewModel;

@{
    ViewData["Title"] = "Artiste";
}


<div class="container">
    <h1>@Model.Nom</h1>
    
    <hr/>

    <p class="lead">@Model.Biographie</p>

    <h2 class="mt-5 mb-4">Albums</h2>
    <hr/>

    @if (!Model.AlbumsGroupes.Any())
{
    <p>Cet artiste n'a pas encore de titres répertoriés.</p>
}
else
{
    @foreach (var groupe in Model.AlbumsGroupes)
    {
        // On récupère le premier titre du groupe pour afficher l'image de l'album
        var premierTitre = groupe.First();

        <div class="row mb-5 align-items-start">
            <div class="col-md-3 mb-3">
                <img src="@premierTitre.UrlJaquette"
                     class="img-fluid shadow-sm rounded border"
                     alt="Pochette de @groupe.Key"
                     loading="lazy" />
            </div>

            <div class="col-md-9">
                <h3 class="h4 pb-2">@groupe.Key</h3>

                <table class="table table-hover table-sm mt-3">
                    <thead class="text-muted">
                        <tr>
                            <th style="width: 80px">Durée</th>
                            <th>Titre</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var titre in groupe)
                        {
                            // Conversion des secondes en format MM:SS
                            var minutes = titre.Duree / 60;
                            var secondes = titre.Duree % 60;
                            var dureeFormatee = $"{minutes}:{secondes:D2}";

                            <tr>
                                <td class="text-secondary font-monospace">@dureeFormatee</td>
                                <td>
                                    <a asp-controller="Titre"
                                       asp-action="Index"
                                       asp-route-id="@titre.IdTitre"
                                       class="text-primary">
                                        @titre.Libelle
                                    </a>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    }
}
</div>