@inject IPokemonService PokemonService

<div class="pokemon-background">
    @foreach (var image in BackgroundImages)
    {
        <img src="@image.Url"
             class="pokemon-bg-img"
             style="left:@image.Left%; top:@image.Top%; width:@image.Size}px; transform:rotate(@(image.Rotation)deg);" />
    }
</div>

@code {
    private List<PokemonImage> BackgroundImages = new();
    private Random random = new();

    protected override async Task OnInitializedAsync()
    {
        await LoadPokemonBackgrounds();
    }

    private async Task LoadPokemonBackgrounds()
    {
        var pokemonList = await PokemonService.GetAllPokemonAsync(); // Retrieves Pokémon with background URLs

        foreach (var pokemon in pokemonList)
        {
            BackgroundImages.Add(new PokemonImage
                {
                    Url = pokemon.PokemonImageUrl, // URL retrieved from the database
                    Left = random.Next(0, 100),
                    Top = random.Next(0, 100),
                    Size = random.Next(50, 130),
                    Rotation = random.Next(0, 360)
                });
        }
    }

    private class PokemonImage
    {
        public string Url { get; set; } = "";
        public int Left { get; set; }
        public int Top { get; set; }
        public int Size { get; set; }
        public int Rotation { get; set; }
    }
}