@inject IPokemonService PokemonService
@inject IJSRuntime JS
@inject NavigationManager Navigation

@attribute [StreamRendering]
@rendermode InteractiveServer


<!-- Main Body -->
@if (pokemons == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <!-- Main UI -->
    <div class="card shadow border-0 mt-4 m-auto w-50">

        <!-- Table Header -->
        <div class="card-header bg-secondary bg-gradient ml-0 py-3">
            <div class="row">
                <div class="col-12 text-center position-relative">
                    <h2 class="text-info">Available Pokémon</h2>
                    <div class="m-1 col-1 badge bg-info position-absolute top-0 end-0"><p class="statText">@(pokemons.Count()) Pokemon</p></div>
                </div>
            </div>
        </div>

        <!-- Table -->
        <div class="tableFixHead">
            <table class="table table-striped">

                <!-- Table Head -->
                <thead>
                    <tr>
                        <th class="text-bg-info" scope="col"></th>
                        <th class="text-bg-info" scope="col">#</th>
                        <th class="text-bg-info" scope="col">Pokemon</th>
                        <th class="text-bg-info" scope="col">Sleep Type</th>
                        <th class="text-bg-info" scope="col">Speciality</th>
                        <th class="text-bg-info" scope="col"></th>
                    </tr>
                </thead>

                <!-- Table Body -->
                <tbody>
                    @foreach (var pokemon in pokemons)
                    {
                        <tr>

                             <!-- Section: Pokemon Image -->
                            @{
                                string baseUrl = pokemon.PokemonImageUrl;
                                string shinyUrl = pokemon.PokemonShinyImageUrl;
                            }
                            <td style="text-align: center;">
                                @if(shinyUrl == null){
                                    <div class="flip-container">
                                        <div class="flipper">
                                            <img class="front" src="@baseUrl" />
                                        </div>
                                    </div>
                                    
                                }
                                else
                                {
                                    <div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
                                        <div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
                                            <img class="front" src="@baseUrl" />
                                            <img class="back" src="@shinyUrl" />
                                        </div>
                                    </div>
                                    
                                }
                            </td>

                            <!-- Section 2: Pokemon # -->
                            <th scope="row">@pokemon.PokemonId</th>

                            <!-- Section 3: Pokemon Name -->
                            @if (pokemon.IsVariation)   // If a Variant
                            {
                                @if (pokemon.VariationName == "Alolan")
                                {
                                    <td style="vertical-align: auto;"> Alolan @pokemon.PokemonName</td>
                                }
                                @if (pokemon.VariationName == "Paldean")
                                {
                                    <td style="vertical-align: auto;"> Paldean @pokemon.PokemonName</td>
                                }
                            }
                            else // Otherwise, Base Case
                            {
                                <td style="vertical-align: auto;"> @pokemon.PokemonName</td>
                            }

                            <!-- Section 4: Sleep Type -->
                            <td style="vertical-align: auto;">
                                <div class="m-1 col-1 badge @pokemon.SleepType.ToLower()"><p class="statText">@pokemon.SleepType</p></div>
                            </td>

                            <!-- Section 5: Speciality -->
                            <td style="padding-right: 30px; vertical-align: auto;">
                                <div class="m-1 col-1 badge @pokemon.Speciality.ToLower()"><p class="statText">@pokemon.Speciality</p></div>
                            </td>

                            <!-- Section 6: Functional Buttons  -->
                            <td>
                                <button class="btn btn-warning" @onclick="() => EditPokemon(pokemon.Id)">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
                                        <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z" />
                                    </svg>
                                </button>
                                <button class="btn btn-danger" @onclick="() => ConfirmDelete(pokemon.Id)">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                         class="bi bi-trash" viewBox="0 0 16 16">
                                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z" />
                                        <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z" />
                                    </svg>
                                </button>
                            </td>

                        </tr>
                    }
                </tbody>

            </table>
        </div>
    </div>

}