@namespace DeepDrftPublic.Client.Controls

@* Card grid of releases that open their own detail page (/{DetailRoute}/{id}). Shared by the
   Sessions and Mixes browse pages. Cuts intentionally do not use this — they open the track
   gallery filtered by album, a different navigation target. Fully controlled by the parent:
   loading and item state are passed in. *@

<div>
    <MudContainer MaxWidth="MaxWidth.Large" Class="release-gallery-container">
        @if (Loading)
        {
            <MudGrid Spacing="6" Justify="Justify.Center">
                @foreach (var _ in Enumerable.Range(0, 8))
                {
                    <MudItem xs="12" sm="6" md="4" lg="3" xl="3">
                        <div class="release-card-center">
                            <MudSkeleton Width="200px" Height="200px" SkeletonType="SkeletonType.Rectangle"/>
                        </div>
                    </MudItem>
                }
            </MudGrid>
        }
        else if (Releases.Count == 0)
        {
            <div class="release-gallery-empty">
                <MudText Typo="Typo.h6">@EmptyMessage</MudText>
            </div>
        }
        else
        {
            <MudGrid Spacing="6" Justify="Justify.Center">
                @foreach (var release in Releases)
                {
                    <MudItem xs="12" sm="6" md="4" lg="3" xl="3">
                        <div class="release-card-center">
                            <a href="@($"/{DetailRoute}/{release.Id}")" class="release-card-link">
                                <div class="release-card">
                                    @if (!string.IsNullOrEmpty(release.ImagePath))
                                    {
                                        <div class="release-card-cover"
                                             style="background-image: url('api/image/@Uri.EscapeDataString(release.ImagePath)');">
                                        </div>
                                    }
                                    else
                                    {
                                        <div class="release-card-cover release-card-cover--fallback"></div>
                                    }

                                    <div class="release-card-body">
                                        <MudText Typo="Typo.subtitle1" Class="release-card-title text-truncate">
                                            @release.Title
                                        </MudText>
                                        <MudText Typo="Typo.caption" Class="release-card-artist text-truncate">
                                            @release.Artist
                                        </MudText>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </MudItem>
                }
            </MudGrid>
        }
    </MudContainer>
</div>

@code {
    [Parameter] public required IReadOnlyList<DeepDrftModels.DTOs.ReleaseDto> Releases { get; set; }
    [Parameter] public bool Loading { get; set; }

    /// <summary>Route segment for a card's detail page; a card links to /{DetailRoute}/{id}.</summary>
    [Parameter] public required string DetailRoute { get; set; }

    [Parameter] public string EmptyMessage { get; set; } = "Nothing here yet";
}