<!DOCTYPE html>
<html lang="{{(language.locale == 'gb' ? 'en' : language.locale)}}">
<head>
{% if Page.critical is defined and Page.critical and Page.CricitalCss is defined and Page.CricitalCss is not empty %}
<!-- critical -->
<style id="page_critical_css">
{{ Page.CricitalCss | raw }}
</style>
{% endif %}
{% block admin_header %}{% endblock %}
<title>
{% block title %}Welkom{% endblock %}
-
{% block sitetitle %}Website{% endblock %}
</title>
{% block stylesheets %}{% endblock %}
{% include '/default-v3/header_css.html.twig' %}
{% include '/default-v3/header_scripts.html.twig' %}
</head>
<body class="{% if Settings.headerBar %}has-topbar{% endif %} {{Page is defined ? Page.classes:''}}">
<div class="page-overlay"></div>
<div class="shop-cart-overlay"></div>
{# Out of office note #}
{% if Settings.isOutOfOffice %}
<div id="ooo-msg">
<span>
{{Settings.outOfOfficeMessage|raw}}
</span>
</div>
{% endif %}
{{promobar(Settings)}}
{# end Out of office note #}
{% include '/default-v3/nav.html.twig' %}
{# titlebar #}
{% if Page.optionTitle or Page.optionSubtitle %}
<section class="titlebar">
<div class="lcp">
{% if Page.image is not empty %}
{% if Page.image.hasBlurred %}
<picture>
{% if Page.image.hasWebp() %}
<source srcset="/{{Page.image.getBlurredWebpPath('large')}}" type="image/webp">
{% endif %}
<source srcset="/{{Page.image.getBlurredWebPath('large')}}" type="{{Page.image.mime}}">
<img class="lq" alt="{{Page.image.description_alt}}" src="/{{Page.image.getBlurredWebPath('large')}}" type="{{Page.image.mime}}" loading="eager" width="{{Page.image.width}}" height="{{Page.image.height}}">
</picture>
{% endif %}
<picture>
{% if Page.image.hasWebp() %}
<source srcset="/{{Page.image.getWebpPath('full')}}" type="image/webp">
{% endif %}
<source srcset="/{{Page.image.getWebPath('full')}}" type="{{ Page.image.mime }}">
<img class="hq" alt="{{Page.image.description_alt}}" src="/{{Page.image.getWebPath('full')}}" type="{{Page.image.mime}}" loading="lazy" width="{{Page.image.width}}" height="{{Page.image.height}}" onload="this.style.opacity=1{% if Page.image.hasBlurred %};this.closest('.lcp').getElementsByClassName('lq')[0].style.opacity=0;{% endif %}" style="opacity: 0;">
</picture>
{% else %}
<picture>
<source srcset="/default-v3/gfx/sub.webp" type="image/webp">
<img class="hq" src="/default-v3/gfx/sub.jpg" type="jpeg" loading="lazy" onload="this.style.opacity=1" style="opacity: 0;">
</picture>
{% endif %}
</div>
<div class="container">
{% if Page.optionTitle %}
<h1>{{ Page.title }}</h1>
{% endif %}
{% if Page.optionSubtitle %}
<h2>{{ Page.subtitle }}</h2>
{% endif %}
{# breadcrumbs #}
{% if Page.optionBreadcrumbs %}
<div class="breadcrumbs">
{{breadcrumbs(Page)}}
</div>
{% endif %}
{# end breadcrumbs #}
</div>
</section>
{% endif %}
{# end titlebar #}
{# subnavbar #}
{% if Page.optionSubnavigation %}
<section class="subnavbar">
<div class="container">
{{cms_navigation('','',true, true, 0, 0, 2)}}
</div>
</section>
{% endif %}
{# end subnavbar #}
{{pageblocks(Page, app.request.locale, '')}}
{% block plain_body %}{% endblock %}
{# custom topbar - is displayed above the page on large displays through CSS #}
{% if Settings.headerBar %}
<section class="topbar fixed">
<div class="container">
<div class="left">
{{ Settings.headerBarLeft|raw }}
</div>
<div class="right">
{{ Settings.headerBarRight|raw }}
</div>
</div>
</section>
{% endif %}
{# end custom topbar #}
{% include '/default-v3/footer.html.twig' with { Settings : Settings } %}
{% include '/default-v3/footer_scripts.html.twig' %}
{% block admin_footer %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>