{%- assign section = site.data.nav.sections[page.nav_group] -%}

<nav class="navbar navbar-expand-lg">
  <div class="container">

    <!-- Logo -->
    <a class="navbar-brand text-nowrap me-2" href="https://jacobrcampbell.com">
      {%- if section %}
      {%- assign full_from = section.full_name_from | default: 576 -%}
      <!-- With a section label, the full name shows only where it fits on one line (nav.yml full_name_from) -->
      <style>
        @media (max-width: {{ full_from | minus: 0.02 }}px) { .brand-full { display: none; } }
        @media (min-width: {{ full_from }}px) { .brand-initials { display: none; } }
      </style>
      {%- endif %}
      <span class="brand-full">
        <span class="h2 orange">| </span>
        <span class="h2 fw-bolder">Jacob </span>
        <span class="h2 text-body-secondary">Campbell, </span>
        <span class="h2 align-bottom orange">...</span>
      </span>
      {%- if section %}
      <!-- Initials on narrow screens, so the section label and menu button stay on one line -->
      <span class="brand-initials"><span class="h2 orange">| </span><span class="h2 fw-bolder">J</span><span class="h2 text-body-secondary">C</span><span class="h2 align-bottom orange">...</span></span>
      {%- endif %}
    </a>

    {%- if section -%}
      <!-- Page context label (not a second brand) -->
      <a class="navbar-text h2 mb-0 text-uppercase fw-bold text-nowrap text-decoration-none me-auto" href="{{ section.header_url | relative_url }}">
        {{ section.header_text }}
      </a>
    {%- endif -%}

    <!-- Toggler button -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse ms-auto" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-stretch align-items-lg-center text-center text-lg-start">

        {%- for item in site.data.nav.links -%}
          {%- comment -%}
            Skip the link pointing at the section you are already in.
          {%- endcomment -%}
          {%- unless section and item.url == section.header_url -%}
            {%- assign is_active = item.url | relative_url | append: "" -%}
            <li class="nav-item">
              <a class="nav-link{% if page.url contains item.url %} text-decoration-underline fw-bold{% endif %}" href="{{ item.url | relative_url }}">
                {{ item.title }}
              </a>
            </li>
          {%- endunless -%}
        {%- endfor -%}

        <!-- Search -->
        <li class="nav-item d-flex align-items-center position-relative order-last order-lg-0" id="navbar-search">
          <i class="fa-solid fa-magnifying-glass search-toggle" role="button" aria-label="Toggle search"></i>
          <input
            id="search-box"
            type="search"
            class="form-control form-control-sm search-input"
            placeholder="Search…"
            aria-label="Search">
          <ul id="search-results" class="search-results dropdown-menu show" style="display:none;"></ul>
        </li>

        <!-- Light/Dark Mode Selection -->
        <li class="nav-item dropdown">
          <button class="btn btn-link nav-link px-0 px-lg-2 py-2 dropdown-toggle d-flex align-items-center"
            id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static"
            aria-label="Toggle theme (auto)">
            <svg class="bi my-1 theme-icon-active" aria-hidden="true"><use href="#circle-half"></use></svg>
            <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
          </button>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
            <li>
              <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
                <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#sun-fill"></use></svg>
                Light
                <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
              </button>
            </li>
            <li>
              <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
                <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#moon-stars-fill"></use></svg>
                Dark
                <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
              </button>
            </li>
            <li>
              <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
                <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#circle-half"></use></svg>
                Auto
                <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
              </button>
            </li>
          </ul>
        </li>

      </ul>
    </div>
  </div>
</nav>

<hr class="shadow opacity-50">

{%- if page.nav_group == "presentations" or page.layout contains "presentation" -%}
<div class="accordion accordion-flush container-lg" id="accordionFlushPresentationPages">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed fw-lighter" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
        <i class="fa-solid fa-person-chalkboard"></i>
        &nbsp; Presentation's Pages
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushPresentationPages">
      <div class="container-lg">
        <ul class="list-group list-group-horizontal small fw-lighter text-decoration-none text-center">
          <li class="list-group-item{% if page.url == '/' | relative_url %} active{% endif %}"><a href="{{ '/' | relative_url }}">Presentation Home</a></li>
          <li class="list-group-item{% if page.url == '/bio/' | relative_url %} active{% endif %}"><a href="{{ '/bio/' | relative_url }}">About Presentations</a></li>
          <li class="list-group-item{% if page.url == '/all-presentations/' | relative_url %} active{% endif %}"><a href="{{ '/all-presentations/' | relative_url }}">All Presentations</a></li>
          <li class="list-group-item{% if page.url == '/presentation-tags/' | relative_url %} active{% endif %}"><a href="{{ '/presentation-tags/' | relative_url }}">Presentations by Tags</a></li>
          <li class="list-group-item{% if page.url == '/all-videos/' | relative_url %} active{% endif %}"><a href="{{ '/all-videos/' | relative_url }}">Presentations with Videos</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
{%- endif -%}