<div class="container my-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-1">Villa Management</h2>
            <p class="text-muted mb-0">Manage your villa listings</p>
        </div>
        <a href="#" class="btn btn-success">
            <i class="bi bi-plus-circle me-2"></i>Add New Villa
        </a>
    </div>

    <!-- Messages -->
   
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle me-2"></i> Success
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
   

        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle me-2"></i>Error
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>

        <div class="alert alert-info text-center">
            <i class="bi bi-info-circle fs-1 d-block mb-3"></i>
            <h5>No Villas Available</h5>
            <p class="mb-3">Get started by creating your first villa.</p>
            <a href="#" class="btn btn-primary">
                <i class="bi bi-plus-circle me-2"></i>Create Villa
            </a>
        </div>

        <!-- Villa Table -->
        <div class="card">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Image</th>
                                <th>Name</th>
                                <th>Details</th>
                                <th>Rate</th>
                                <th>Occupancy</th>
                                <th>Sqft</th>
                                <th>Updated</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                                <tr>
                                    <td>
                                            <img src="#" class="rounded" style="width: 60px; height: 45px; object-fit: cover;">
                                            <div class="bg-secondary rounded d-flex align-items-center justify-content-center text-white" 
                                                 style="width: 60px; height: 45px;">
                                                <i class="bi bi-image"></i>
                                            </div>
                                    </td>
                                    <td class="align-middle">
                                        <strong>Name</strong>
                                    </td>
                                    <td class="align-middle">
                                        <small class="text-muted">
                                            DETAILS
                                        </small>
                                    </td>
                                    <td class="align-middle">
                                        <span class="badge bg-success">$$</span>
                                    </td>
                                    <td class="align-middle">
                                        <i class="bi bi-people me-1"></i>Occupancy
                                    </td>
                                    <td class="align-middle">
                                        <i class="bi bi-rulers me-1"></i>Sqft
                                    </td>
                                    <td class="align-middle">
                                        <small class="text-muted">UpdatedDate</small>
                                    </td>
                                    <td class="align-middle text-center">
                                        <div class="btn-group btn-group-sm">
                                           
                                            <a href="#"
                                               class="btn btn-outline-warning" title="Edit">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <a href="#" 
                                               class="btn btn-outline-danger" title="Delete">
                                                <i class="bi bi-trash"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Summary -->
        <div class="row mt-4">
            <div class="col-md-4">
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="text-primary">Count</h5>
                        <small class="text-muted">Total Villas</small>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="text-success">$$$</h5>
                        <small class="text-muted">Average Rate</small>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="text-info">Sqft</h5>
                        <small class="text-muted">Total Sqft</small>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

<style>
    .object-fit-cover {
        object-fit: cover;
    }
</style>
