{% load coderedcms_tags i18n static wagtailcore_tags wagtailimages_tags wagtailsettings_tags wagtailuserbar %}
{% get_settings %}
{% get_current_language as LANGUAGE_CODE %}
{% wagtail_site as site %}
{% django_setting "CRX_DISABLE_ANALYTICS" as disable_analytics %}
{% django_setting "CRX_DISABLE_LAYOUT" as disable_layout %}
<!doctype html>
<html prefix="og: http://ogp.me/ns#" lang="{{ LANGUAGE_CODE }}">

<head>
  {% block tracking %}
  {% if not disable_analytics and settings.coderedcms.AnalyticsSettings.ga_g_tracking_id %}
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id={{settings.coderedcms.AnalyticsSettings.ga_g_tracking_id}}"></script>
  <script>
    cr_track_clicks = {{settings.coderedcms.AnalyticsSettings.ga_track_button_clicks|yesno:"true,false"}};
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '{{settings.coderedcms.AnalyticsSettings.ga_g_tracking_id}}');
  </script>
  {% endif %}
  {% if not disable_analytics and settings.coderedcms.AnalyticsSettings.gtm_id %}
  <!-- Google Tag Manager -->
  <script>
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','{{settings.coderedcms.AnalyticsSettings.gtm_id}}');
  </script>
  <!-- End Google Tag Manager -->
  {% endif %}
  {% if not disable_analytics and settings.coderedcms.AnalyticsSettings.head_scripts %}
  {{settings.coderedcms.AnalyticsSettings.head_scripts|safe}}
  {% endif %}
  {% endblock %}

  {# Pass in CMS variables to JavaScript #}
  <script>
    cr_site_url = "{{site.root_url}}";
    cr_version = "{% coderedcms_version %}";
    {% if not disable_layout %}
    cr_external_new_tab = {{settings.coderedcms.LayoutSettings.external_new_tab|yesno:"true,false"}};
    {% else %}
    cr_external_new_tab = false;
    {% endif %}
  </script>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  {# SEO Metadata #}
  {% include "wagtailseo/meta.html" %}

  {% block frontend_assets %}
  <link rel="stylesheet" href="{% static 'coderedcms/vendor/bootstrap/dist/css/bootstrap.min.css' %}?v={% coderedcms_version %}">
  {% endblock %}

  {% block coderedcms_assets %}
  {% django_setting "DEBUG" as debug %}
  {% if debug %}
  <link rel="stylesheet" href="{% static 'coderedcms/css/crx-front.css' %}?v={% coderedcms_version %}">
  {% else %}
  <link rel="stylesheet" href="{% static 'coderedcms/css/crx-front.min.css' %}?v={% coderedcms_version %}">
  {% endif %}
  {% endblock %}

  {% block custom_assets %}{% endblock %}

  {% block favicon %}
  {% if not disable_layout and settings.coderedcms.LayoutSettings.favicon %}
  {# See https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/ #}
  {% image settings.coderedcms.LayoutSettings.favicon fill-256x256 format-webp preserve-svg as favicon_webp %}
  {% image settings.coderedcms.LayoutSettings.favicon fill-120x120 format-png preserve-svg as favicon_iphone %}
  {% image settings.coderedcms.LayoutSettings.favicon fill-180x180 format-png preserve-svg as favicon_iphone_plus %}
  {% image settings.coderedcms.LayoutSettings.favicon fill-152x152 format-png preserve-svg as favicon_ipad %}
  {% image settings.coderedcms.LayoutSettings.favicon fill-167x167 format-png preserve-svg as favicon_ipad_pro %}
  <link rel="icon" type="image/webp" href="{{ favicon_webp.url }}">
  <link rel="apple-touch-icon" href="{{ favicon_iphone_plus.url }}">
  <link rel="apple-touch-icon" sizes="120x120" href="{{ favicon_iphone.url }}">
  <link rel="apple-touch-icon" sizes="180x180" href="{{ favicon_iphone_plus.url }}">
  <link rel="apple-touch-icon" sizes="152x152" href="{{ favicon_ipad.url }}">
  <link rel="apple-touch-icon" sizes="167x167" href="{{ favicon_ipad_pro.url }}">
  {% endif %}
  {% endblock %}

  {% block extra_head %}{% endblock %}
</head>

<body class="crx-{{page.content_type.model}} {% if page.get_parent %}parent-page-{{page.get_parent.id}}{% endif %} {% block body_class %}{% endblock %}" id="page-{{page.id}}">
  {% include "coderedcms/includes/crx_banner.html" %}

  {% block ada_skip %}
  <a class="visually-hidden-focusable" href="#content">Skip navigation</a>
  {% endblock %}

  {% wagtailuserbar %}

  {% block navbar %}{% endblock %}

  <div id="content">
    {% block content %}
    {% block messages %}
    {% if messages %}
    <div class="container">
      {% for message in messages %}
      <div class="alert alert-{{ message.tags|map_to_bootstrap_alert }}" role="alert">{{ message }}</div>
      {% endfor %}
    </div>
    {% endif %}
    {% endblock %}
    {% block content_pre_body %}{% endblock %}

    {% block content_body %}
    {% for block in page.body %}
    {% include_block block with settings=settings %}
    {% endfor %}
    {% endblock %}

    {% block content_post_body %}{% endblock %}

    {% block index_filters %}
    <div class="container">
      {% if page.index_show_subpages and page.index_classifiers.exists %}
      {% include "coderedcms/includes/classifier_dropdowns.html" with formclass="d-flex" formid="filter" %}
      {% endif %}
    </div>
    {% endblock %}

    {% block index_content %}
    {% if page.index_show_subpages %}
    <div class="container">
      <div class="row">
        {% for child in index_paginated %}
        <div class="col-sm-6 col-lg-4">
          {% include child.miniview_template with page=child %}
        </div>
        {% endfor %}
      </div>
    </div>
    {% include "coderedcms/includes/pagination.html" with items=index_paginated %}
    {% endif %}
    {% endblock %}

    {% block related_content %}
    {% if page.related_show %}
    <div class="container">
      <h2 class="text-center my-5">{% trans "Related" %}</h2>
      <div class="row g-4">
        {% for rp in related_pages %}
        <div class="col-sm-6 col-lg-4">
          {% include rp.miniview_template with page=rp miniview_css_class="h-100" %}
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}
    {% endblock %}

    {% endblock %}
  </div>

  <div id="content-walls">
    {% block content_walls %}
    {% for content_wall in content_walls %}
    {% include_block content_wall with settings=settings %}
    {% endfor %}
    {% endblock %}
  </div>

  {% block footer %}{% endblock %}

  {% block frontend_scripts %}
  <script src="{% static 'coderedcms/vendor/bootstrap/dist/js/bootstrap.bundle.min.js' %}?v={% coderedcms_version %}"></script>
  {% endblock %}

  {% block coderedcms_scripts %}
  <script src="{% static 'coderedcms/js/crx-front.min.js' %}?v={% coderedcms_version %}"></script>
  {% endblock %}

  {% block custom_scripts %}{% endblock %}

  {% block struct_seo %}
    {% include "wagtailseo/struct_data.html" %}
    {% include "wagtailseo/struct_org_data.html" %}
    {% block struct_seo_extra %}{% endblock %}
  {% endblock %}

  {% block spam_service_scripts %}
  {% with settings.coderedcms.LayoutSettings as ls %}
  {% if ls.spam_service == ls.SpamService.RECAPTCHA_V3 %}
  <script src="https://www.google.com/recaptcha/api.js?render={{ ls.recaptcha_public_key }}"></script>
  <script>
    function recaptchaSubmit(formId) {
      let form = document.getElementById(formId);
      let spinner = document.getElementById(`${formId}ButtonSpinner`);
      let button = document.getElementById(`${formId}Button`)
      if (form.reportValidity()) {
        grecaptcha.ready(function() {
          button.disabled = true;
          spinner.classList.remove("d-none");
          grecaptcha.execute(
            '{{ ls.recaptcha_public_key }}',
            {action: 'submit'}
          ).then(function(token) {
            // Set value for every token input on the page.
            document.getElementsByName("g-recaptcha-response").forEach(
              function(el) {el.value = token}
            );
            document.getElementById(formId).submit();
          }).finally(function() {
            button.disabled = false;
            spinner.classList.add('d-none')
          })
        });
      }
    }
  </script>
  {% elif ls.spam_service == ls.SpamService.RECAPTCHA_V2 %}
  <script src="https://www.google.com/recaptcha/api.js"></script>
  {% endif %}
  {% endwith %}
  {% endblock %}

  {% block body_tracking_scripts %}
  {% if not disable_analytics %}
  {% if settings.coderedcms.AnalyticsSettings.gtm_id %}
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{settings.coderedcms.AnalyticsSettings.gtm_id}}"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->
  {% endif %}
  {% if settings.coderedcms.AnalyticsSettings.body_scripts %}
  {{settings.coderedcms.AnalyticsSettings.body_scripts|safe}}
  {% endif %}
  {% endif %}
  {% endblock %}
</body>

</html>
