@{
	ViewData["Title"] = "Создание товара";
	Layout = "~/Views/Shared/_LayoutStorekeeper.cshtml";
}

<div class="text-center">
	<h2 class="display-4">Создание товара</h2>
</div>

<form method="post" class="d-flex flex-column align-items-center">
	<div class="col-sm-3">
		<label class="form-label">Название</label>
		<input type="text" class="form-control" name="email">
	</div>
	<div class="col-sm-3">
		<label class="form-label">Цена</label>
		<input type="number" step="0.01" class="form-control" name="price" readonly min="0.01">
	</div>
	<h1 class="display-6">Комплектующие</h1>
	<div class="d-flex justify-content-center">
		<button type="button" class="btn btn-primary mx-2 mt-3" data-bs-toggle="modal" data-bs-target="#exampleModal">Добавить</button>
		<button type="button" class="btn btn-primary mx-2 mt-3" data-bs-toggle="modal" data-bs-target="#exampleModal">Изменить</button>
		<button type="button" class="btn btn-primary mx-2 mt-3">Удалить</button>
	</div>
	<table class="table table-hover">
		<thead>
			<tr>
				<th id="name" scope="col">Комплектующее</th>
				<th id="count" scope="col">Количество</th>
				<th id="sum" scope="col">Сумма</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	<div class="col-sm-2 d-flex justify-content-evenly align-items-baseline">
		<button type="submit" class="btn btn-primary mt-3 px-4">Сохранить</button>
	</div>
</form>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Комплектующее</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
			</div>
			<div class="modal-body">
				<label class="form-label">Комплектующее</label>
				<select class="form-control" name="component"></select>
				<label class="form-label">Количество</label>
				<input type="number" class="form-control" name="count" min="1">
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
				<button type="submit" class="btn btn-primary">Сохранить</button>
			</div>
		</div>
	</div>
</div>
