{% load i18n cms_tags menu_tags rfc_5646_locale static sekizai_tags %}
<!doctype html>
<html lang="{{ LANGUAGE_CODE|rfc_5646_locale }}">
    <head>
        {% spaceless %}
        <title>{% block head_title %}{{ SITE.name }}{% endblock head_title %}</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        {% block meta %}
            {% block meta_index_rules %}
                <meta name="robots" content="index,follow,all">
            {% endblock meta_index_rules %}

            {% block meta_html %}
                {% page_attribute "meta_description" as meta_description %}
                {% if meta_description and meta_description != "None" %}<meta name="description" content="{% block meta-description %}{{ meta_description }}{% endblock %}">{% endif %}
            {% endblock meta_html %}

            {% block meta_opengraph %}
                {% block meta_opengraph_locale %}
                    <meta property="og:locale" content="{{ LANGUAGE_CODE }}">
                {% endblock meta_opengraph_locale %}
                {% block meta_opengraph_type %}
                    <meta property="og:type" content="website">
                {% endblock meta_opengraph_type %}
                {% block meta_opengraph_sitename %}
                    <meta property="og:site_name" content="{{ SITE.name }}">
                {% endblock meta_opengraph_sitename %}
                {% comment %}Since we are not able yet to get relevant image contextually for each content kind, we
                keep the logo as the ressource image for all{% endcomment %}
                {% block meta_opengraph_image %}
                    <meta property="og:image" content="{{ SITE.web_url }}{% static "richie/images/logo.png" %}">
                {% endblock meta_opengraph_image %}
                {% block meta_opengraph_contextuals %}
                    <meta property="og:title" content="{{ SITE.name }}">
                    <meta property="og:url" content="{{ SITE.web_url }}">
                {% endblock meta_opengraph_contextuals %}
            {% endblock meta_opengraph %}
        {% endblock meta %}
        {% endspaceless %}

        {% render_block "css" %}

        {% block css_links %}
        <link rel="stylesheet" type="text/css" href="{% static 'richie/css/main.css' %}">
        {% endblock css_links %}
    </head>
    <body>
        {% cms_toolbar %}

        {# Wrap all body content in an ID'd element to easily remove it from view (using aria-hidden) #}
        {# when a modal is open. This is important for accessibility. #}
        <div id="modal-exclude">
            {% block body_header %}
            <nav class="topbar" id="main-menu">
                <div class="topbar__brand">
                    <button class="topbar__hamburger"
                            data-target="main-menu" aria-label="menu" aria-expanded="false">&#8801;</button>
                    <a href="/" class="topbar__brand__link">
                        <img src="{% static "richie/images/logo.png" %}" class="topbar__brand__logo" alt="{{ SITE.name }}">
                    </a>
                </div>
                <div class="topbar__menu">
                    <ul class="topbar__menu__list">
                        {% show_menu 0 100 0 0 "menu/header_menu.html" %}
                    </ul>
                    {% language_chooser "menu/language_menu.html" %}
                    {% block userlogin %}
                    <div
                      class="richie-react richie-react--user-login"
                      data-props='{"loginUrl": "{% url 'admin:index' %}", "logoutUrl": "{% url 'logout' %}", "signupUrl": "{% url 'admin:index' %}"}'
                    ></div>
                    {% endblock userlogin %}
                </div>
            </nav>
            {% endblock body_header %}

            <div class="body-content {% block bodycontent_classes %}{% endblock bodycontent_classes %}">
            {% block breadcrumbs %}
            <ul class="breadcrumbs">
                {% block breadcrumbs_content %}{% show_breadcrumb 0 "menu/breadcrumb_item.html" %}{% endblock breadcrumbs_content %}
            </ul>
            {% endblock breadcrumbs %}
            {% block content %}{% endblock content %}
            </div>

            {% block body_footer %}
            <div class="body-footer">
                <div class="body-footer__menu">
                  {% static_placeholder "footer" %}
                </div>
                <div class="body-footer__brand">
                    <a href="/" class="body-footer__brand__link">
                        <img src="{% static "richie/images/logo.png" %}" class="body-footer__brand__logo" alt="{{ SITE.name }}">
                    </a>
                    {% include "social-networks/footer-badges.html" %}
                </div>
                <div class="body-footer__mentions">
                    <p>{% now "Y" %} &copy; Acme {% blocktrans %}All Rights Reserved.{% endblocktrans %}</p>
                </div>
                <div class="body-footer__poweredby">
                    <a href="https://github.com/openfun/richie" class="body-footer__poweredby__link">
                        <small>Powered by</small>
                        <strong>Richie</strong>
                    </a>
                </div>
            </div>
            {% endblock body_footer %}
        </div>

        {% render_block "js" %}
        <script src="{% static 'richie/js/index.js' %}"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
              // Get all topbar burger elements
              const topbarBurgers = Array.prototype.slice.call(
                document.querySelectorAll(".topbar__hamburger"),
                0
              );
              // Check if there are any navbar burgers
              if (topbarBurgers.length > 0) {
                // Add a click event on each of them
                topbarBurgers.forEach(function(el) {
                  el.addEventListener("click", function() {
                    // Get the target from the "data-target" attribute
                    const target = document.getElementById(el.dataset.target);
                    // Toggle the "is-active" class on both the burger and container
                    el.classList.toggle("is-active");
                    target.classList.toggle("is-open");
                  });
                });
              }
            });
        </script>
        {% block body_js %}{% endblock body_js %}
    </body>
</html>
