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

@attribute [StreamRendering]
@rendermode InteractiveServer

<!-- Table A: Desktop View-->
<div class="container d-none d-md-block">
    <!-- Main UI -->
    <div class="card shadow-sm border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8">
        <!-- Table Header -->
        <div class="row card-header bg-secondary bg-gradient ml-0 py-3 border-0">
            <div class="flex-row justify-content-between">
                <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>

        
        <div class="tableFixHead table-responsive row">
            <table class="table col 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 d-none d-md-table-cell" 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>

                    </tr>
                </thead>
                <!-- If/Else Pokemon Loaded-->
                @if(pokemons == null)
                {
                    <tbody>
                        <Loading />
                    </tbody>
                }
                else
                {
                    <!-- Table Body -->
                    <tbody>
                        @foreach (var pokemon in pokemons)
                        {
                            <tr class="flex-row">
                                <!-- Section: Pokemon Image -->
                                @{
                                    string baseUrl = pokemon.PokemonImageUrl;
                                    string shinyUrl = pokemon.PokemonShinyImageUrl;
                                }
                                <td class="text-center d-none d-md-table-cell">
                                    @if (shinyUrl == null)
                                    {
                                        <div class="flip-container">
                                            <div class="flipper">
                                                <img class="front img-fluid" style="max-width: 100px;" src="@baseUrl" />
                                            </div>
                                        </div>

                                    }
                                    else
                                    {
                                        <div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
                                            <div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
                                                <img class="front img-fluid" style="max-width: 100px;" src="@baseUrl" />
                                                <img class="back img-fluid" style="max-width: 100px;" src="@shinyUrl" />
                                            </div>
                                        </div>

                                    }
                                </td>

                                <!-- Section 2: Pokemon # -->
                                <th class="" scope="row" style="cursor: default;">@pokemon.PokemonId</th>


                                <!-- Section 3: Pokemon Name -->

                                    <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style fw-light col-2">@(pokemon.IsVariation && ToggleVariationName(pokemon.Id, pokemon.PokemonId) ? $"{pokemon.VariationName} {pokemon.PokemonName}" : pokemon.PokemonName)</td>
                              


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

                                <!-- Section 5: Sleep Type -->
                                <td class="" style="">
                                    <div class="d-flex justify-content-center ">
                                        <PokemonBadge BadgeItem="@pokemon.SleepType" />
                                    </div>
                                </td>

                                <!-- Section 6: Speciality -->
                                <td class="" style="">
                                    <div class="d-flex justify-content-center">
                                        <PokemonBadge BadgeItem="@pokemon.Speciality" />

                                    </div>
                                </td>

                            </tr>
                        }
                    </tbody>
                }
               

            </table>
        </div>

        
    </div>

</div>

<!-- Desktop B: Mobile View -->
<div class="container card border-0 d-block d-md-none mx-auto mt-4 shadow-sm">
    <!-- Table Header -->
    <div class="row card-header bg-secondary bg-gradient ml-0 py-3 border-0 bg-info">
        <div class="flex-row justify-content-between">
            <div class="text-center position-relative">
                <h2 class="text-white text-decoration-underline">Pokémon</h2>
                <div class="m-1 badge bg-white text-info position-absolute top-0 end-0 border-0 w-auto"><p class="statText">@(pokemons.Count())</p></div>
            </div>
        </div>
    </div>
    <!-- Table Body -->
    <div class="tableFixHead row">
        <table class="table table-striped border-0">

        
        <tbody>
            @if (pokemons == null)
            {
                <Loading />
            }
            else
            {

                @foreach (var pokemon in pokemons)
                {
                    <tr class="border-0">
                        <div class="d-flex align-items-center">

                            <!-- Pokemon Image -->
                            <div class="me-3">
                                <div class="flip-container-sm" @onclick="() => ToggleImage(pokemon.Id)">
                                    <div class="flipper-sm @(isShiny[pokemon.Id] ? "flipped" : "")">
                                        <img class="front img-fluid" src="@pokemon.PokemonImageUrl" />
                                        @if (pokemon.PokemonShinyImageUrl != null)
                                        {
                                            <img class="back img-fluid" src="@pokemon.PokemonShinyImageUrl" />
                                        }
                                    </div>
                                </div>
                            </div>

                            <div>
                                <!-- Number and Name -->
                                <h5>
                                    @pokemon.PokemonId -
                                        <span class="pokemon-name-style fw-light" @onclick="() => ViewPokemon(pokemon.PokemonId)">
                                            @(pokemon.IsVariation && ToggleVariationName(pokemon.Id, pokemon.PokemonId) ? $"{pokemon.VariationName} {pokemon.PokemonName}" : pokemon.PokemonName)
                                    </span>
                                </h5>
                                <!-- Stats -->
                                <div class="d-flex flex-wrap align-items-center gap-2">
                                    <img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:28px;" />
                                    <div class=" badge @pokemon.SleepType.ToLower() border-0"><p class="statText">@pokemon.SleepType</p></div>
                                    <div class=" badge @pokemon.Speciality.ToLower() border-0"><p class="statText">@pokemon.Speciality</p></div>
                                </div>
                            </div>

                        </div>
                    </tr>
                }
            }
            </tbody>
        </table>
    </div>
</div>