@model IEnumerable<PokemonDto>
<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>
						<select class="form-control form-control-lg">
							<option value="" disabled selected>Choose your Pokémon...</option>
							@foreach(var pokemon in Model)
							{
								<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>
						</select>
					</td>

					<td>
						<select class="form-control form-control-lg">
							<option value="" disabled selected>Sub Skill</option>
                        </select>
                    </td>
					<td>
						<select class="form-control form-control-lg">
							<option value="" disabled selected>Sub Skill</option>
						</select>
					</td>
					<td>
						<select class="form-control form-control-lg">
							<option value="" disabled selected>Sub Skill</option>
						</select>
					</td>

				</tr>

			</tbody>
		</table>

	</div>

</div>