@{
    ViewData["Title"] = "Home Page";
}

@model PokemonSleepDto

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    <button>Add Pokemon</button>
</div>
<div style ="margin: auto; width: 600px; max-width: 50%; ">
    <table class="table" style="text-align: center; border: 1px solid purple;">
        <thead style="border-bottom: 1px solid purple;">
            <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>
            </tr>
        </thead>
        <tbody>
            @foreach (var pokemon in Model.pokemonList)
            {
                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; border-bottom: 1px solid purple;">
                    <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.Name</td>
                    <td>@pokemon.SleepType</td>
                    <td style="padding-right: 30px;">@pokemon.Speciality</td>
                </tr>
            }
        </tbody>
    </table>
</div>