---
import Head from "@components/_head.astro"
import Footer from "@components/dashboard/_footer.astro"
import Topbar from "@components/dashboard/_topbar.astro"
import MainHeader from "@components/docs/components/main-header.mdx"
import Sidenav from "@components/dashboard/_sidenav.astro"
import Scripts from "@components/_scripts.astro"

const title = "Main Header Component | AdminLTE 4"
const path = "../../../../dist"
const mainPage = "components"
const page = "main-header"

// Smart path resolution: calculate relative path based on directory depth
const pathname = Astro.url.pathname;
const pathSegments = pathname.split('/').filter(segment => segment !== '');
const depth = pathSegments.length > 0 ? pathSegments.length - 1 : 0;
const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
---

<!DOCTYPE html>
<html lang="en">
  <!--begin::Head-->
  <head>
    <Head title={title} path={path} />
  </head>
  <!--end::Head-->
  <!--begin::Body-->
  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <!--begin::App Wrapper-->
    <div class="app-wrapper">
      <Topbar path={path} />
      <Sidenav path={path} mainPage={mainPage} page={page} />
      <!--begin::App Main-->
      <main class="app-main">
        <!--begin::App Content Header-->
        <div class="app-content-header">
          <!--begin::Container-->
          <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
              <div class="col-sm-6">
                <h3 class="mb-0">Main Header Component</h3>
              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
                  <li class="breadcrumb-item active" aria-current="page">
                    Main Header Component
                  </li>
                </ol>
              </div>
            </div>
            <!--end::Row-->
          </div>
          <!--end::Container-->
        </div>
        <!--end::App Content Header-->
        <!--begin::App Content-->
        <div class="app-content">
          <!--begin::Container-->
          <div class="container-fluid">
            <div class="callout callout-warning mb-4">
              <h5 class="fw-bold">Reminder!</h5>
              <p>
                AdminLTE uses all of Bootstrap 5 components. It's a good start
                to review the <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer" class="callout-link">
                  Bootstrap documentation
                </a> to get an idea of the
                various components that this documentation <b>does not</b> cover.
              </p>
            </div>

            <div class="callout callout-info mb-4">
              <h5 class="fw-bold">Tips!</h5>
              <p>
                If you go through the example pages and would like to copy a
                component, right-click on the component and choose “inspect
                element” to get to the HTML quicker than scanning the HTML page.
              </p>
            </div>

            <!-- Navbar -->
            <nav class="navbar navbar-expand bg-body">
              <!--begin::Container-->
              <div class="container-fluid">
                <!-- Start navbar links -->
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a
                      class="nav-link"
                      data-lte-toggle="sidebar"
                      href="#"
                      role="button"
                    >
                      <i class="bi bi-list"></i>
                    </a>
                  </li>
                  <li class="nav-item d-none d-md-block">
                    <a href="#" class="nav-link">Home</a>
                  </li>
                  <li class="nav-item d-none d-md-block">
                    <a href="#" class="nav-link">Contact</a>
                  </li>
                </ul>
                <!-- End navbar links -->

                <ul class="navbar-nav ms-auto">
                  <!-- Navbar Search -->
                  <li class="nav-item">
                    <a
                      class="nav-link"
                      data-widget="navbar-search"
                      href="#"
                      role="button"
                    >
                      <i class="bi bi-search"></i>
                    </a>
                  </li>

                  <!-- Messages Dropdown Menu -->
                  <li class="nav-item dropdown">
                    <a class="nav-link" data-bs-toggle="dropdown" href="#">
                      <i class="bi bi-chat-text"></i>
                      <span class="navbar-badge badge text-bg-danger">3</span>
                    </a>
                    <div
                      class="dropdown-menu dropdown-menu-lg dropdown-menu-end"
                    >
                      <a href="#" class="dropdown-item">
                        <!-- Message Start -->
                        <div class="d-flex">
                          <div class="flex-shrink-0">
                            <img
                              src={deploymentPath + "assets/img/user1-128x128.jpg"}
                              alt="User Avatar"
                              class="img-size-50 rounded-circle me-3"
                            />
                          </div>
                          <div class="flex-grow-1">
                            <h3 class="dropdown-item-title">
                              Brad Diesel
                              <span class="float-end fs-7 text-danger">
                                <i class="bi bi-star-fill"></i>
                              </span>
                            </h3>
                            <p class="fs-7">Call me whenever you can...</p>
                            <p class="fs-7 text-secondary">
                              <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
                            </p>
                          </div>
                        </div>
                        <!-- Message End -->
                      </a>
                      <div class="dropdown-divider"></div>
                      <a href="#" class="dropdown-item">
                        <!-- Message Start -->
                        <div class="d-flex">
                          <div class="flex-shrink-0">
                            <img
                              src={deploymentPath + "assets/img/user8-128x128.jpg"}
                              alt="User Avatar"
                              class="img-size-50 rounded-circle me-3"
                            />
                          </div>
                          <div class="flex-grow-1">
                            <h3 class="dropdown-item-title">
                              John Pierce
                              <span class="float-end fs-7 text-secondary">
                                <i class="bi bi-star-fill"></i>
                              </span>
                            </h3>
                            <p class="fs-7">I got your message bro</p>
                            <p class="fs-7 text-secondary">
                              <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
                            </p>
                          </div>
                        </div>
                        <!-- Message End -->
                      </a>
                      <div class="dropdown-divider"></div>
                      <a href="#" class="dropdown-item">
                        <!-- Message Start -->
                        <div class="d-flex">
                          <div class="flex-shrink-0">
                            <img
                              src={deploymentPath + "assets/img/user3-128x128.jpg"}
                              alt="User Avatar"
                              class="img-size-50 rounded-circle me-3"
                            />
                          </div>
                          <div class="flex-grow-1">
                            <h3 class="dropdown-item-title">
                              Nora Silvester
                              <span class="float-end fs-7 text-warning">
                                <i class="bi bi-star-fill"></i>
                              </span>
                            </h3>
                            <p class="fs-7">The subject goes here</p>
                            <p class="fs-7 text-secondary">
                              <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
                            </p>
                          </div>
                        </div>
                        <!-- Message End -->
                      </a>
                      <div class="dropdown-divider"></div>
                      <a href="#" class="dropdown-item dropdown-footer">
                        See All Messages
                      </a>
                    </div>
                  </li>
                  <!-- Notifications Dropdown Menu -->
                  <li class="nav-item dropdown">
                    <a class="nav-link" data-bs-toggle="dropdown" href="#">
                      <i class="bi bi-bell-fill"></i>
                      <span class="navbar-badge badge text-bg-warning">15</span>
                    </a>
                    <div
                      class="dropdown-menu dropdown-menu-lg dropdown-menu-end"
                    >
                      <span class="dropdown-item dropdown-header"
                      >15 Notifications</span
                      >
                      <div class="dropdown-divider"></div>
                      <a href="#" class="dropdown-item">
                        <i class="bi bi-envelope me-2"></i> 4 new messages
                        <span class="float-end text-secondary fs-7">3 mins</span
                        >
                      </a>
                      <div class="dropdown-divider"></div>
                      <a href="#" class="dropdown-item">
                        <i class="bi bi-people-fill me-2"></i> 8 friend requests
                        <span class="float-end text-secondary fs-7">
                          12 hours
                        </span>
                      </a>
                      <div class="dropdown-divider"></div>
                      <a href="#" class="dropdown-item">
                        <i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
                        <span class="float-end text-secondary fs-7">
                          2 days
                        </span>
                      </a>
                      <div class="dropdown-divider"></div>
                      <a href="#" class="dropdown-item dropdown-footer">
                        See All Notifications
                      </a>
                    </div>
                  </li>
                  <li class="nav-item dropdown user-menu">
                    <a
                      href="#"
                      class="nav-link dropdown-toggle"
                      data-bs-toggle="dropdown"
                    >
                      <img
                        src={deploymentPath + "assets/img/user2-160x160.jpg"}
                        class="user-image rounded-circle shadow"
                        alt="User Image"
                      />
                      <span class="d-none d-md-inline">Alexander Pierce</span>
                    </a>
                    <ul
                      class="dropdown-menu dropdown-menu-lg dropdown-menu-end"
                    >
                      <!-- User image -->
                      <li class="user-header text-bg-primary">
                        <img
                          src={deploymentPath + "assets/img/user2-160x160.jpg"}
                          class="rounded-circle shadow"
                          alt="User Image"
                        />

                        <p>
                          Alexander Pierce - Web Developer
                          <small>Member since Nov. 2023</small>
                        </p>
                      </li>
                      <!-- Menu Body -->
                      <li class="user-body">
                        <!--begin::Row-->
                        <div class="row">
                          <div class="col-4 text-center">
                            <a href="#">Followers</a>
                          </div>
                          <div class="col-4 text-center">
                            <a href="#">Sales</a>
                          </div>
                          <div class="col-4 text-center">
                            <a href="#">Friends</a>
                          </div>
                        </div>
                        <!--end::Row-->
                      </li>
                      <!-- Menu Footer-->
                      <li class="user-footer">
                        <a href="#" class="btn btn-default btn-flat">Profile</a>
                        <a href="#" class="btn btn-default btn-flat float-end">
                          Sign out
                        </a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
              <!--end::Container-->
            </nav>
            <!-- /.navbar -->

            <MainHeader />
          </div>
          <!--end::Container-->
        </div>
        <!--end::App Content-->
      </main>
      <!--end::App Main-->
      <Footer />
    </div>
    <!--end::App Wrapper-->
    <!--begin::Script-->
    <Scripts path={path} />
    <!--end::Script-->
  </body><!--end::Body-->
</html>
