@page "/rate-pokemon"

@inject IPokemonService PokemonService
@inject IPokemonNatureService PokemonNatureService
@inject IPokemonSubskillService PokemonSubskillService


@attribute [StreamRendering]
@rendermode InteractiveServer



<PageTitle>Rate Pokémon</PageTitle>

<PokemonHeader />

<div class="mt-4">
    <div class="row">
        @if (PokemonList == null || NatureList == null || SubskillList == null)
        {
            <div class="d-flex justify-content-center align-items-center" style="height: 60vh;">
            <Loading />
            </div>
        }
        else
        {
            <!-- Left Panel: Selector -->
            <div class="col-4">
                <PokemonSelector
                    PokemonList="PokemonList"
                    SelectedPokemon="SelectedPokemon"
                    OnPokemonSelected="SelectPokemon" />
            </div>

            <!-- Center Panel: Pokemon View -->
            <div class="col-4">
                <div class="d-flex justify-content-center align-items-center h-100">

                
                    @if (SelectedPokemon != null)
                    {
                        <PokemonCard Pokemon="SelectedPokemon" />
                    }
                    else
                    {
                        <p class="text-muted">Please select a Pokémon to rate.</p>
                    }
                </div>
            </div>

                
            <!-- Right Panel: Rating View -->
            <div class="col-4">
                <PokemonRatingPanel
                    PokemonToRate="SelectedPokemon"
                    NatureList="NatureList"
                    SubskillList="SubskillList"
                />
            </div>

        }
    </div>
    <hr class="mt-5"/>
</div>