{% cache globally using key "navMega" for 1 year %}
<div class="relative hidden lg:block w-full z-50" data-controller="mega-menu">
  <div class="sitecontainer">
    <nav class="pb-4">
    {% for entry in navigation.level(1) %}
      {% if loop.first %}
        <ul class="list-reset flex justify-between">
        <li class="pr-6 // border-r border-white-25">
          <a href="{{ siteUrl() }}" class="hover:text-lime {% if craft.request.firstSegment == '' %}text-lime{% else %}text-white{% endif %}" data-action="mouseover->mega-menu#close">
            <div class="w-5 // h-5 // fill-current // mr-2">
              {% include '_includes/svg/icon-home.svg' %}
              <span class="alt">Home</span>
            </div>
          </a>
        </li>
      {% endif %}
        <li class="pl-4 pr-8 // {% if not loop.last %}border-r border-white-25{% endif %}">
          <a href="#" class="text-white hover:text-lime flex items-center font-semibold"
            data-action="click->mega-menu#open"
            data-next="{{ entry.title|kebab }}">
              {{ entry.title }}
            {%- if (entry.hasDescendants or entry.type == 'contact' or 'directories') -%}
            <div class="ml-1 w-3 h-3 fill-current /// mt-1 flex flex-col justify-center">
              {% include '_includes/svg/icon-chevron.svg' %}
            </div>
            {%- endif -%}
          </a>
        </li>
        {% if loop.last %}</ul>{% endif %}
    {% endfor %}


    {% for entry in navigation.level(1) %}
    {% switch entry.type %}

      {% case 'contact' %}
      <div id="{{ entry.title|kebab }}" class="mt-10 hidden absolute pin-x bg-petrol p-4 z-10" data-target="mega-menu.menu">
        <div class="max-w-4xl flex flex-wrap pt-6 px-8 mx-auto">
          <div class="flex flex-col pr-12 mb-12 flex-1">
            <h3 class="mb-2 text-lg border-b border-petrol-light pb-2 font-semibold text-grey-lightest mb-6">
                {{ entry.title }}
            </h3>

          <div class="flex flex-wrap justify-between">
            <div class="w-1/2 pr-12 text-white leading-normal">
               <a href="mailto:{{ companyInformation.email }}" class="text-lime hover:text-white text-lg mb-6 inline-block">{{ companyInformation.email }}</a>

              {% if entry.body|length %}
                <div class="article">
                {{ entry.body }}
                </div>
              {% endif %}

              <p class="text-xs">
                ‘{{ siteName }}’ is a trading division of Judd and Judd Ltd, a company registered in England and Wales, registered number 8082403. Registered office: Suite 2, Douglas House, 32-34 Simpson Road, Fenny Stratford, Buckinghamshire, MK1 1BA, United Kingdom.
              </p>
            </div>

            <div class="pl-12">
              <div class="text-white mb-6">
                {% include '_includes/social/follow' %}
              </div>

            {% if entry.relatedContent|length %}
              {% for entry in entry.relatedContent %}
              {% if loop.first %}<ul class="list-reset">{% endif %}
                  <li class="text-white mb-2">
                    <a href="{{ entry.url }}" class="text-white hover:text-lime">{{ entry.title }}</a>
                  </li>
              {% if loop.last %}</ul>{% endif %}
              {% endfor %}
            {% endif %}
            </div>
          </div>
        </div>
      </div>

      {% case "directories" %}
      <div id="{{ entry.title|kebab }}" class="mt-10 hidden absolute pin-x bg-petrol p-4 z-10" data-target="mega-menu.menu">
        <div class="flex flex-wrap pt-6 px-8 mx-auto">
            <div class="flex flex-col pr-12 mb-12 flex-1">
              <h3 class="mb-2 text-lg border-b border-petrol-light pb-2 font-semibold text-grey-lightest mb-6">
                  {{ entry.title }}
              </h3>

            <div class="flex flex-wrap justify-between">
              <div class="pr-12 text-white leading-normal">
                {% if entry.body|length %}
                  {{ entry.body }}
                {% endif %}

                {% if entry.relatedContent|length %}
                  {% for entry in entry.relatedContent %}
                  {% if loop.first %}<ul class="list-reset">{% endif %}
                      <li class="text-white mb-2 {% if loop.last %}mt-6 pt-4 border-t border-petrol-light{% endif %}">
                        <a href="{{ entry.url }}" class="text-white hover:text-lime text-sm">{{ entry.title }}</a>
                      </li>
                  {% if loop.last %}</ul>{% endif %}
                  {% endfor %}
                {% endif %}
              </div>

              <div class="pl-6 flex-1 flex flex-wrap">
                <h3 class="mb-2 text-lg text-white mb-6 w-full">Latest Updates</h3>
                {% for entry in directories %}
                  {% set logo = entry.logo[0] ?? null %}
                  <article class="flex /// w-1/2 px-6 mb-6">
                  <div class="flex items-center justify-center w-32 bg-white p-2">
                    {% if logo|length %}
                    <a href="{{ entry.url }}">
                      <div class="text-center">
                        {% include '_includes/partials/logo' with { classes: 'p-2 bg-white w-full' } %}
                      </div>
                    </a>
                    {% else %}
                      {% include '_includes/directories/articleImage' %}
                    {% endif %}
                  </div>
                  <div class="pl-4 /// flex-1 flex flex-col justify-center">
                    <h3 class="mb-2"><a href="{{ entry.url }}" class="text-lime hover:text-blue text-lg font-semibold">{{ entry.title }}</a></h3>
                    <p class="text-sm mb-0 text-petrol-light">{{ entry.section }}</p>
                  </div>
                </article>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>

      {% default %}
      <div id="{{ entry.title|kebab }}" class="mt-10 hidden absolute pin-x bg-petrol p-4 z-10" data-target="mega-menu.menu">
        <div class="flex flex-wrap pt-6 px-8 mx-auto">
          {% for entry in entry.children %}
            <div class="flex flex-col pr-12 mb-12 flex-1">
                <h3 class="mb-2 text-lg border-b border-petrol-light pb-2 font-semibold text-grey-lightest mb-6">
                    {{ entry.title }}
                </h3>
                <ul class="list-reset">
                {% nav entry in entry.children %}
                  <li class="mb-2">
                  {%- switch entry.type.handle -%}
                    {% case "externalLink" %}
                    <a href="{{ entry.website }}" target="blank" class="text-sm text-white hover:text-lime">{{ entry.title }}</a></li>
                    {% case "page"  %}
                    {%- if entry.singleEntry.first|length -%}
                    <a href="{{ entry.singleEntry.first.url() }}" class="text-sm text-white hover:text-lime">{{ entry.title }}</a></li>
                    {%- endif -%}
                    {% default %}
                    {{ entry.title }}
                  {%- endswitch -%}

                    {% ifchildren %}
                    <ul class="ml-4">
                      {% children %}
                    </ul>
                    {% endifchildren %}
                  </li>
                {% endnav %}
                </ul>
            </div>
           {% endfor %}
        </div>
      </div>
      {% endswitch %}
    {% endfor %}
    </nav>
  </div>
</div>
{% endcache %}