@page "/genres"

<PageTitle>DeepDrft Genres</PageTitle>

<div>
    <MudContainer MaxWidth="MaxWidth.Medium" Class="genres-view-container">
        @if (_loading)
        {
            <div class="genres-list">
                @foreach (var _ in Enumerable.Range(0, 8))
                {
                    <MudSkeleton Height="48px" Width="100%" Class="mb-2"/>
                }
            </div>
        }
        else if (_genres.Count == 0)
        {
            <div class="genres-empty">
                <MudText Typo="Typo.h6">No genres yet</MudText>
            </div>
        }
        else
        {
            <MudList T="string" Class="genres-list">
                @foreach (var genre in _genres)
                {
                    <MudListItem T="string"
                                 Icon="@Icons.Material.Filled.Category"
                                 OnClick="@(() => OpenGenre(genre.Genre))">
                        <div class="genre-row">
                            <MudText Typo="Typo.subtitle1">@genre.Genre</MudText>
                            <MudText Typo="Typo.caption" Class="genre-count">
                                @genre.TrackCount @(genre.TrackCount == 1 ? "track" : "tracks")
                            </MudText>
                        </div>
                    </MudListItem>
                }
            </MudList>
        }
    </MudContainer>
</div>