<h1 class="text-dark">Listado de Áreas</h1>

@*<p>
<a asp-action="Create" class="btn btn-primary">Nuevo</a>
</p>*@
<div class="card">
<div class="card-body">
<table class="display nowrap table table-responsive table-bordered table-
striped table-hover dataTables-example"
style="border-left-color: black; border-bottom-color: black; border-
top-color: black; border-right-color: black "
cellSpacing=1 cellPadding=1 width="100%" border="1" id="example">
<thead class="thead-dark">
<tr class="text-dark">
<th>
@Html.DisplayNameFor(model => model.ID)
</th>
<th>
Nombre
</th>
<th>
@Html.DisplayNameFor(model => model.Capacidad)
</th>
<th>
@Html.DisplayNameFor(model => model.Establecimiento)
</th>

<th width="250">Acciones</th>
</tr>
</thead>
<tbody class="text-dark">
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.ID)
</td>
<td>
@Html.DisplayFor(modelItem => item.Descripcion)
</td>
<td>
@Html.DisplayFor(modelItem => item.Capacidad)
</td>
<td>
@Html.DisplayFor(modelItem => item.Establecimiento)
</td>

<td>
<button type="button" class="bx bxs-pencil btn btn-
success" onclick="GetAreasU('@item.ID')">
Editar
</button>
@Html.ActionLink(" Detalles", "AreasDetails", new { id
= item.ID }, new { @class = "bx bx-detail btn btn-blue" })
@*<button type="button" class="bx bx-detail btn btn-
danger" onclick="GetAreasD('@item.ID')">
Eliminar
</button>*@
 </td>
</tr>
}
</tbody>
</table>
</div>
</div>

@*!-- Modal crear -->*@

<div class="modal fade " id="createModal" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content bg-dark">
<form asp-action="Create" id="creararea">
<div class="modal-header bg-dark">
<h5 class="modal-title text-primary"
id="exampleModalLabel">Ingresa un área</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Cerrar"></button>
</div>
<div class="modal-body">
<div class="row">

@*<input id="Area_ID" name="Area_ID" class="form-control

mt-2 bg-white text-dark" />*@

<div class="col-md-6">
<div class="form-group">
<label class="control-label text-white mt-
2">Nombre</label>
<input name="Area_Descripcion" id="descripcion"
class="form-control mt-2 bg-white text-dark" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label text-white mt-
2">Capacidad</label>
<input name="Area_Capacidad" id="capacidad"
class="form-control mt-2 bg-white text-dark" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label text-white mt-
2">Establecimiento</label>
<select name="Est_ID" id=""
class="cbbEstablecimiento form-control mt-2 bg-white text-dark"></select>
</div>
</div>
</div>
</div>

<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Cerrar</button>
<input type="button" class="btn btn-primary"
onclick="validarArea()" value="Guardar cambios" />
</div>
 </form>
</div>
</div>
</div>