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

@attribute [StreamRendering]
@rendermode InteractiveServer


<!-- 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 border-0">
        <div class="row">
            <div class="text-center position-relative">
                <h2 class="text-info text-decoration-underline">Available Pokémon</h2>
                <div class="m-1 badge bg-info position-absolute top-0 end-0 border-0"><p class="statText">@(pokemons.Count()) Pokemon</p></div>
            </div>
        </div>
    </div>

    <!-- Table -->
    <div class="tableFixHead">
        <table class="table table-borderless border-0 table-secondary table-striped align-middle">

            <!-- Table Head -->
            <thead class="">
                <tr class="">
                    <th class="text-white text-bg-info col-2" scope="col"></th>
                    <th class="text-white text-bg-info col-1" scope="col">#</th>
                    <th class="text-white text-bg-info col-2" scope="col">Pokemon</th>
                    <th class="text-white text-bg-info col-1 text-center" scope="col">Type</th>
                    <th class="text-white text-bg-info col-2 text-center" scope="col">Sleep Type</th>
                    <th class="text-white text-bg-info col-2 text-center" scope="col">Speciality</th>
                    <!-- <th class="text-bg-info text-end" scope="col">Control Buttons</th> -->
                </tr>
            </thead>
            @if(pokemons == null)
            {
                <tbody>
                    <Loading />
                </tbody>
            }
            else
            {
                <!-- Table Body -->
                <tbody >
                    @foreach (var pokemon in pokemons)
                    {
                        <tr class="">

                            <!-- 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" style="cursor: default;">@pokemon.PokemonId</th>


                            <!-- Section 3: Pokemon Name -->
                            @if (pokemon.IsVariation)   // If a Variant
                            {
                                @if (pokemon.VariationName == "Alolan")
                                {
                                    <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> Alolan @pokemon.PokemonName</td>
                                }
                                @if (pokemon.VariationName == "Paldean")
                                {
                                    <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> Paldean @pokemon.PokemonName</td>
                                }
                            }
                            else // Otherwise, Base Case
                            {
                                <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> @pokemon.PokemonName</td>
                            }


                            <!-- Section 4: Pokemon Type -->
                            <td>
                                <div class="d-flex justify-content-center">
                                    <img src="@GetTypeImageUrl(pokemon.PokemonType)"  style="width:36px; height:36px;" />
                                </div>
                            </td>

                            <!-- Section 5: Sleep Type -->
                            <td style="">
                                <div class="d-flex justify-content-center ">
                                    <div class=" badge @pokemon.SleepType.ToLower() border-0"><p class="statText">@pokemon.SleepType</p></div>
                                </div>
                            </td>

                            <!-- Section 6: Speciality -->
                            <td style="">
                                <div class="d-flex justify-content-center">
                                    <div class=" badge @pokemon.Speciality.ToLower() border-0"><p class="statText">@pokemon.Speciality</p></div>
                                </div>
                            </td>

                            <!-- Section 7: Functional Buttons  -->
                            <!-- 
                            <td>
                                <div class="d-flex justify-content-end">
                                    <PokemonEditButton PokemonId="pokemon.Id" />
                                    <button class="btn btn-danger rounded rounded-5 mx-1" @onclick="() => ConfirmDelete(pokemon.Id)">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16">
                                            <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5" />
                                        </svg>
                                        </button>
                                </div>
                            </td>
                            -->
                        </tr>
                    }
                </tbody>
            }
               

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