@attribute [StreamRendering]
@rendermode InteractiveServer

<div class="position-relative bg-white pokemon-card border border-5 border-info-subtle shadow-sm ">
    <!-- Pokemon Name, Number, and Type -->
    <div class="z-3">
        @if (_pokemon.IsVariation) 
        {
            <div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.VariationName @_pokemon.PokemonName</p></div>
        }
        else 
        { 
            <div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.PokemonName</p></div> 
        }
        <div class="pokemon-number">
            <p class="fw-light card-text">Pokédex #<strong>@_pokemon.PokemonId</strong></p>
        </div>
        <div >
            <img class="pokemon-type" src="@GetTypeImageUrl(_pokemon.PokemonType)" />
        </div>
    </div>

    <!-- Pokemon Image -->
    <div class="flip-container z-1" @onclick="() => ToggleImage()">
        <div class="flipper @(isShiny ? "flipped" : "")">
            <img class="pokemon-image front" src="@_pokemon.PokemonImageUrl" />
            <img class="pokemon-image back" src="@_pokemon.PokemonShinyImageUrl" />
        </div>
    </div>

    <div class="bg-info-subtle border rounded border-2 border-info z-3 pokemon-flavor-text">
        @if (string.IsNullOrEmpty(_pokemon.FlavorText))
        {
            <p class="">[ Pokemon Flavor Text Placeholder ]</p>

        }
        else
        {
            <p class="fw-light ">@_pokemon.FlavorText</p>

        }
    </div>

    <!-- Pokemon Sleep Type and Specialty Badges -->
    <div class="position-absolute bottom-0 end-0 mb-1 me-1 z-2">
        <div class="d-flex justify-content-between">
            <div class="m-1 badge @_pokemon.SleepType.ToLower() border-0"><p class="statText">@_pokemon.SleepType</p></div>
            <div class="m-1 badge @_pokemon.Speciality.ToLower() border-0"><p class="statText">@_pokemon.Speciality</p></div>
        </div>
    </div>

</div>