{%- set section = get_page(path="header/index.md") %}
{% set header_items = section.content | safe | split(pat="<li>") %}

<header id="header-container">
    <div class="z-20 fixed top-0 left-0 right-0  lg:absolute w-full">
        <div class="relative z-50">
        <div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
            {# <div>
                <a href="{{get_url(path='/')}}" class="flex">
                    <img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="Mycelium Logo" />
                </a>
            </div> #}
            <a href="{{ get_url(path='/') }}" class="flex">

              <img id="lightLogo" src="{{ get_url(path=section.extra.logoPathLight) }}" alt="Light Logo" class="logo light w-36 h-auto" style="max-width: none;">
              <img id="darkLogo" src="{{ get_url(path=section.extra.logoPathDark) }}" alt="Dark Logo" class="logo dark w-36 h-auto" style="max-width: none;">
            </a>
            <div class="-mr-2 -my-2 lg:hidden">
                <button id="hamburger-btn" type="button" class="bg-white inline-flex items-center justify-center p-2 border border-gray-900 rounded-md transition duration-200 ease-in-out">
                    <!-- Heroicon name: menu -->
                    <svg class="h-6 w-6 text-gray-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>
            <button id="close-hamburger-btn" type="button" class="bg-white  hidden lg:hidden items-center justify-center p-2 border border-gray-900 rounded-md transition duration-250 ease-in-out">
                <!-- Heroicon name: x -->
                <svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
                </button>
            </div>
            <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-between lg:space-x-6">
            <nav class="flex space-x-10">
            {% for header_item in header_items %}
            {% if not loop.first %}
                {% set header_arr = header_item | split(pat="</li>") %}
                {% set header_label = header_arr[0] %}
                {% if '<a' in header_label %}
                    {% set link_label = header_label | striptags %}
                    {% set link_path = header_label | split(pat="%22") | safe%}
                    {% set current = get_url(path=link_path[1]) ~ "/" %}
                    {% if header_label is containing("http") %}
                        {% if header_label is not containing("threefold") %}
                        <a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide transition ease-in-out duration-150">
                            {{link_label}}
                        </a>
                        {% endif %}
                      {% elif current_url and current == current_url %}
                          <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-light active text-pretty tracking-wide transition ease-in-out duration-150">
                            {{link_label}}
                          </a>
                      {% else %}
                        <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-light  text-pretty tracking-wide transition ease-in-out duration-150">
                          {{link_label}}
                        </a>
                      {% endif %}
                {% else %}
                    <div class="relative">
                        {% set button_id = header_label ~ "-menu-btn" | slugify %}
                    <button type="button" id="{{button_id}}" class="bg-transparent nav_btn py-3   group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
                        <span>{{ header_label }}</span>
                        <div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
                    </button>
                    </div>

                {% endif %}  
            {% endif %}
            {% endfor %}
                <a href="https://threefold.info/mycelium/docs/" 
                class="text-lg py-3 leading-6 font-light text-pretty tracking-wide  focus:outline-none focus:text-gray-200 transition ease-in-out duration-150" target="_blank">
                Docs
                </a>
            </nav>

            <div class="hidden md:inline-block md:order-last">
                <div class="inline-flex justify-center items-center">
                  {# <ul class="list-none inline-flex mt-5 mr-4 mx-auto">
                    <li class="ml-4">
                      <a href="https://t.me/threefoldnews" target="_blank" class="">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="18"
                          height="18"
                          fill="currentColor"
                          class="bi bi-telegram"
                          viewBox="0 0 16 16"
                        >
                          <path
                            d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"
                          />
                        </svg>
                      </a>
                    </li>
        
                    <li class="ml-4">
                      <a
                        href="javascript:;"
                        onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
                        class=""
                      >
                        <svg
                          aria-hidden="true"
                          focusable="false"
                          data-prefix="far"
                          data-icon="envelope"
                          class="h-5 w-5"
                          role="img"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 512 512"
                        >
                          <path
                            fill="currentColor"
                            d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"
                          ></path>
                        </svg>
                      </a>
                    </li> 
                  </ul> #}


                <div class="theme-toggle mx-4">
                  <label for="lightModeSwitch" class="switch">
                      <i class="fa-solid fa-sun" id="lightIcon"></i>
                      <input type="checkbox" id="lightModeSwitch">
                      <span class="slider"></span>
                      <i class="fas fa-moon" id="darkIcon"></i>
                  </label>
              </div>
           
                    <a href="/download" class="blinking-effect dashboard rounded-2xl border border-gray-200 bg-black px-4 p-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-600">Get Mycelium</a>

                </div>
              </div>
            </div>
        </div>
        </div>
                        {% for header_item in header_items %}
                          {% if not loop.first %}
                              {% set header_arr = header_item | split(pat="</li>") %}
                              {% set header_label = header_arr[0] %}
                              {% set header_menu = header_arr[1] %}
                              {% set menu_id = header_label ~ "-menu" | slugify %}

<nav>
    <div id="{{menu_id}}" class="nav_menu mt-0 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-50 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
        <div style="background-color: rgb(235, 235, 235);">
            <div id="menu" class="conatiner mx-auto">
                {{header_menu | safe }}
            </div>
        </div>            
        </div>
    </nav>


{% endif %}
{% endfor %}

    
        <!--
        Mobile menu, show/hide based on mobile menu state.
    
        Entering: "duration-200 ease-out"
            From: "opacity-0 scale-95"
            To: "opacity-100 scale-100"
        Leaving: "duration-100 ease-in"
            From: "opacity-100 scale-100"
            To: "opacity-0 scale-95"
        -->
    <div id="hamburger" class="hidden fixed mt-14 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
        <div>
            <div style="background-color: rgb(255, 255, 255);" class="shadow-xs h-screen divide-y-2 divide-gray-50">
                <div class="pb-6 sm:px-12 md:px-16 mt-0 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">

                    <nav class="flex flex-col justify-around pb-12">
                    {% for header_item in header_items %}

                        {% if not loop.first %}
                            {% set header_arr = header_item | split(pat="</li>") %}
                            {% set header_label = header_arr[0] %}
                            {% if '<a' in header_label %}
                                {% set link_label = header_label | striptags %}
                                {% set link_path = header_label | split(pat="%22") | safe%}
                                {% if header_label is containing("http") %}
                                    {% if header_label is not containing("threefold") %}
                                    <a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal  hover:text-gray-600 focus:outline-none focus:text-gray-50 transition ease-in-out duration-150">
                                        {{link_label}}
                                    </a>
                                    {% endif %}
                                {% else %}
                                <a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal  hover: focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
                                    {{link_label}}
                                </a>
                                {% endif %}
                            {% else %}
                                {% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
                                    <button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left  group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus: transition ease-in-out duration-150">
                                        {{ header_label }}
                                        <div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
                                    </button>
                                    {% set menu_id = header_label ~ "-mobile-menu" | slugify %}
                                    <div id="{{menu_id}}" class="z-50 leading-3 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
                                        {{ header_arr[1] | safe }}
                                    </div>
                    
                            {% endif %}
                            <hr/>
                        {% endif %}
                    {% endfor %}
                    {% set section = get_section(path="footer/_index.md")%}
                    {%- set logoPath = section.extra.logoPath %}
                    {# <div class="mx-8 mt-8">
                        <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
                          <img class="w-32 h-auto" src="{{get_url(path=logoPath)}}" alt="Company name" />
                          <p class="text-gray-500 text-base leading-6 ">
                            {{section.description}}
                          </p>
                          {% include "partials/socialLinks.html" %}
                      </div> #}
                      <a href="https://threefold.info/mycelium/docs/" 
                      class="text-lg px-8 py-3 leading-6 font-normal  hover:text-gray-600 focus:outline-none focus:text-gray-50 transition ease-in-out duration-150" target="_blank">
                      Docs
                      </a>
                      <div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4">
                        <a href="/download" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold  shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Get Mycelium</a>
                      </div>
                    </nav>                    
                </div>
                
          </div>
        
        </div>
    </div>


</header>

<style>

  nav a:hover{
  color: #c7c7c7 !important;
}

.active{
  color: #000000 !important;
}
.nav_btn:hover {
  color: #c7c7c7 !important;
}

.theme-toggle {
  border: none !important;
  box-shadow: none !important;
}

/* logo image */

.light {
  
  display: block; /* Show dark logo by default */
}
.dark {
   
  display: none; /* Hide light logo by default */
}

.light-mode .light {
  
  display: none; /* Hide dark logo in light mode */
}
.light-mode .dark {

  display: block;/* Show light logo in light mode */
}


/* Styling for the switch container */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 50px;
  height: 25px;
  background: #ccc;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

/* Hide the default checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider (toggle button) */
.slider {
  position: absolute;
  top: 2px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s ease-in-out;
}

/* Show moon by default (dark mode) */
#lightIcon {
  display: block;
  margin-left: 5px;
  color: white;
}
#darkIcon {
  display: inline-block;
  margin-left: 5px;
}

/* When light mode is active */
.light-mode .switch {
  background: #111; /* Dark background in light mode */
}
.light-mode .slider {
  transform: translateX(25px); /* Move slider to the right */
}
.light-mode #lightIcon {
  display: inline-block;
  color: white;
}
.light-mode #darkIcon {
  display: none;
}

</style>