@inject IPokemonService PokemonService


<div class="create-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"
                             class="form-control "
                             type="number" />
                <InputText placeholder="Pokemon Name"
                           id="PokemonName"
                           @bind-Value="NewPokemon.PokemonName"
                           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"
                               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"
                           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" 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" 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" 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>

        <!-- <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" 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" 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" 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-primary rounded p-1 px-0"
                    @onclick="@SendPokemon"
                    disabled="@( !IsComplete )">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-arrow-up" viewBox="0 0 16 16">
                    <path d="M8 11a.5.5 0 0 0 .5-.5V6.707l1.146 1.147a.5.5 0 0 0 .708-.708l-2-2a.5.5 0 0 0-.708 0l-2 2a.5.5 0 1 0 .708.708L7.5 6.707V10.5a.5.5 0 0 0 .5.5" />
                    <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1" />
                </svg>
            </button>
            @if(mostRecentForm)
            {
                <button type="button"
                        class="btn btn-danger rounded p-1 px-0"
                        @onclick="@HandleRemove">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-minus" viewBox="0 0 16 16">
                        <path d="M5.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5" />
                        <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1" />
                    </svg>
                </button>
            }
        </div>
    </EditForm>
</div>