<div class="container px-3">
    <div class="d-flex justify-content-center align-items-center vh-100">
      <div class="spinner-grow text-success" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>

    <div>
      <div>
        <div
          class="card-header d-flex flex-column flex-md-row justify-content-between align-items-md-center p-3"
        >
          <div>
            <h2 class="h5 text-success">Menu Items</h2>
            <p class="mb-0 text-muted small">Manage your restaurant's offerings</p>
          </div>
          <button class="btn btn-success btn-sm gap-2 rounded-1 px-4 py-2">
            <i class="bi bi-plus-square"></i> &nbsp;
            <span>Add Item</span>
          </button>
        </div>
        <div class="card-body p-3">
          <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
              <thead>
                <tr>
                  <th class="ps-3 small text-muted">Item</th>
                  <th class="small text-muted">Category</th>
                  <th class="small text-muted">Price</th>
                  <th class="small text-muted">Tag</th>
                  <th class="pe-3 text-end small text-muted">Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="ps-3">
                    <div class="d-flex align-items-center">
                      <img
                        src="https://placehold.co/600x400"
                        alt="Item"
                        class="rounded object-fit-cover me-2"
                        style="width: 50px; height: 50px"
                      />
                      <div>
                        <div class="fw-semibold small">NAME</div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <span class="badge bg-success bg-opacity-10 text-success small">
                      CATEGORY
                    </span>
                  </td>
                  <td class="fw-semibold small">$$$</td>
                  <td>
                    <span class="badge bg-info bg-opacity-10 text-info small"> TAG </span>
                  </td>
                  <td class="pe-3 text-end">
                    <div class="d-flex gap-2 justify-content-end">
                      <button class="btn btn-sm btn-outline-success">
                        <i class="bi bi-pencil-square"></i>
                      </button>
                      <button class="btn btn-sm btn-outline-danger">
                        <i class="bi bi-trash3-fill"></i>
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>