{% set _theme = footer__theme if footer__theme else 'dark' %}
{% set _isLight = true if _theme == 'light' else false %}
{% set _logoSrc = '../../assets/vf-minimal-footer/assets/embl-ebi-rgb-full-colour.svg' if _isLight else '../../assets/vf-minimal-footer/assets/embl-ebi-rgb-all-white.png' %}

{% if partner__variant %}
<div class="vf-footer vf-u-background-color-ui--white vf-footer__partners">
  <div class="vf-footer__inner">
  <h4 class="vf-u-type__text-body--4 vf-u-text-color--grey--dark">Our partners/collaborators</h4>

  {% if partner__variant == 'logos' %}
  <ul class="vf-grid vf-grid__col-6 vf-list">
    <li class="vf-list__item">
      <a href="JavaScript:Void(0);" class="vf-list__link">
        <img src="../../assets/vf-minimal-footer/assets/landscape-placeholder.svg" alt="Partner logo" width="174" height="64">
      </a>
    </li>
    <li class="vf-list__item">
      <a href="JavaScript:Void(0);" class="vf-list__link">
        <img src="../../assets/vf-minimal-footer/assets/landscape-placeholder.svg" alt="Partner logo" width="174" height="64">
      </a>
    </li>
    <li class="vf-list__item">
      <a href="JavaScript:Void(0);" class="vf-list__link">
        <img src="../../assets/vf-minimal-footer/assets/landscape-placeholder.svg" alt="Partner logo" width="174" height="64">
      </a>
    </li>
    <li class="vf-list__item">
      <a href="JavaScript:Void(0);" class="vf-list__link">
        <img src="../../assets/vf-minimal-footer/assets/landscape-placeholder.svg" alt="Partner logo" width="174" height="64">
      </a>
    </li>
    <li class="vf-list__item">
      <a href="JavaScript:Void(0);" class="vf-list__link">
        <img src="../../assets/vf-minimal-footer/assets/landscape-placeholder.svg" alt="Partner logo" width="174" height="64">
      </a>
    </li>
    <li class="vf-list__item">
      <a href="JavaScript:Void(0);" class="vf-list__link">
        <img src="../../assets/vf-minimal-footer/assets/landscape-placeholder.svg" alt="Partner logo" width="174" height="64">
      </a>
    </li>
  </ul>

  {% elif partner__variant == 'columns' %}
  <div>
    <ul class="vf-grid vf-grid__col-3 vf-list">
      <li class="vf-list__item">
        <a href="JavaScript:Void(0);" class="vf-list__link">Partner 1</a>
      </li>
      <li class="vf-list__item">
        <a href="JavaScript:Void(0);" class="vf-list__link">Partner 2</a>
      </li>
      <li class="vf-list__item">
        <a href="JavaScript:Void(0);" class="vf-list__link">Partner 3</a>
      </li>
      <li class="vf-list__item">
        <a href="JavaScript:Void(0);" class="vf-list__link">Partner 4</a>
      </li>
      <li class="vf-list__item">
        <a href="JavaScript:Void(0);" class="vf-list__link">Partner 5</a>
      </li>
      <li class="vf-list__item">
        <a href="JavaScript:Void(0);" class="vf-list__link">Partner 6</a>
      </li>
      <li class="vf-list__item">
        <a href="JavaScript:Void(0);" class="vf-list__link">Partner 7</a>
      </li>
      <li class="vf-list__item">
        <a href="JavaScript:Void(0);" class="vf-list__link">Partner 8</a>
      </li>
      <li class="vf-list__item">
        <a href="JavaScript:Void(0);" class="vf-list__link">Partner 9</a>
      </li>
    </ul>
  </div>

  {% elif partner__variant == 'summary' %}
  <div class="vf-grid vf-grid__col-4">
    <div>
      <p class="vf-u-type__text-body--3 vf-u-text-color--grey--dark">Partnership statement. A short description of the partnerships, collaborations or consortium.</p>
      <a href="JavaScript:Void(0);" class="vf-u-type__text-body--4 vf-u-text-color--grey--dark">See all collaborators</a>
    </div>
    <div class="vf-footer__stat vf-table__label">
      <p class="vf-u-type__text-heading--2">35</p>
      <p class="vf-u-type__text-body--4 vf-u-text-color--grey--dark">Data partners</p>
    </div>
    <div class="vf-footer__stat vf-table__label">
      <p class="vf-u-type__text-heading--2">4</p>
      <p class="vf-u-type__text-body--4 vf-u-text-color--grey--dark">Supporting funders</p>
    </div>
    <div class="vf-footer__stat vf-table__label">
      <p class="vf-u-type__text-heading--2">35</p>
      <p class="vf-u-type__text-body--4 vf-u-text-color--grey--dark">Research institutions</p>
    </div>
  </div>
  {% endif %}
  </div>
</div>
{% endif %}

<footer class="vf-footer {% if partner__variant %} vf-footer--without-rule{% endif %}{% if _isLight %} vf-footer--light{% endif %} | {% if _isLight %}vf-u-background-color-ui--white{% else %}vf-u-background-color-ui--dark-grey{% endif %}">
<div class="vf-footer__inner">
<div class="vf-grid vf-grid__col-2">
  <!-- ROW 1: Logo + Mission (4) | Category Links (8) -->
  <!-- Logo -->
  <div class="vf-footer__logo-wrapper">
    <a href="https://www.ebi.ac.uk" class="vf-logo">
      <img
        class="vf-logo__image"
        src="{{ _logoSrc }}"
        alt="EMBL-EBI Logo"
        loading="eager"
      />
    </a>
    <div class="vf-grid vf-grid__col-2">
    <!-- Mission Statement -->
    <p class="vf-u-type__text-body--3 vf-footer__notice vf-footer__text-secondary ">
      Mission statement, a description of a site or organisation and what its goals are. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit.
    </p>
    <p>
    </p>
    </div>
  </div>
  <div>
    <!-- Category Links -->
    <div class="vf-grid vf-grid__col-3 ">
      <div class="vf-links">
        <h4 class="vf-links__heading vf-u-text-color--grey--lightest">
          CATEGORY
        </h4>
        <ul class="vf-links__list | vf-list">
          <li class="vf-list__item">
            <a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
              Entry
            </a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
              Entry
            </a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
              Entry
            </a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
              Entry
            </a>
          </li>
        </ul>
      </div>
      <div class="vf-links">
        <h4 class="vf-links__heading vf-u-text-color--grey--lightest">
          CATEGORY
        </h4>
        <ul class="vf-links__list | vf-list">
          <li class="vf-list__item">
            <a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
              Entry
            </a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
              Entry
            </a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
              Entry
            </a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
              Entry
            </a>
          </li>
        </ul>
      </div>
      <div class="vf-links">
        <h4 class="vf-links__heading vf-u-text-color--grey--lightest">
          CATEGORY
        </h4>
        <ul class="vf-links__list | vf-list">
          <li class="vf-list__item">
            <a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
              Entry
            </a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
              Entry
            </a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
              Entry
            </a>
          </li>
          <li class="vf-list__item">
            <a class="vf-list__link vf-u-text-color--white" href="JavaScript:Void(0);">
              Entry
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

   <!-- ROW 2: Contact Details (4) | Social Icons (8) -->
   <div class="vf-grid vf-grid__col-2">
      <!-- Contact Details -->
      <div class="vf-footer__contact">
         <p class="vf-u-type__text-body--5 vf-u-text-color--grey--lightest">Tel: +49 00 000 000.</p>
         <p class="vf-u-type__text-body--5 vf-u-text-color--grey--lightest">Maybe an address too, 5555, Somewhere, Earth.</p>
         <a href="JavaScript:Void(0);" class="vf-footer__link vf-u-text-color--white">Full contact details</a>
      </div>
      <div>
         <!-- Social Icons -->
         <div class="vf-footer__social vf-u-display--flex vf-u-float__right">
            <a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link  vf-u-text-color--white" aria-label="Facebook">
               <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.166 1.791.166v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
               </svg>
            </a>
            <a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Bluesky">
               <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 576 512">
                  <path d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.7-.9 10-1.3c-3.4 .4-6.7 .9-10 1.3C74.3 308.6-9.1 342.8 100.3 464.5C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.7-169.9c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z"/>
               </svg>
            </a>
            <a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="Instagram">
               <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.486-.275.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
               </svg>
            </a>
            <a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="X">
               <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"/>
               </svg>
            </a>
            <a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="LinkedIn">
               <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 15 0 14.487 0 13.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
               </svg>
            </a>
            <a href="JavaScript:Void(0);" class="vf-footer__social-link vf-footer__link vf-u-text-color--white" aria-label="GitHub">
               <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
               </svg>
            </a>
         </div>
      </div>
   </div>
   <!-- ROW 3: Copyright (12) -->
  <section class="vf-footer__legal vf-grid__col--span-all | vf-grid vf-grid__col-1">
    <span class="vf-footer__link vf-u-text-color--grey--lightest">Copyright © Your Organisation</span>
      <a class="vf-footer__link vf-u-text-color--white" href="JavaScript:Void(0);">Terms of use</a>
      <a class="vf-footer__link vf-u-text-color--grey--lightest" href="JavaScript:Void(0);">Another entry</a>
   </section>
</div>
</footer>