{% if site.navigation_header %}
<nav class="nav  nav--header">
  <button class="button  button--nav" aria-label="Nav toggle">
    {% include icon.html id="nav" %}
  </button>
  <ul class="list  list--nav">
    {% for item in site.navigation_header %}

      {% if item[1] contains '://' %}
        {% assign url = item[1] %}
      {% else %}
        {% assign url = item[1] | relative_url %}
      {% endif %}

      <li class="item  item--nav{% if item[1] == page.url %}  item--current{% endif %}">
        <a href="{{ url }}">{{ item[0] }}</a>
      </li>
    {% endfor %}
  </ul>
</nav>
{% else %}
  {% include nav-default.html %}
{% endif %}

<script src="{{site.baseurl}}/assets/jquery-3.6.4.min.js"></script>

<script type="text/javascript">
const applyToggle = (list, button, breakpoint) => {
  const navList = document.querySelector(list)
  if (document.body.clientWidth < breakpoint) {
    const navHeight = navList.clientHeight
    const navButton = document.querySelector(button)
    navList.style.maxHeight = '0px'

    navButton.onclick = () => {
      if (navList.style.maxHeight == '0px') {
        navList.style.maxHeight = `${navHeight}px`
      } else {
        navList.style.maxHeight = '0px'
      }
    }
  }
}

applyToggle('.list--nav', '.button', 640)
</script>

<script>
$(document).ready(function(){
  spaceopen();
  nextevent();
  presence();
});

function spaceopen() {
  //http://nobreakspace.org/status/spaceapi.json

  $.get( "https://status.nobreakspace.org/spaceapi.json", function( data ) {
    if(data.open) {
      $("#spaceopen").css( "border", "3px solid green" );
      $("#spaceopen").html("<div style='float:left'><img src='{{ site.baseurl }}/assets/open.png' width='35'></div>Der Nbsp ist offen!<br><div style='text-align: right;'><a href='https://status.nobreakspace.org' target='_blank' style='color: #EAEAEA;'>Status</a></div>");
      $("#spaceopenmobile").css( "border", "3px solid green" );
      $("#spaceopenmobile").html("<div style='float:left'><img src='{{ site.baseurl }}/assets/open.png' width='35'></div>Der Nbsp ist offen!<br><div style='text-align: right;'><a href='https://status.nobreakspace.org' target='_blank' style='color: #EAEAEA;'>Status</a></div>");
    } else {
      $("#spaceopen").css( "border", "3px solid red" );
      $("#spaceopen").html("<div style='float:left'><img src='{{ site.baseurl }}/assets/closed.png' width='35'></div>Der Nbsp ist geschlossen!<br><div style='text-align: right;'><a href='https://status.nobreakspace.org' target='_blank' style='color: #EAEAEA;'>Status</a></div>");
      $("#spaceopenmobile").css( "border", "3px solid red" );
      $("#spaceopenmobile").html("<div style='float:left'><img src='{{ site.baseurl }}/assets/closed.png' width='35'></div>Der Nbsp ist geschlossen!<br><div style='text-align: right;'><a href='https://status.nobreakspace.org' target='_blank' style='color: #EAEAEA;'>Status</a></div>");
    }
  });
}

function nextevent() {
    if($("#nextevent").text().trim().length) {
      $("#event_soon").css( "border", "3px solid orange");
    } else {
      $("event_soon").hide();
    }
    if($("#nextevent_mobile").text().trim().length) {
      $("#event_soon_mobile").css( "border", "3px solid orange");
    } else {
      $("event_soon_mobile").hide();
    }
}

function presence() {
    $.getJSON( "{{site.presence_service}}", function( data ) {
      console.log(data)
      for (var hash of data) { 
        console.log(hash); 
        $("#presence" ).append('<img class="gravatar" src="https://www.gravatar.com/avatar/'+hash+'.jpg"/>');
        $("#presence_mobile" ).append('<img class="gravatar" src="https://www.gravatar.com/avatar/'+hash+'.jpg"/>');
      }
    });
}
</script>

<!-- Core CSS file -->
<link rel="stylesheet" href="{{site.baseurl}}/assets/scripts/photoswipe.css">

<!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite,
     - preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="{{site.baseurl}}/assets/scripts/default-skin/default-skin.css">

<link rel="stylesheet" href="{{site.baseurl}}/assets/fontawesome-free-6.3.0-web/css/all.css" type='text/css'>

<!-- Core JS file -->
<script src="{{site.baseurl}}/assets/scripts/photoswipe.min.js"></script>

<!-- UI JS file -->
<script src="{{site.baseurl}}/assets/scripts/photoswipe-ui-default.min.js"></script>

<meta property="og:image:type" content="image/jpeg">
<meta property="og:type" content="website">