@attribute [StreamRendering]
@rendermode InteractiveServer

<div class="position-relative bg-white pokemon-card border border-5 border-info-subtle shadow-sm ">
    <!-- Pokemon Name and Number -->
    <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>

    <!-- 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 pokemon-flavor-text">
        <p class="">[ Pokemon Flavor Text Placeholder ]</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()"><p class="statText">@_pokemon.SleepType</p></div>
            <div class="m-1 badge @_pokemon.Speciality.ToLower()"><p class="statText">@_pokemon.Speciality</p></div>
        </div>
    </div>

</div>