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

<div class="vf-location-nearest | vf-content">
  /* This is a demo only, to use this utility component follow the README.md to graft onto your UI */

  {% markdown %}

  ### Detected location

  Your detected city is: <span data-vf-js-location-nearest-name><em>loading</em></span>

  ### Available locations

  <div data-vf-js-location-nearest-override-widget><em>loading</em></div>

  ### Element activation

  Elements tagged with `data-vf-js-location-nearest-activation-target="{locationId}"` will receive clicks on location change. This is a simple method to activate diverse elements.

  {% endmarkdown %}

  <div class="vf-tabs">
    <ul class="vf-tabs__list" data-vf-js-tabs>
      <li class="vf-tabs__item">
        <a class="vf-tabs__link" href="#vf-tabs__section--1" data-vf-js-location-nearest-activation-target="default">Default</a>
      </li>
      <li class="vf-tabs__item">
        <a class="vf-tabs__link" href="#vf-tabs__section--2" data-vf-js-location-nearest-activation-target="heidelberg">Heidelberg</a>
      </li>
      <li class="vf-tabs__item">
        <a class="vf-tabs__link" href="#vf-tabs__section--3" data-vf-js-location-nearest-activation-target="grenoble">Grenoble</a>
      </li>
    </ul>
  </div>

  <div class="vf-tabs-content" data-vf-js-tabs-content>
    <section class="vf-tabs__section" id="vf-tabs__section--1">
      {% markdown %}
      A sample `data-vf-js-location-nearest-activation-target='default'` activation target
      {% endmarkdown %}
    </section>
    <section class="vf-tabs__section" id="vf-tabs__section--2">
      {% markdown %}
      A sample `data-vf-js-location-nearest-activation-target='heidelberg'` activation target
      {% endmarkdown %}
    </section>
    <section class="vf-tabs__section" id="vf-tabs__section--3">
      {% markdown %}
      A sample `data-vf-js-location-nearest-activation-target='grenoble'` activation target
      {% endmarkdown %}
    </section>
  </div>
</div>


  <div class="vf-tabs">
    <ul class="vf-tabs__list" data-vf-js-tabs>
      <li class="vf-tabs__item">
        <a class="vf-tabs__link" href="#vf-tabs__section--1" data-vf-js-location-nearest-activation-target="default">Default tabset 2</a>
      </li>
      <li class="vf-tabs__item">
        <a class="vf-tabs__link" href="#vf-tabs__section--2" data-vf-js-location-nearest-activation-target="heidelberg">Heidelberg tabset 2</a>
      </li>
    </ul>
  </div>

  <div class="vf-tabs-content" data-vf-js-tabs-content>
    <section class="vf-tabs__section" id="vf-tabs__section--1">
      {% markdown %}
      Showing a second set of tabs
      {% endmarkdown %}
    </section>
    <section class="vf-tabs__section" id="vf-tabs__section--2">
      {% markdown %}
      Showing a second set of tabs
      {% endmarkdown %}
    </section>
  </div>
</div>


<script type="text/javascript">
  window.onload = function () {
    // You should do this in your central JS (scripts.js) as appropriate

    // Configure an object of your locations to detect
    let vfLocationNearestLocations = {
      default: {
        name: "Heidelberg (default)",
        latlon: "49.40768, 8.69079"
      },
      barcelona: {
        name: "Barcelona",
        latlon: "41.38879, 2.15899"
      },
      grenoble: {
        name: "Grenoble",
        latlon: "45.16667, 5.71667"
      },
      hamburg: {
        name: "Hamburg",
        latlon: "53.57532, 10.01534"
      },
      heidelberg: {
        name: "Heidelberg",
        latlon: "49.40768, 8.69079"
      },
      hinxton: {
        name: "EMBL-EBI Hinxton",
        latlon: "52.2, 0.11667"
      },
      rome: {
        name: "Rome",
        latlon: "41.89193, 12.51133"
      }
    }
    // Bootstrap location detection
    vfLocationNearest(vfLocationNearestLocations);
  };
</script>