@model Webzine.WebApplication.ViewModels.ArtisteModel

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


<div class="container">
    <h1>@Model.Artiste.Nom</h1>
    
    <hr class="mb-5" />

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

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

    @* On groupe les titres par nom d'album *@
    @{
        var albumsGroupes = Model.Titres
                .OrderBy(t => t.Libelle)  // Trie les titres par ordre alphabétique au sein de chaque groupe futur
                .GroupBy(t => t.Album)    // Groupe par nom d'album
                .OrderBy(g => g.Key);     // Trie les albums par ordre alphabétique (la clé du groupe)    
    }

    @foreach (var groupe in 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" />
            </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>
                                    <span class="text-primary fw-bold" style="cursor:pointer">
                                        @titre.Libelle
                                    </span>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    }
</div>