exciting-aftermath/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor

@page "/pokemonsleep/rate-pokemon"

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

@attribute [StreamRendering]
@rendermode InteractiveServer

<PageTitle>Rate Pokémon</PageTitle>

<PokemonHeader />

@if (PokemonList == null || NatureList == null || SubskillList == null)
{
    <p>Loading...</p>
}
else
{
    <div class="w-50 mt-5 m-auto rate-container bg-info">

        <div class="card-header bg-secondary bg-gradient ml-0 py-3">
            <div class="row">
                <div class="w-100 text-center">
                    <h2 class="text-info">Pokémon Rater</h2>
                </div>
            </div>
        </div>

        <div class="card-body p-4 w-100 row">
            <!-- Section 1: Pokemon Selection -->
            <div class="d-flex row">
                <div class="col w-50 h-100">
                    <div class="position-relative pb-3" >
                        <input type="text"
                               class="form-control form-control-lg"
                               @bind="PokemonSearchTerm"
                               placeholder="Search Pokémon..."
                               @oninput="OnSearchTextChanged"
                               style="max-width:50%; min-width:50%;" />

                        @if (FilteredPokemonList.Any() && !string.IsNullOrWhiteSpace(PokemonSearchTerm))
                        {
                            <ul class="list-group position-absolute w-100" style="z-index: 1000; max-height: 200px; overflow-y: auto;">
                                @foreach (var pokemon in FilteredPokemonList)
                                {
                                    <li class="list-group-item list-group-item-action" @onclick="() => SelectPokemon(pokemon)">
                                        @if (pokemon.IsVariation)
                                        {
                                            @($"{pokemon.PokemonId} {pokemon.VariationName} {pokemon.PokemonName}")
                                        }
                                        else
                                        {
                                            @($"{pokemon.PokemonId} {pokemon.PokemonName}")
                                        }
                                    </li>
                                }
                            </ul>
                        }
                    </div>
                    @if(SelectedPokemon != null)
                    {
                        <PokemonCard Pokemon="SelectedPokemon" />
                    }
                </div>
                @if(SelectedPokemon != null)
                {
                    <div class="col w-75 h-100">
                        <h4 class="mb-3">Select Nature & Subskills</h4>

                        <!-- Nature -->
                        <div class="row">
                            <div class="col-12">
                                <label>Select Nature</label>
                                <select class="form-control form-control-lg mb-2" @bind="SelectedNatureId">
                                    <option value="" disabled>Choose Nature...</option>
                                    @foreach (var nature in NatureList)
                                    {
                                        <option value="@nature.Id">@nature.Nature</option>
                                    }
                                </select>
                            </div>
                        </div>
                        <!-- Subskills -->
                             <div class="row">
                                 <!-- Subskill 1 -->
                                 <div class="col-4">
                                     <label for="subskillSelect1">Select Level 10 Subskill</label>
                                     <select id="subskillSelect1" class="form-control form-control mb-2" @bind="subskillSelect1">
                                         <option value="" disabled selected>Choose Subskill...</option>
                                         @foreach (var subskill in SubskillList)
                                         {
                                             <option value="@subskill.Id">@subskill.SubSkill</option>
                                         }
                                     </select>
                                 </div>
                                 <!-- Subskill 2 -->
                                 <div class="col-4">
                                     <label for="subskillSelect2">Select Level 25 Subskill</label>
                                     <select id="subskillSelect2" class="form-control form-control mb-2" @bind="subskillSelect2">
                                         <option value="" disabled selected>Choose Subskill...</option>
                                         @foreach (var subskill in SubskillList)
                                         {
                                             <option value="@subskill.Id">@subskill.SubSkill</option>
                                         }
                                     </select>
                                 </div>
                                 <!-- Subskill 3 -->
                                 <div class="col-4">
                                     <label for="subskillSelect3">Select Level 50 Subskill</label>
                                     <select id="subskillSelect3" class="form-control form-control mb-2" @bind="subskillSelect3">
                                         <option value="" disabled selected>Choose Subskill...</option>
                                         @foreach (var subskill in SubskillList)
                                         {
                                             <option value="@subskill.Id">@subskill.SubSkill</option>
                                         }
                                     </select>
                                 </div>
                             </div>
                             <div class="row">
                                 <!-- Subskill 4 -->
                                 <div class="col-4">
                                     <label for="subskillSelect4">Select Level 75 Subskill</label>
                                     <select id="subskillSelect4" disabled class="form-control form-control mb-2" @bind="subskillSelect4">
                                         <option value="" disabled selected>Choose Subskill...</option>
                                         @foreach (var subskill in SubskillList)
                                         {
                                             <option value="@subskill.Id">@subskill.SubSkill</option>
                                         }
                                     </select>
                                 </div>
                                 <!-- Subskill 5 -->
                                 <div class="col-4">
                                     <label for="subskillSelect5">Select Level 100 Subskill</label>
                                     <select id="subskillSelect5" disabled class="form-control form-control mb-2" @bind="subskillSelect5">
                                         <option value="" disabled selected>Choose Subskill...</option>
                                         @foreach (var subskill in SubskillList)
                                         {
                                             <option value="@subskill.Id">@subskill.SubSkill</option>
                                         }
                                     </select>
                                 </div>
                             </div>

                    </div>
                }
             
            </div>
            @if(SelectedPokemon != null)
            {
            <div class="row">
                <div class="d-flex justify-content-between align-items-center mt-3 ">
                    <button class="btn btn-primary mx-2" @onclick="CalculateScore">Calculate Final Score</button>
                    <h4>Final Score: <span class="finalScore" style="background-color: @ScoreBackgroundColor">@FinalScore</span></h4>
                </div>
            </div>
            }
            
        </div>
    </div>
}