<div class="container mt-4 mb-4">
  <h1 class="page-title mb-4">Dashboard</h1>

  <!-- Quick Actions -->
  <div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="mb-0" style="color: var(--primary-color)">Quick Management</h5>
    </div>
    <div class="card-body p-0">
      <div class="row g-0">
        <!-- Home -->
        <div class="col-md-4 border-end">
          <div class="p-4">
            <div class="d-flex align-items-center mb-3">
              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
                <i class="fas fa-home fa-lg" style="color: var(--primary-color);"></i>
              </div>
              <div>
                <h5 class="mb-0">Home</h5>
                <p class="text-muted mb-0 small">Manage homepage</p>
              </div>
            </div>
            <a href="/admin/home" class="btn btn-sm btn-primary w-100 mt-2">
              <i class="fas fa-edit me-2"></i>Edit
            </a>
          </div>
        </div>

        <!-- Header & Menu -->
        <div class="col-md-4 border-end">
          <div class="p-4">
            <div class="d-flex align-items-center mb-3">
              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
                <i class="fas fa-bars fa-lg" style="color: var(--primary-color);"></i>
              </div>
              <div>
                <h5 class="mb-0">Header & Menu</h5>
                <p class="text-muted mb-0 small">Manage header & menu</p>
              </div>
            </div>
            <a href="/admin/header" class="btn btn-sm btn-primary w-100 mt-2">
              <i class="fas fa-edit me-2"></i>Edit
            </a>
          </div>
        </div>

        <!-- Footer -->
        <div class="col-md-4">
          <div class="p-4">
            <div class="d-flex align-items-center mb-3">
              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
                <i class="fas fa-window-minimize fa-lg" style="color: var(--primary-color);"></i>
              </div>
              <div>
                <h5 class="mb-0">Footer</h5>
                <p class="text-muted mb-0 small">Manage footer</p>
              </div>
            </div>
            <a href="/admin/footer" class="btn btn-sm btn-primary w-100 mt-2">
              <i class="fas fa-edit me-2"></i>Edit
            </a>
          </div>
        </div>

        <!-- About Us -->
        <div class="col-md-4 border-end border-top">
          <div class="p-4">
            <div class="d-flex align-items-center mb-3">
              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
                <i class="fas fa-users fa-lg" style="color: var(--primary-color);"></i>
              </div>
              <div>
                <h5 class="mb-0">About Us</h5>
                <p class="text-muted mb-0 small">Manage about us</p>
              </div>
            </div>
            <a href="/admin/about-us" class="btn btn-sm btn-primary w-100 mt-2">
              <i class="fas fa-edit me-2"></i>Edit
            </a>
          </div>
        </div>

        <!-- Contact -->
        <div class="col-md-4 border-end border-top">
          <div class="p-4">
            <div class="d-flex align-items-center mb-3">
              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
                <i class="fas fa-envelope fa-lg" style="color: var(--primary-color);"></i>
              </div>
              <div>
                <h5 class="mb-0">Contact</h5>
                <p class="text-muted mb-0 small">Manage contact</p>
              </div>
            </div>
            <a href="/admin/contact" class="btn btn-sm btn-primary w-100 mt-2">
              <i class="fas fa-edit me-2"></i>Edit
            </a>
          </div>
        </div>

        <!-- FAQ -->
        <div class="col-md-4 border-top">
          <div class="p-4">
            <div class="d-flex align-items-center mb-3">
              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
                <i class="fas fa-question-circle fa-lg" style="color: var(--primary-color);"></i>
              </div>
              <div>
                <h5 class="mb-0">FAQ</h5>
                <p class="text-muted mb-0 small">Manage FAQ</p>
              </div>
            </div>
            <a href="/admin/faq" class="btn btn-sm btn-primary w-100 mt-2">
              <i class="fas fa-edit me-2"></i>Edit
            </a>
          </div>
        </div>

        <!-- Appointment -->
        <div class="col-md-4 border-end border-top">
          <div class="p-4">
            <div class="d-flex align-items-center mb-3">
              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
                <i class="fas fa-calendar-check fa-lg" style="color: var(--primary-color);"></i>
              </div>
              <div>
                <h5 class="mb-0">Appointment</h5>
                <p class="text-muted mb-0 small">Manage appointment page</p>
              </div>
            </div>
            <a href="/admin/appointment" class="btn btn-sm btn-primary w-100 mt-2">
              <i class="fas fa-edit me-2"></i>Edit
            </a>
          </div>
        </div>

        <!-- Pricing -->
        <div class="col-md-4 border-end border-top">
          <div class="p-4">
            <div class="d-flex align-items-center mb-3">
              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
                <i class="fas fa-tags fa-lg" style="color: var(--primary-color);"></i>
              </div>
              <div>
                <h5 class="mb-0">Pricing</h5>
                <p class="text-muted mb-0 small">Manage pricing page</p>
              </div>
            </div>
            <a href="/admin/pricing" class="btn btn-sm btn-primary w-100 mt-2">
              <i class="fas fa-edit me-2"></i>Edit
            </a>
          </div>
        </div>

        <!-- Terms & Conditions -->
        <div class="col-md-4 border-top">
          <div class="p-4">
            <div class="d-flex align-items-center mb-3">
              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
                <i class="fas fa-file-contract fa-lg" style="color: var(--primary-color);"></i>
              </div>
              <div>
                <h5 class="mb-0">Terms & Conditions</h5>
                <p class="text-muted mb-0 small">Manage terms</p>
              </div>
            </div>
            <a href="/admin/terms-conditions" class="btn btn-sm btn-primary w-100 mt-2">
              <i class="fas fa-edit me-2"></i>Edit
            </a>
          </div>
        </div>

        <!-- Travel -->
        <div class="col-md-4 border-end border-top">
          <div class="p-4">
            <div class="d-flex align-items-center mb-3">
              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
                <i class="fas fa-plane fa-lg" style="color: var(--primary-color);"></i>
              </div>
              <div>
                <h5 class="mb-0">Travel</h5>
                <p class="text-muted mb-0 small">Manage travel</p>
              </div>
            </div>
            <a href="/admin/travel" class="btn btn-sm btn-primary w-100 mt-2">
              <i class="fas fa-edit me-2"></i>Edit
            </a>
          </div>
        </div>

        <!-- Safety -->
        <div class="col-md-4 border-end border-top">
          <div class="p-4">
            <div class="d-flex align-items-center mb-3">
              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
                <i class="fas fa-shield-alt fa-lg" style="color: var(--primary-color);"></i>
              </div>
              <div>
                <h5 class="mb-0">Safety</h5>
                <p class="text-muted mb-0 small">Manage safety</p>
              </div>
            </div>
            <a href="/admin/safety" class="btn btn-sm btn-primary w-100 mt-2">
              <i class="fas fa-edit me-2"></i>Edit
            </a>
          </div>
        </div>

        <!-- Activities -->
        <div class="col-md-4 border-end border-top">
          <div class="p-4">
            <div class="d-flex align-items-center mb-3">
              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
                <i class="fas fa-running fa-lg" style="color: var(--primary-color);"></i>
              </div>
              <div>
                <h5 class="mb-0">Activities</h5>
                <p class="text-muted mb-0 small">Manage activities</p>
              </div>
            </div>
            <a href="/admin/activity" class="btn btn-sm btn-primary w-100 mt-2">
              <i class="fas fa-edit me-2"></i>Edit
            </a>
          </div>
        </div>

        <!-- Services -->
        <div class="col-md-4 border-end border-top">
          <div class="p-4">
            <div class="d-flex align-items-center mb-3">
              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
                <i class="fas fa-concierge-bell fa-lg" style="color: var(--primary-color);"></i>
              </div>
              <div>
                <h5 class="mb-0">Services</h5>
                <p class="text-muted mb-0 small">Manage services</p>
              </div>
            </div>
            <a href="/admin/service" class="btn btn-sm btn-primary w-100 mt-2">
              <i class="fas fa-edit me-2"></i>Edit
            </a>
          </div>
        </div>

        <!-- Blog -->
        <div class="col-md-4 border-top">
          <div class="p-4">
            <div class="d-flex align-items-center mb-3">
              <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
                <i class="fas fa-blog fa-lg" style="color: var(--primary-color);"></i>
              </div>
              <div>
                <h5 class="mb-0">Blog</h5>
                <p class="text-muted mb-0 small">Manage blog posts</p>
              </div>
            </div>
            <a href="/admin/blog" class="btn btn-sm btn-primary w-100 mt-2">
              <i class="fas fa-edit me-2"></i>Edit
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- API Links Section -->
  <div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="mb-0">API Endpoints</h5>
      <span class="badge bg-primary">12 APIs</span>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-hover mb-0">
          <thead>
            <tr>
              <th>API Name</th>
              <th>Endpoint</th>
              <th>Method</th>
              <th>Description</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <div class="d-flex align-items-center">
                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
                    <i class="fas fa-bars" style="color: var(--primary-color);"></i>
                  </div>
                  <span>Menu Header API</span>
                </div>
              </td>
              <td><code>/api/header</code></td>
              <td>
                <span
                  class="badge"
                  style="background-color: var(--primary-color)"
                  >GET</span
                >
              </td>
              <td>API to get menu header data</td>
              <td>
                <a
                  href="/api/header"
                  class="btn btn-sm btn-outline-primary"
                  target="_blank"
                >
                  <i class="fas fa-external-link-alt me-1"></i>View
                </a>
              </td>
            </tr>
            <tr>
              <td>
                <div class="d-flex align-items-center">
                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
                    <i class="fas fa-home" style="color: var(--primary-color);"></i>
                  </div>
                  <span>Home API</span>
                </div>
              </td>
              <td><code>/api/home</code></td>
              <td>
                <span
                  class="badge"
                  style="background-color: var(--primary-color)"
                  >GET</span
                >
              </td>
              <td>API to get homepage data</td>
              <td>
                <a
                  href="/api/home"
                  class="btn btn-sm btn-outline-primary"
                  target="_blank"
                >
                  <i class="fas fa-external-link-alt me-1"></i>View
                </a>
              </td>
            </tr>
            <tr>
              <td>
                <div class="d-flex align-items-center">
                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
                    <i class="fas fa-info-circle" style="color: var(--primary-color);"></i>
                  </div>
                  <span>About API</span>
                </div>
              </td>
              <td><code>/api/about</code></td>
              <td>
                <span
                  class="badge"
                  style="background-color: var(--primary-color)"
                  >GET</span
                >
              </td>
              <td>API to get about page data</td>
              <td>
                <a
                  href="/api/about"
                  class="btn btn-sm btn-outline-primary"
                  target="_blank"
                >
                  <i class="fas fa-external-link-alt me-1"></i>View
                </a>
              </td>
            </tr>
            <tr>
              <td>
                <div class="d-flex align-items-center">
                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
                    <i class="fas fa-users" style="color: var(--primary-color);"></i>
                  </div>
                  <span>About Us API</span>
                </div>
              </td>
              <td><code>/api/about-us</code></td>
              <td>
                <span
                  class="badge"
                  style="background-color: var(--primary-color)"
                  >GET</span
                >
              </td>
              <td>API to get about us data</td>
              <td>
                <a
                  href="/api/about-us"
                  class="btn btn-sm btn-outline-primary"
                  target="_blank"
                >
                  <i class="fas fa-external-link-alt me-1"></i>View
                </a>
              </td>
            </tr>
            <tr>
              <td>
                <div class="d-flex align-items-center">
                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
                    <i class="fas fa-question-circle" style="color: var(--primary-color);"></i>
                  </div>
                  <span>FAQ API</span>
                </div>
              </td>
              <td><code>/api/faq</code></td>
              <td>
                <span
                  class="badge"
                  style="background-color: var(--primary-color)"
                  >GET</span
                >
              </td>
              <td>API to get FAQ data</td>
              <td>
                <a
                  href="/api/faq"
                  class="btn btn-sm btn-outline-primary"
                  target="_blank"
                >
                  <i class="fas fa-external-link-alt me-1"></i>View
                </a>
              </td>
            </tr>
            <tr>
              <td>
                <div class="d-flex align-items-center">
                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
                    <i class="fas fa-file-contract" style="color: var(--primary-color);"></i>
                  </div>
                  <span>Terms & Conditions API</span>
                </div>
              </td>
              <td><code>/api/terms</code></td>
              <td>
                <span
                  class="badge"
                  style="background-color: var(--primary-color)"
                  >GET</span
                >
              </td>
              <td>API to get terms & conditions data</td>
              <td>
                <a
                  href="/api/terms"
                  class="btn btn-sm btn-outline-primary"
                  target="_blank"
                >
                  <i class="fas fa-external-link-alt me-1"></i>View
                </a>
              </td>
            </tr>
            <tr>
              <td>
                <div class="d-flex align-items-center">
                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
                    <i class="fas fa-plane" style="color: var(--primary-color);"></i>
                  </div>
                  <span>Travel API</span>
                </div>
              </td>
              <td><code>/api/travel</code></td>
              <td>
                <span
                  class="badge"
                  style="background-color: var(--primary-color)"
                  >GET</span
                >
              </td>
              <td>API to get travel data</td>
              <td>
                <a
                  href="/api/travel"
                  class="btn btn-sm btn-outline-primary"
                  target="_blank"
                >
                  <i class="fas fa-external-link-alt me-1"></i>View
                </a>
              </td>
            </tr>
            <tr>
              <td>
                <div class="d-flex align-items-center">
                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
                    <i class="fas fa-shield-alt" style="color: var(--primary-color);"></i>
                  </div>
                  <span>Safety API</span>
                </div>
              </td>
              <td><code>/api/safety</code></td>
              <td>
                <span
                  class="badge"
                  style="background-color: var(--primary-color)"
                  >GET</span
                >
              </td>
              <td>API to get safety data</td>
              <td>
                <a
                  href="/api/safety"
                  class="btn btn-sm btn-outline-primary"
                  target="_blank"
                >
                  <i class="fas fa-external-link-alt me-1"></i>View
                </a>
              </td>
            </tr>
            <tr>
              <td>
                <div class="d-flex align-items-center">
                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
                    <i class="fas fa-campground" style="color: var(--primary-color);"></i>
                  </div>
                  <span>Camp Location API</span>
                </div>
              </td>
              <td><code>/api/camp-location</code></td>
              <td>
                <span
                  class="badge"
                  style="background-color: var(--primary-color)"
                  >GET</span
                >
              </td>
              <td>API to get camp location data</td>
              <td>
                <a
                  href="/api/camp-location"
                  class="btn btn-sm btn-outline-primary"
                  target="_blank"
                >
                  <i class="fas fa-external-link-alt me-1"></i>View
                </a>
              </td>
            </tr>

            <tr>
              <td>
                <div class="d-flex align-items-center">
                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
                    <i class="fas fa-sitemap" style="color: var(--primary-color);"></i>
                  </div>
                  <span>Menu Tree API</span>
                </div>
              </td>
              <td><code>/api/menu-tree</code></td>
              <td>
                <span
                  class="badge"
                  style="background-color: var(--primary-color)"
                  >GET</span
                >
              </td>
              <td>API to get menu tree data</td>
              <td>
                <a
                  href="/api/menu-tree"
                  class="btn btn-sm btn-outline-primary"
                  target="_blank"
                >
                  <i class="fas fa-external-link-alt me-1"></i>View
                </a>
              </td>
            </tr>
            <tr>
              <td>
                <div class="d-flex align-items-center">
                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
                    <i class="fas fa-envelope" style="color: var(--primary-color);"></i>
                  </div>
                  <span>Contact API</span>
                </div>
              </td>
              <td><code>/api/contact</code></td>
              <td>
                <span
                  class="badge"
                  style="background-color: var(--primary-color)"
                  >GET</span
                >
              </td>
              <td>API to get contact data</td>
              <td>
                <a
                  href="/api/contact"
                  class="btn btn-sm btn-outline-primary"
                  target="_blank"
                >
                  <i class="fas fa-external-link-alt me-1"></i>View
                </a>
              </td>
            </tr>
            <tr>
              <td>
                <div class="d-flex align-items-center">
                  <div class="rounded-circle d-flex align-items-center justify-content-center me-2"
                    style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
                    <i class="fas fa-blog" style="color: var(--primary-color);"></i>
                  </div>
                  <span>Blog API</span>
                </div>
              </td>
              <td><code>/api/blog</code></td>
              <td>
                <span
                  class="badge"
                  style="background-color: var(--primary-color)"
                  >GET</span
                >
              </td>
              <td>API to get blog posts</td>
              <td>
                <a
                  href="/api/blog"
                  class="btn btn-sm btn-outline-primary"
                  target="_blank"
                >
                  <i class="fas fa-external-link-alt me-1"></i>View
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- System Info -->
  <div class="card">
    <div
      class="card-header"
      style="
        background: linear-gradient(135deg, #0048b4, #0028b4);
        color: white;
      "
    >
      <h5 class="mb-0">System Information</h5>
    </div>
    <div class="card-body" style="background-color: #f8faf8">
      <div class="row">
        <div class="col-md-6">
          <div class="d-flex align-items-center mb-3">
            <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
              style="width: 40px; height: 40px; background-color: rgba(184, 183, 106, 0.1);">
              <i class="fas fa-info-circle" style="color: var(--primary-color);"></i>
            </div>
            </div>
            <div>
              <div class="text-muted small">Version</div>
              <div class="fw-bold" style="color: var(--primary-color)">
                CMS.HAILearning v1.0.0
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-6">
          <div class="d-flex align-items-center mb-3">
            <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
              style="width: 40px; height: 40px; background-color: rgba(184, 183, 106, 0.1);">
              <i class="fas fa-user" style="color: var(--primary-color);"></i>
            </div>
            <div>
              <div class="text-muted small">Logged in as</div>
              <div class="fw-bold" style="color: var(--primary-color);">
                <%= user.username %>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="alert mt-3 mb-0"
        style="background-color: rgba(184, 183, 106, 0.05); border-left: 4px solid var(--primary-color);" role="alert">
        <div class="d-flex">
          <div class="me-3">
            <i
              class="fas fa-lightbulb fa-lg"
              style="color: var(--primary-color)"
            ></i>
          </div>
          <div>
            <h6 class="mb-1" style="color: var(--primary-color)">Quick Tip</h6>
            <p class="mb-0 text-muted">
              Click the Edit button to make changes to your data.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .page-title {
    color: var(--primary-color);
    font-weight: 600;
  }

  .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
  }

  .btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white;
  }

  .btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
  }

  .btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
  }

  .card-header h5 {
    color: white;
  }

  .badge {
    background-color: var(--primary-color) !important;
    color: white;
  }
</style>
