@{
    ViewData["Title"] = "ListComponents";
	Layout = "~/Views/Shared/_LayoutWorker.cshtml";
}

<form method="post" class="d-flex justify-content-evenly">
	<div class=" col-sm-8">
		<div class="text-center">
			<h2 class="display-4">Покупки</h2>
		</div>
		<div class="text-center" name="id">
			<table class="table">
				<thead>
					<tr>
						<th>
							Номер
						</th>
						<th>
							Дата оплаты
						</th>
						<th>
							Сумма
						</th>
						<th>
							Статус
						</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
	</div>
	<div class="text-center d-flex flex-column mt-5">
		<button type="button" class="btn btn-primary btn-lg mb-5" data-bs-toggle="modal" data-bs-target="#exampleModal">Добавить</button>
		<button type="button" class="btn btn-primary btn-lg mb-5">Удалить</button>
		<button type="button" class="btn btn-primary btn-lg mb-5">Обновить</button>
		<button type="button" class="btn btn-primary btn-lg mb-5">Сохранить в doc формате</button>
		<button type="button" class="btn btn-primary btn-lg mb-5">Сохранить в xls формате</button>
	</div>

	<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">
					<div>
						<label class="form-label">Покупка</label>
						<select class="form-select">
							<option value="1">Покупка 1</option>
							<option value="2">Покупка 2</option>
						</select>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
					<button type="button" class="btn btn-primary">Добавить</button>
				</div>
			</div>
		</div>
	</div>
</form>
