@page "/pokemonsleep"
@inject IPokemonService PokemonService

@attribute [StreamRendering]

<PageTitle>Pokemon Sleep</PageTitle>

<h1>Pokemon Sleep</h1>

@if (pokemons == null)
{
    <p><em>Loading...</em></p>
}
else
{
<div class="card shadow border-0 mt-4" style ="margin: auto; width: 900px; max-width: 60%; ">

	<div class="card-header bg-secondary bg-gradient ml-0 py-3">
		<div class="row">
			<div class="col-12 text-center">
				<h1 class="text-info">Available Pokemon</h1>
			</div>
		</div>
	</div>
	<div class="card-body p-4">
		<div class="row pb-3">
			<div class="col-6">
			</div>
			<div class="col-6 text-end">
				<a asp-controller="Pokemon" asp-action="PokemonCreate" class="btn btn-outline-primary"><i class="bi bi-plus-square"></i> Add New Pokemon</a>

			</div>
		</div>
		<table class="table">
            <thead>
                <tr>
                    <th scope="col" style="width: 50%;"></th>
                    <th scope="col">#</th>
                    <th scope="col">Pokemon</th>
                    <th scope="col">Sleep Type</th>
                    <th scope="col" style="padding-right: 30px;">Speciality</th>
                    <th scope="col"></th>
                </tr>
			</thead>
			<tbody>
				@foreach (var pokemon in pokemons)
            {
                string URL = "https://www.serebii.net/pokemonsleep/pokemon/" + pokemon.Id + ".png";
                string ShinyURL = "https://www.serebii.net/pokemonsleep/pokemon/shiny/" + pokemon.Id + ".png";

                    <tr style=" text-align: center; margin:0; padding: 0;">
                    <td style="display: block; margin:0; padding: 0;">
                        <img style=" width: 90px; height: 90px;  " src=@URL />
                        <img style=" width: 90px; height: 90px;  " src=@ShinyURL />
                    </td>
                    <th scope="row">@pokemon.Id</th>
                    <td> @pokemon.PokemonName</td>
                    <td>@pokemon.SleepType</td>
                    <td style="padding-right: 30px;">@pokemon.Speciality</td>
                    <td>
						<a asp-controller="Pokemon" asp-action="PokemonDelete" asp-route-Id="@pokemon.Id" class="btn btn-danger">
							<i class="bi bi-trash"></i>
						</a>
					</td>
                    
                </tr>
            }
			</tbody>
		</table>

	</div>

</div>
}

@code {
    private List<Pokemon> pokemons = new List<Pokemon>();

    protected override async Task OnInitializedAsync()
    {
        // Simulate asynchronous loading to demonstrate streaming rendering
        await Task.Delay(500);

        var result = await PokemonService.GetAllPokemonAsync();
        if (result is not null)
        {
            pokemons = result;
        }
    }
}