@model PokemonSleepDto

<div class="card shadow border-0 mt-4">
	<div class="card-header bg-secondary bg-gradient ml-0 py-3">
		<div class="row">
			<div class="col-12 text-center">
				<h1 class="text-white">Pokémon Calculator</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 class="btn btn-outline-primary"><i class="bi bi-plus-square"></i> Add Pokemon</a>

			</div>
		</div>
		<table class="table">
			<thead>
				<tr>
					<th>
						Select Pokemon
					</th>
					<th>
						
					</th>
					<th>
						 
					</th>
					<th></th>
				</tr>
			</thead>
			<tbody>

				<tr>
                    <!--<td><img src="https://www.serebii.net/pokemonsleep/pokemon/{pokemon.Id}.png" alt="Girl in a jacket" width="300" height="300"></td> -->
					<td>
						<select class="form-control form-control-lg">
							<option value="" disabled selected>Choose your Pokémon...</option>
							@foreach(var pokemon in Model.pokemonList)
							{
								string URL = "https://www.serebii.net/pokemonsleep/pokemon/" + pokemon.Id + ".png";
									
										<img style=" width: 30px; height: 30px; border: 1px solid green; " src=@URL />
										<option>@pokemon.Id @pokemon.Name</option>
								
								
							}
						</select>
					</td>
					<td>
					</td>
					<td>
					</td>

				</tr>

			</tbody>
			<thead>
				<tr>
					<th>
						Nature
					</th>
					<th>Sub Skills</th>
					<th>
					</th>
					<th></th>
					<th></th>
				</tr>
			</thead>
			<tbody>

				<tr>
					<td>
						<select class="form-control form-control-lg">
							<option value="" disabled selected>Nature</option>
							@foreach (var nature in Model.natureList)
							{
								<option>@nature.Nature</option>
							}
						</select>
					</td>

					<td>
						<select class="form-control form-control-lg">
							<option value="" disabled selected>Sub Skill</option>
							@foreach (var subskill in Model.subskillList)
							{
								<option>@subskill.SubSkill</option>
							}
                        </select>
                    </td>
					<td>
						<select class="form-control form-control-lg">
							<option value="" disabled selected>Sub Skill</option>
							@foreach (var subskill in Model.subskillList)
							{
								<option>@subskill.SubSkill</option>
							}
						</select>
					</td>
					<td>
						<select class="form-control form-control-lg">
							<option value="" disabled selected>Sub Skill</option>
							@foreach (var subskill in Model.subskillList)
							{
								<option>@subskill.SubSkill</option>
							}
						</select>
					</td>

				</tr>

			</tbody>
		</table>

	</div>

</div>