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

@layout MainLayout

<PageTitle>@ResourcesKey.GamesIdeas</PageTitle>

<GameHeader AddTypeChanged="HandleAddClicked">
    <GameFilter Categories="Categories"
    @bind-DisplayType=DisplayType
    @bind-Value=GameFilter/>
</GameHeader>

<div class="container">
    <div class="content">
        @foreach (var game in GamesDto)
        {
            <GameRow GameDto="game" />
        }
    </div>

    <AdvancedGameFilter @bind-GameFilter=GameFilter Categories="Categories" />
</div>

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