@page "/"
@using GameIdeas.BlazorApp.Pages.Games.Components
@using GameIdeas.BlazorApp.Pages.Games.Filter
@using GameIdeas.BlazorApp.Shared.Components
@using GameIdeas.BlazorApp.Shared.Components.ButtonAdd
@using GameIdeas.BlazorApp.Shared.Components.Header
@using GameIdeas.BlazorApp.Shared.Components.Popup
@using GameIdeas.Resources

@layout MainLayout

<PageTitle>@ResourcesKey.GamesIdeas</PageTitle>

<HeaderGameIdeas>
    <GameFilter Categories="Categories"
                @bind-DisplayType=DisplayType
                Value=GameFilter ValueChanged="HandleFilterChanged" />
    <ButtonAdd AddTypeChanged="HandleAddClicked" />
</HeaderGameIdeas>

<div class="container">
    <div class="content">
        @if (!IsLoading)
        {
            @foreach (var game in GamesDto)
            {
                <GameRow GameDto="game" />
            }
        }
        else
        {
            @for (int i = 0; i < 20; i++)
            {
                <GameRowSkeleton />
            }
        }

    </div>

    <AdvancedGameFilter GameFilter=GameFilter GameFilterChanged="HandleFilterChanged" Categories="Categories" />
</div>

<Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked" Closable=false>
    <GameCreationForm Categories="Categories" OnSubmit="() => HandleFetchDatas()" />
</Popup>