@inject IPokemonService PokemonService
@inject IHttpClientFactory ClientFactory


@if(formUse == "ADD")
{
    <div class="pokemon-form-container m-auto bg-info border border-5 border-info-subtle rounded-4 p-3">
        <EditForm class="col" Model="NewPokemon">
            <DataAnnotationsValidator />

            <div class="bg-primary-subtle rounded"><p class="fs-3 fw-light text-center card-title">New Pokemon</p></div>

            <!-- Pokemon Number and Name -->
            <div class="row mt-1">
                <div class="col input-group mb-2">
                    <span class="input-group-text text-sm-center rounded-start">#</span>
                    <InputNumber min="1"
                                 placeholder="Pokedex #"
                                 id="PokemonId"
                                 @bind-Value="NewPokemon.PokemonId"
                                 @onchange="@SendPokemon"
                                 class="form-control "
                                 type="number" />
                    <InputText placeholder="Pokemon Name"
                               id="PokemonName"
                               @bind-Value="NewPokemon.PokemonName"
                               @onchange="@SendPokemon"
                               class="form-control w-50 rounded-end" />
                </div>
            </div>

            <!-- Variation Check -->
            <div class="d-flex flex-row justify-content-start input-group ">
                <InputCheckbox id="IsVariation"
                               @bind-Value="NewPokemon.IsVariation"
                               @onclick="@Toggle"
                               @onchange="@SendPokemon"
                               class="form-check-input p-3 rounded" />
                <span class="input-group-text ms-1 @GetRoundingClass()">Variation?</span>
                <InputText placeholder="How So?"
                           id="VariationName"
                           @bind-Value="NewPokemon.VariationName"
                           @onchange="@SendPokemon"
                           class="form-control rounded-end"
                           hidden="@HideLabel" />
            </div>

            <!-- <br> -->
            <div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>

            <!-- Pokemon Type -->
            <div class="row mb-2">
                <div class="input-group m-auto">
                    <span for="PokemonType" class="input-group-text rounded-start">Pokemon Type</span>
                    <InputSelect id="PokemonType" @bind-Value="NewPokemon.PokemonType" @onchange="@SendPokemon" class="form-select rounded-end">
                        <option disabled value="" selected>Select...</option>
                        @foreach (var pt in PokemonTypes)
                        {
                            <option value="@pt">@pt</option>
                        }
                    </InputSelect>
                </div>

            </div>

            <!-- Pokemon Sleep Type, Specialty -->
            <div class="row mb-3 mx-0">
                <!-- Sleep Type -->
                <div class="col ps-0 pe-1">
                    <div class="row input-group m-auto">
                        <span for="SleepType" class="input-group-text rounded-top">Sleep Type</span>
                    </div>
                    <div class="row input-group m-auto">
                        <InputSelect id="SleepType" @bind-Value="NewPokemon.SleepType" @onchange="@SendPokemon" class="form-select rounded-bottom">
                            <option disabled value="" selected>Select...</option>
                            @foreach (var st in SleepTypes)
                            {
                                <option value="@st">@st</option>
                            }
                        </InputSelect>
                    </div>
                </div>
                <!-- Speciality -->
                <div class="col ps-1 pe-0">
                    <div class="row input-group m-auto">
                        <span for="Speciality" class="input-group-text rounded-top">Specialty</span>
                    </div>
                    <div class="row input-group m-auto">
                        <InputSelect id="Speciality" @bind-Value="NewPokemon.Speciality" @onchange="@SendPokemon" class="form-select rounded-bottom">
                            <option disabled value="" selected>Select...</option>
                            @foreach (var sp in Specialities)
                            {
                                <option value="@sp">@sp</option>
                            }
                        </InputSelect>
                    </div>
                </div>
            </div>

            <!-- Pokemon Ingredients -->
            <div class="row mb-3 mx-0">
                <!-- Ingredient 1 -->
                <div class="col ps-0 pe-1">
                    <div class="row input-group m-auto">
                        <span for="Ingredient1" class="input-group-text rounded-top">Ingredient 1</span>
                    </div>
                    <div class="row input-group m-auto">
                        <InputSelect id="Ingredient1" @bind-Value="NewPokemon.Ingredient1" @onchange="@SendPokemon" class="form-select rounded-bottom">
                            <option disabled value="" selected>Select...</option>
                            @foreach (var ingredient in Ingredients)
                            {
                                <option value="@ingredient.Ing">@ingredient.Ing</option>
                            }
                        </InputSelect>
                    </div>
                </div>
            </div>


            <!-- <br> -->
            <div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>

            <!-- Images -->
            <div class="row mb-2">
                <div class="input-group m-auto">
                    <span for="ImageUrl" class="input-group-text rounded-start">Base Image URL</span>
                    <InputText id="ImageUrl" @bind-Value="NewPokemon.PokemonImageUrl" @onchange="@SendPokemon" class="form-control rounded-end" />
                </div>
            </div>
            <div class="row mb-2">
                <div class="input-group m-auto">
                    <span for="ShinyImageUrl" class="input-group-text rounded-start">Shiny Image URL</span>
                    <InputText id="ShinyImageUrl" @bind-Value="NewPokemon.PokemonShinyImageUrl" @onchange="@SendPokemon" class="form-control rounded-end" />
                </div>
            </div>

            <!-- Flavor -->
            <div class="row mb-2">
                <div class="input-group m-auto">
                    <span for="FlavorText" class="input-group-text rounded-start">Flavor Text</span>
                    <InputText id="FlavorText" @bind-Value="NewPokemon.FlavorText" @onchange="@SendPokemon" class="form-control rounded-end" />
                </div>
            </div>

            <!-- <br> -->
            <div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>

            @if (showErrors && !IsComplete)
            {
                <div class="alert alert-warning mt-2">
                    Please complete: @string.Join(", ", MissingFields())
                </div>
            }

            <div class="d-flex mt-3 justify-content-center gap-3">
                <button type="button"
                        class="btn btn-success rounded rounded-5 p-1"
                        @onclick="@SendPokemon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
                        <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4" />
                    </svg>

                </button>
                @if (mostRecentForm)
                {
                    <button type="button"
                            class="btn btn-danger rounded rounded-5 p-1"
                            @onclick="@HandleRemove">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
                            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
                        </svg>
                    </button>
                }
                else
                {
                    <button type="button"
                            class="btn btn-danger rounded rounded-5 p-1"
                            
                            disabled>
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
                            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
                        </svg>
                    </button>
                }
            </div>
        </EditForm>
    </div>

}
else if (formUse == "EDIT")
{
    <div class="pokemon-form-container m-auto bg-info border border-5 border-info-subtle rounded-4 p-3">
        <EditForm class="col" Model="PokemonToEdit">
            <DataAnnotationsValidator />

            <div class="bg-primary-subtle rounded"><p class="fs-3 fw-light text-center card-title">Edit Pokemon</p></div>

            <!-- Pokemon Number and Name -->
            <div class="row mt-1">
                <div class="col input-group mb-2">
                    <span class="input-group-text text-sm-center rounded-start">#</span>
                    <InputNumber min="1"
                                 placeholder="Pokedex #"
                                 id="PokemonId"
                                 @bind-Value="PokemonToEdit.PokemonId"
                                 @onchange="@SendPokemon"
                                 class="form-control "
                                 type="number" />
                    <InputText placeholder="Pokemon Name"
                               id="PokemonName"
                               @bind-Value="PokemonToEdit.PokemonName"
                               @onchange="@SendPokemon"
                               class="form-control w-50 rounded-end" />
                </div>
            </div>

            <!-- Variation Check -->
            <div class="d-flex flex-row justify-content-start input-group ">
                <InputCheckbox id="IsVariation"
                               @bind-Value="PokemonToEdit.IsVariation"
                               @onclick="@Toggle"
                               @onchange="@SendPokemon"
                               class="form-check-input p-3 rounded" />
                <span class="input-group-text ms-1 @GetRoundingClass()">Variation?</span>
                <InputText placeholder="How So?"
                           id="VariationName"
                           @bind-Value="PokemonToEdit.VariationName"
                           @onchange="@SendPokemon"
                           class="form-control rounded-end"
                           hidden="@HideLabel" />
            </div>

            <!-- <br> -->
            <div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>

            <!-- Pokemon Type -->
            <div class="row mb-2">
                <div class="input-group m-auto">
                    <span for="PokemonType" class="input-group-text rounded-start">Pokemon Type</span>
                    <InputSelect id="PokemonType" @bind-Value="PokemonToEdit.PokemonType" class="form-select rounded-end" @onchange="@SendPokemon">
                        <option disabled value="" selected>Select...</option>
                        @foreach (var pt in PokemonTypes)
                        {
                            <option value="@pt">@pt</option>
                        }
                    </InputSelect>
                </div>

            </div>

            <!-- Pokemon Sleep Type, Specialty -->
            <div class="row mb-3 mx-0">
                <!-- Sleep Type -->
                <div class="col ps-0 pe-1">
                    <div class="row input-group m-auto">
                        <span for="SleepType" class="input-group-text rounded-top">Sleep Type</span>
                    </div>
                    <div class="row input-group m-auto">
                        <InputSelect id="SleepType" @bind-Value="PokemonToEdit.SleepType" class="form-select rounded-bottom" @onchange="@SendPokemon">
                            <option disabled value="" selected>Select...</option>
                            @foreach (var st in SleepTypes)
                            {
                                <option value="@st">@st</option>
                            }
                        </InputSelect>
                    </div>
                </div>
                <!-- Speciality -->
                <div class="col ps-1 pe-0">
                    <div class="row input-group m-auto">
                        <span for="Speciality" class="input-group-text rounded-top">Specialty</span>
                    </div>
                    <div class="row input-group m-auto">
                        <InputSelect id="Speciality" @bind-Value="PokemonToEdit.Speciality" class="form-select rounded-bottom" @onchange="@SendPokemon">
                            <option disabled value="" selected>Select...</option>
                            @foreach (var sp in Specialities)
                            {
                                <option value="@sp">@sp</option>
                            }
                        </InputSelect>
                    </div>
                </div>
            </div>

            <!-- <br> -->
            <div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>

            <!-- Images -->
            <div class="row mb-2">
                <div class="input-group m-auto">
                    <span for="ImageUrl" class="input-group-text rounded-start">Base Image URL</span>
                    <InputText id="ImageUrl" @bind-Value="PokemonToEdit.PokemonImageUrl" class="form-control rounded-end" @onchange="@SendPokemon" />
                </div>
            </div>
            <div class="row mb-2">
                <div class="input-group m-auto">
                    <span for="ShinyImageUrl" class="input-group-text rounded-start">Shiny Image URL</span>
                    <InputText id="ShinyImageUrl" @bind-Value="PokemonToEdit.PokemonShinyImageUrl" class="form-control rounded-end" @onchange="@SendPokemon" />
                </div>
            </div>

            <!-- Flavor -->
            <div class="row mb-2">
                <div class="input-group m-auto">
                    <span for="FlavorText" class="input-group-text rounded-start">Flavor Text</span>
                    <InputText id="FlavorText" @bind-Value="PokemonToEdit.FlavorText" class="form-control rounded-end" @onchange="@SendPokemon" />
                </div>
            </div>

            <!-- <br> -->
            <div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>

            @if (showErrors && !IsComplete)
            {
                <div class="alert alert-warning mt-2">
                    Please complete: @string.Join(", ", MissingFields())
                </div>
            }

            <div class="d-flex mt-3 justify-content-center gap-3">
                @if (mostRecentForm)
                {
                    <button type="button"
                            class="btn btn-danger rounded rounded-5 p-1"
                            @onclick="@HandleRemove">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
                            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
                        </svg>
                    </button>
                }
            </div>
        </EditForm>
    </div>
}

