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

<header id="header-container">
    <div class="z-10 bg-white fixed w-full top-0">
        <div class="relative z-50 shadow">
        <div class="mx-auto flex z-50 shadow justify-between items-center px-6 sm:px-4 md:px-6 py-2 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
            <div>
                <a href="{{get_url(path='/')}}" class="flex">
                    <img class="w-16 h-auto sm:w-15" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
                </a>
            </div>
            <div class="-mr-2 -my-2 lg:hidden">
                <button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
                    <!-- Heroicon name: menu -->
                    <svg class="h-6 w-6" 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="hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
                <!-- Heroicon name: x -->
                <svg class="h-6 w-6" 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 leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
                            {{link_label}}
                        </a>
                        {% endif %}

                    {% elif current == current_url %}
                    <a href="{{ get_url(path=link_path[1])}}" class="text-lg leading-6 font-medium active hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
                      {{ link_label }}
                    </a>

                    {% else %}
                    <a href="{{ get_url(path=link_path[1])}}" class="text-lg leading-6 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
                      {{ link_label }}
                    </a>
   
                    {% endif %}
                {% else %}
                    <div class="relative">
                        {% set button_id = header_label ~ "-menu-btn" | slugify %}
                    <button type="button" id="{{button_id}}" class="nav_btn font-medium text-gray-900 hover:text-gray-500 group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-gray-500 focus:outline-none transition ease-in-out duration-150">
                        <span>{{ header_label }}</span>
                        <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><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 %}
            </nav>

            <div class="hidden md:inline-block md:order-last">
                <div class="inline-flex">
                  <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="text-black">
                        <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="text-black"
                      >
                        <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="rounded-full border-2 mt-1 border-gray-400">
                    <a href="https://library.threefold.me/info/threefold#/tokens/threefold__token_howtos" target="_blank" class="mt-2">
                      <img
                        src="{{ get_url(path=section.extra.button_Path) }}"
                        class="mr-5"
                        style="max-width: none;"
                        alt=""
                      />
                    </a>
                  </div>
                </div>
              </div>
            </div>
        </div>
        </div>


    
        <!--
        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-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
        <div>
            <div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
                <div class="pb-6 sm:px-12 md:px-16 mt-2 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%}
                                {% 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 px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
                                        {{link_label}}
                                    </a>
                                    {% endif %}
                                {% elif current == current_url %}
                                    <a href="{{ get_url(path=link_path[1])}}" class="active text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
                                      {{link_label}}
                                  </a>
                                {% else %}
                                <a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
                                    {{link_label}}
                                </a>
                                {% endif %}
                            {% else %}
                                {% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
                                    <button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
                                        <span>{{ header_label }}</span>
                                        <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><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 pl-12 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>
                    </nav>                    
                </div>
            
        </div>
        
        </div>
    </div>


</header>