{% set theme_config = attribute(config.themes, config.system.pages.theme) %}
<!DOCTYPE html>
<html lang="{{ grav.language.getLanguage ?: 'fr' }}">
<head>
{% block head %}
    <meta charset="utf-8" />
    <title>{% if header.title %}{{ header.title|e('html') }} | {% endif %}{{ config.site.title|t('html') }}</title>
    {% include 'partials/metadata.html.twig' %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="icon" type="image/png" href="{{ url('theme://images/favicon.png') }}" />
    <link rel="canonical" href="{{ page.url(true, true) }}" />
    <link rel="alternate" href="/home-fr" hreflang="fr" />
    <link rel="alternate" href="/home-en" hreflang="en" />

    {% block stylesheets %}
    {% do assets.addCss('theme://css/jquery.bxslider.css', 101) %}
        {% do assets.addCss('theme://css/style.css', 101) %}
        {% do assets.addCss('theme://css-compiled/template.css', 101) %}
        {% do assets.addCss('theme://css/jquery.mCustomScrollbar.css', 101) %}
        {% do assets.addCss('theme://css/media-queries.css', 101) %}

    {% endblock %}
    {{ assets.css() }}

    {% block javascripts %}
        {% do assets.addJs('jquery', 101) %}
        {% do assets.addJs('theme://js/jquery.mCustomScrollbar.concat.min.js') %}
        {% do assets.addJs('theme://js/jquery.bxslider.min.js') %}
        {% do assets.addJs('theme://js/script.js') %}

    {% endblock %}
      {{ assets.js() }}
    {% endblock head %}
</head>

<body id="top">

        {% block header %}
        <header id="header">
            <div id="logo">
                <h1><a href="{{ base_url == '' ? '/fr' : base_url }}">{{ config.site.title|t }}</a></h1>
                <div class="fr-en">
                  <a href="fr">Fr</a>
                  /
                  <a href="en">En</a>
                </div>

            </div>
            <div id="navbar">
              <div class="menu-ui">
                <div class="picto">
                </div>
              </div>
                {% block header_navigation %}{% endblock %}
            </div>
            <div class="app">
              <a href="https://ethica-spinoza.net/">
                <img src="/user/themes/ethica/images/logo.svg" alt="">
              <strong>Ethica-spinoza.net</strong>
            </a>
            </div>
            <div class="separation"></div>
        </header>
        {% endblock %}

        {% block body %}

        <section id="body">
          <div class="content">
            {% block content %}{% endblock %}
          </div>
        </section>

        {% endblock %}

        {% block footer %}
        <footer id="footer">
        </footer>
        {% endblock %}

    {% block bottom %}
        {{ assets.js('bottom') }}
    {% endblock %}
</body>
</html>
