@attribute [StreamRendering]
@rendermode InteractiveServer

<div class="card-wrapper d-flex flex-column align-items-center">
    <div class="pokemon-card card-holo animated @GetTypeCssClass(_pokemon.PokemonType)">
        <!-- 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>

        <!-- Pokemon Flavortext -->
        <div class="z-3 pokemon-flavor-text @(GetTypeCssClass(_pokemon.PokemonType))">
            @if (string.IsNullOrEmpty(_pokemon.FlavorText))
            {
                <p class="fw-light">[ 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 z-2">
            <div class="d-flex justify-content-between">
                <PokemonBadge BadgeItem="@_pokemon.SleepType" />
                <PokemonBadge BadgeItem="@_pokemon.Speciality" />
            </div>
        </div>

    </div>

    <div class="mt-3">
            <PokemonEditButton PokemonId="@_pokemon.Id" />
    </div>
</div>