@page "/cuts"

<PageTitle>DeepDrft Cuts</PageTitle>

<div>
    <MudContainer MaxWidth="MaxWidth.Large" Class="albums-view-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="album-card-center">
                            <MudSkeleton Width="200px" Height="200px" SkeletonType="SkeletonType.Rectangle"/>
                        </div>
                    </MudItem>
                }
            </MudGrid>
        }
        else if (_albums.Count == 0)
        {
            <div class="albums-empty">
                <MudText Typo="Typo.h6">No albums yet</MudText>
            </div>
        }
        else
        {
            <MudGrid Spacing="6" Justify="Justify.Center">
                @foreach (var album in _albums)
                {
                    <MudItem xs="12" sm="6" md="4" lg="3" xl="3">
                        <div class="album-card-center">
                            <div class="album-card"
                                 role="button"
                                 tabindex="0"
                                 @onclick="@(() => OpenAlbum(album))">
                                @if (!string.IsNullOrEmpty(album.ImagePath))
                                {
                                    <div class="album-card-cover"
                                         style="background-image: url('api/image/@Uri.EscapeDataString(album.ImagePath)');">
                                    </div>
                                }
                                else
                                {
                                    <div class="album-card-cover album-card-cover--fallback"></div>
                                }

                                <div class="album-card-body">
                                    <MudText Typo="Typo.subtitle1" Class="album-card-title text-truncate">
                                        @album.Title
                                    </MudText>
                                    <MudText Typo="Typo.caption" Class="album-card-count">
                                        @album.TrackCount @(album.TrackCount == 1 ? "track" : "tracks")
                                    </MudText>
                                </div>
                            </div>
                        </div>
                    </MudItem>
                }
            </MudGrid>
        }
    </MudContainer>
</div>