@model IEnumerable<VillaNumber>

<div class="w-100 card border-0 p-4">
    <div class="card-header bg-success bg-gradient ml-0 py-3">
        <div class="row">
            <div class="col-12 text-center">
                <h2 class="text-white py-2">Villa Number List</h2>
            </div>
        </div>
    </div>
    <div class="card-body border p-4">
        <div class="row pb-3">
            <div class="col-6 offset-6 text-end">
                <a asp-controller="VillaNumber" asp-action="Create" class="btn btn-secondary">
                    <i class="bi bi-plus-circle"></i> Create New Villa Number
                </a>
            </div>
        </div>

        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>
                        Villa Name
                    </th>
                    <th>Villa Number</th>
                    <th>Speical Details</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var obj in Model)
                {
                    <tr>
                        <td>@obj.Villa.Name</td>
                        <td>@obj.Villa_Number</td>
                        <td>@obj.SpecialDetails</td>
                        <td>
                            <div class="w-75 btn-group" role="group">
                                <a asp-controller="VillaNumber" asp-action="Update" asp-route-villaNumberId="@obj.Villa_Number"
                                   class="btn btn-success mx-2">
                                    <i class="bi bi-pencil-square"></i> Edit
                                </a>
                                <a asp-controller="VillaNumber" asp-action="Delete" asp-route-villaNumberId="@obj.Villa_Number"
                                   class="btn btn-danger mx-2">
                                    <i class="bi bi-trash-fill"></i> Delete
                                </a>
                            </div>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>