{# Make sure any variables are listed inside the following if statement #}
{% if context %}
  {# {% set vf-mega-menu = context.vf-mega-menu %} #}
{% endif %}

{# It is recommended to put your mega menu links at the vf-global-header level #}
<header class="vf-global-header vf-mega-menu" data-vf-js-mega-menu role="menubar">
  <a href="/" class="vf-logo | vf-logo--has-text">
    <img class="vf-logo__image" src="../../assets/vf-logo/assets/logo.svg" alt="Visual Framework for Life Science websites" loading="eager">
    <span class="vf-logo__text">Visual Framework for Life Science websites</span>
  </a>

  <nav class="vf-navigation vf-navigation--global | vf-cluster">
    <ul class="vf-navigation__list | vf-list | vf-cluster__inner">
      <li class="vf-navigation__item">
        <a class="vf-navigation__link vf-mega-menu__link vf-mega-menu__link--has-section"
          data-vf-js-mega-menu-section-id="demo-topics-content-section" href="/topics">
          Topics
        </a>
      </li>
      <li class="vf-navigation__item">
        <a class="vf-navigation__link vf-mega-menu__link vf-mega-menu__link--has-section"
          data-vf-js-mega-menu-section-id="demo-organization-content-section" href="/organization">
          Organization structure
        </a>
      </li>
      <li class="vf-navigation__item">
        <a href="http://www.embl.org" class="vf-navigation__link vf-mega-menu__link">Normal link</a>
      </li>
      <li class="vf-navigation__item">
        <a href="http://www.embl.org/about" class="vf-navigation__link">About us</a>
      </li>
      <li class="vf-navigation__item">
        <a class="vf-navigation__link vf-mega-menu__link" data-vf-js-mega-menu-section-id="demo-search-content-section" href="/search">
          Search
        </a>
      </li>
    </ul>
  </nav>
</header>

<div class="vf-mega-menu__content">
  <div class="vf-mega-menu__content__section" data-vf-js-mega-menu-section="demo-topics-content-section" role="menu" aria-hidden="true">
    <section class="vf-summary-container | embl-grid">
      <div class="vf-section-header">
        <h2 class="vf-section-header__heading">EMBL topics</h2>
        <p class="vf-section-header__text">A unique approach to scientific services in Europe</p>
      </div>
      <div class="vf-section-content | vf-grid vf-grid__col-3">
        <div>
          <nav class="vf-navigation vf-navigation--main">
            <ul class="vf-navigation__list | vf-list | vf-cluster__inner | vf-stack vf-stack--200">
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Release Notes</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">FAQ</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Help</a>
              </li>
            </ul>
          </nav>
        </div>
        <div>
          <nav class="vf-navigation vf-navigation--main">
            <ul class="vf-navigation__list | vf-list | vf-cluster__inner | vf-stack vf-stack--200">
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Release Notes</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">FAQ</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Help</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Licence</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">About</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Feedback</a>
              </li>
            </ul>
          </nav>
        </div>
        <div>
          <nav class="vf-navigation vf-navigation--main">
            <ul class="vf-navigation__list | vf-list | vf-cluster__inner | vf-stack vf-stack--200">
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Release Notes</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">FAQ</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Help</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Licence</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">About</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Feedback</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </section>
  </div>
  <div class="vf-mega-menu__content__section" data-vf-js-mega-menu-section="demo-organization-content-section" role="menu" aria-hidden="true">
    <section class="vf-summary-container | embl-grid">
      <div class="vf-section-header">
        <h2 class="vf-section-header__heading">Our organization</h2>
        <p class="vf-section-header__text">About our org</p>
      </div>
      <div class="vf-section-content | vf-grid vf-grid__col-3">
        <div>
          <nav class="vf-navigation vf-navigation--main">
            <ul class="vf-navigation__list | vf-list | vf-cluster__inner | vf-stack vf-stack--200">
              {% render '@vf-section-header', {
                "section_title": "A header",
                "id": "",
                "href": ""
              } %}
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Release Notes</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">FAQ</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Help</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Licence</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">About</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Feedback</a>
              </li>
            </ul>
          </nav>
        </div>
        <div>
          <nav class="vf-navigation vf-navigation--main">
            <ul class="vf-navigation__list | vf-list | vf-cluster__inner | vf-stack vf-stack--200">
              {% render '@vf-section-header', {
                "section_title": "A header",
                "id": "",
                "href": ""
              } %}
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Release Notes</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">FAQ</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Help</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Licence</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">About</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Feedback</a>
              </li>
            </ul>
          </nav>
        </div>
        <div>
          <nav class="vf-navigation vf-navigation--main">
            <ul class="vf-navigation__list | vf-list | vf-cluster__inner | vf-stack vf-stack--200">
              {% render '@vf-section-header', {
                "section_title": "A header",
                "id": "",
                "href": ""
              } %}
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Download</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Release Notes</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">FAQ</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Help</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Licence</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">About</a>
              </li>
              <li class="vf-navigation__item">
                <a href="JavaScript:Void(0);" class="vf-navigation__link">Feedback</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </section>
  </div>
  <div class="vf-mega-menu__content__section" data-vf-js-mega-menu-section="demo-search-content-section" role="menu" aria-hidden="true">
    <form action="#" class="vf-form vf-form--search vf-form--search--responsive | vf-sidebar vf-sidebar--end">
      <div class="vf-sidebar__inner">
        <div class="vf-form__item">
          <label class="vf-form__label vf-u-sr-only | vf-search__label" for="searchitem">Search</label>
          <input type="search" placeholder="Enter your search terms" id="searchitem" class="vf-form__input" />
        </div>

        <button type="submit" class="vf-search__button | vf-button vf-button--primary">
          <span class="vf-button__text">Search</span>

          <svg class="vf-icon vf-icon--search-btn | vf-button__icon" aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
            xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 140 140" width="140" height="140">
            <g transform="matrix(5.833333333333333,0,0,5.833333333333333,0,0)">
              <path
                d="M23.414,20.591l-4.645-4.645a10.256,10.256,0,1,0-2.828,2.829l4.645,4.644a2.025,2.025,0,0,0,2.828,0A2,2,0,0,0,23.414,20.591ZM10.25,3.005A7.25,7.25,0,1,1,3,10.255,7.258,7.258,0,0,1,10.25,3.005Z"
                fill="#FFFFFF" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0">
              </path>
            </g>
          </svg>
        </button>
      </div>
      <div class="vf-section-header vf-u-margin__bottom--400 vf-u-margin__top--800">
        <h2 class="vf-section-header__heading" id="section-text">
          Popular links
        </h2>
      </div>
    </form>
    <ul class="vf-list vf-u-margin__bottom--800">
      <li class="vf-list__item">a list item</li>
      <li class="vf-list__item">another list item</li>
      <li class="vf-list__item">and another list item</li>
      <li class="vf-list__item">yet another list item</li>
    </ul>
  </div>
</div>


{# You can do Nunjucks logic in your templates that references the .yml settings
   What's Nunjucks: https://mozilla.github.io/nunjucks/templating.html #}
{#
{% if item.image == "blank" %}
  <span><!-- no image --></span>
  {% else %}
  {{ item.image }}
{% endif %}
#}