<!doctype html>
<html class="no-js" lang="nl">

{% set app_package = app_package|default('pyoes', true) -%}
{% set active_title = active_title -%}

{% set service_nav = service_nav -%}
{% set main_nav = main_nav -%}
{% set dropdown_main_nav = dropdown_main_nav -%}
{% set active_main_nav = active_main_nav -%}
{% set login_nav = login_nav -%}
{% set login_sub_nav = login_sub_nav -%}
{% set service_nav = service_nav -%}
{% set home_link = home_link -%}
{% set footer_nav = footer_nav -%}
{% set mailto_error = mailto_error -%}

{% set default_footer_nav = [
	('Toegankelijkheid', 'https://www.onroerenderfgoed.be/toegankelijkheid'),
	('Juridische Informatie', 'https://www.onroerenderfgoed.be/nl/juridisch'),
	('Privacybeleid', 'https://www.onroerenderfgoed.be/nl/over-ons/privacybeleid/')
]
-%}

{% set footer_nav = footer_nav|default(default_footer_nav) -%}

{% set datum_copyright = datum_copyright|default('2017') -%}

<head>
  {% block html_header scoped %}
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>{% block html_title %}Onroerend Erfgoed{% endblock %}</title>

    <link rel="stylesheet"
          href="{% block app_css %}{{ request.static_path(app_package + ':static/css/app.css') }}{% endblock %}"/>

    <script src="{{ request.static_path(app_package + ':static/bower_components/modernizr/modernizr.js') }}"></script>

    {% block css -%}
      {% set default_css_files = [] -%}

      {% set css_files = css_files|default(default_css_files) -%}
      {% for css in css_files -%}
        <link rel="stylesheet" href="{{ css }}"/>
      {% endfor %}
    {% endblock -%}

    {% block javascript scoped -%}
      {% set default_js_files = [
			request.static_path(app_package + ':static/bower_components/jquery/dist/jquery.min.js')
		] -%}
      {% set js_files = js_files|default(default_js_files) -%}
      {% for js in js_files -%}
        <script type="text/javascript" src="{{ js }}"></script>
      {% endfor -%}
    {% endblock -%}
      
    {% block plausible %}
      {% set plausible_data_domain = plausible_data_domain|default(request.registry.settings["plausible.data_domain"]) %}
      {% set plausible_omgeving = plausible_omgeving|default('dev') %}
      {% if plausible_omgeving in ('dev', 'test') %}
        {% set omgeving = plausible_omgeving + '-' %}
      {% else %}
        {% set omgeving = '' %}
      {% endif %}
      {% if plausible_data_domain %}
      	{% from 'macros.jinja2' import plausible_tracker %}
        {{ plausible_tracker(plausible_data_domain, omgeving) }}
      {% endif %}
    {% endblock %}
  {% endblock %}

</head>
<body>
<div class="container">
  {% block vlaanderen_header scoped %}
    <script type="text/javascript" src="//widgets.vlaanderen.be/widget/live/37de485347434fbdaa70e0c03eb48d01"></script>
  {% endblock %}

  {% block header scoped %}
    {% include "pyoes/header.jinja2" %}
  {% endblock %}

  {% block messages scoped %}
  {% endblock %}

  {% block content scoped %}
  {% endblock %}
  <div class="push"></div>
</div>
<div id="footerContainer">
  {% block footer scoped %}
    {% include "pyoes/footer.jinja2" %}
  {% endblock %}

  {% block vlaanderen_footer scoped %}
    <script type="text/javascript" src="//widgets.vlaanderen.be/widget/live/d619177b83734bf7b5bb596ff7e6c41e"></script>
  {% endblock %}
  {% block cookiebanner %}
    {% set ga_key = ga_key|default(request.registry.settings["ga.tracker_key"]) %}
    {% set show_cookie_banner = show_cookie_banner|default(request.registry.settings["cookie_banner"]) %}

    {% if show_cookie_banner == 'true' %}
      {% from 'macros.jinja2' import cookie_banner %}
      {{ cookie_banner(request, app_package, ga_key) }}
    {% else %}
      {% from 'macros.jinja2' import ga_tracker %}
      {{ ga_tracker(ga_key) }}
    {% endif %}
  {% endblock %}
</div>
<script src="{{ request.static_path(app_package + ':static/bower_components/foundation/js/foundation.min.js') }}"></script>
<script src="{{ request.static_path(app_package + ':static/js/app.js') }}"></script>


{% if request.registry.settings['pyoes.banner'] %}
<script type="text/javascript">
  function handleHeader() {
    const headerdiv = document.getElementsByClassName('iwgh2-navigation');
    var el = document.createElement('div');
    el.className = 'message-banner';
    var content = '<span>{{ request.registry.settings['pyoes.banner'] }}</span>';
    {% if request.registry.settings['pyoes.banner.detail'] %}
      content = content.concat('<a onclick="showPopup()">   Meer info...</a>');
    {% endif %}
    el.innerHTML = content;
    headerdiv[0].parentNode.insertBefore(el, headerdiv.nextSibling);
  }

  function showPopup() {
    document.getElementById('onderhoud-popup').style.display = 'flex';
  }

  function hidePopup() {
    document.getElementById('onderhoud-popup').style.display = 'none';
  }

  // set up the mutation observer
  var observer = new MutationObserver(function (mutations, me) {
    var header = document.getElementsByClassName('iwgh2-navigation');
    if (header[0]) {
      handleHeader();
      me.disconnect(); // stop observing
      return;
    }
  });

  // start observing
  observer.observe(document, {
    childList: true,
    subtree: true
  });
</script>
<div id="onderhoud-popup">
  <div class="row onderhoud-banner-header">
    <h2>{{ request.registry.settings['pyoes.banner'] }}</h2>
  </div>
  <div class="row onderhoud-banner-detail">
    <p>{{ request.registry.settings['pyoes.banner.detail'] }}</p>
  </div>
  <div class="row">
    <a><span id="popup-sluiten" onclick="hidePopup()" aria-hidden="true">Sluiten...</span></a>
  </div>
</div>
{% endif %}

</body>
</html>
