{% load wagtailuserbar wagtailcore_tags wagtailsettings_tags wagtailimages_tags %}
{% load core_tags static compress gem_tags %}

{% get_settings %}
{% spaceless %}
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]>
<!-->
<html class="no-js" lang="{{request.LANGUAGE_CODE}}">
<!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <title>Yegna |
    {% block title %}
      {% if self.seo_title %}
        {% if self.seo_title == "Main" %}Home
        {% else %}
          {{ self.seo_title }}
        {% endif %}
      {% elif self.title %}
        {% if self.title == "Main" %}Home
        {% else %}
          {{ self.title }}
        {% endif %}
      {% else %}Welcome{% endif %}
    {% endblock %}
  </title>
  <meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="twitter:card" content="summary_large_image"/>
  <meta property="og:url" content="{{ request.build_absolute_uri }}" />
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <meta name="description" content="{% if self.social_media_description %}{{ self.social_media_description }}{% elif self.subtitle %}{{ self.subtitle }}{% elif self.search_description %}{{self.search_description}}{% else %}Yegna{% endif %}" />
  <meta name="keywords" content="{% if self.specific.metadata_tags %}{{self.specific.metadata_tags.all|join:','}}{% else %}{{self.seo_title}}{% endif %}" />
  <meta property="og:title" content="{% if self.social_media_title %}{{ self.social_media_title }}{% elif self.seo_title %}{{ self.seo_title }}{% else %}{{ self.title }}{% endif %}" />

  {% if self.search_description %}
    <meta name="description" content="{{self.search_description}}" />
    <meta property="og:description" content="{{self.search_description}}"/>
  {% elif self.social_media_description %}
    <meta name="description" content="{{self.social_media_description}}" />
    <meta property="og:description" content="{{self.social_media_description}}"/>
  {% elif self.title and self.subtitle %}
    <meta name="description" content="{{self.title}} - {{self.subtitle}}" />
    <meta property="og:description" content="{{self.title}} - {{self.subtitle}}"/>
  {% else %}
    <meta name="description" lang="en" content="Yegna encourages positive behaviour change for girls in Ethiopia by tackling real-life challenges through stories and music." />
    <meta property="og:description" lang="en" content="Yegna encourages positive behaviour change for girls in Ethiopia by tackling real-life challenges through stories and music."/>
  {% endif %}
  <meta property="og:type" content="website" />
  {% if self.social_media_image %}
    {% image self.social_media_image fill-450x200 as tmp_photo %}
  {% endif %}
  {% if self.get_effective_image %}
    {% image self.get_effective_image fill-450x200 as article_photo %}
  {% endif %}

  {% if settings.core.SiteSettings.google_search_console %}
    <meta name="google-site-verification" content="{{settings.core.SiteSettings.google_search_console}}" />
  {% endif %}
  <link href="{{ request.build_absolute_uri }}" rel="canonical" />
  <meta property="og:image" content="{% if self.social_media_image %}{{ tmp_photo.url }}{% elif article_photo.url %}{{ article_photo.url }}{% else %}{{ request.scheme }}://{{ request.get_host }}{% static 'img/logos/yegna-logo.png' %}{% endif %}"/>
  <meta property="og:image:type" content="" />
  <meta property="og:image:width" content="450" />
  <meta property="og:image:height" content="200" />
  <meta name="msapplication-TileColor" content="#ffffff" />
  <meta name="theme-color" content="#ffffff" />
  <meta name="msapplication-TileImage" content="{% static 'img/logos/yegna-logo.svg' %}">
  <link rel="apple-touch-icon" sizes="144x144" href="{% static 'img/logos/yegna-logo.svg' %}">
  <link rel="apple-touch-icon" sizes="180x180" href="{% static 'img/logos/yegna-logo.svg' %}">
  <link rel="icon" type="image/png" sizes="192x192" href="{% static 'img/logos/yegna-logo.svg' %}">
  <link rel="icon" type="image/png" sizes="96x96" href="{% static 'img/logos/yegna-logo.svg' %}">
  <link rel="icon" type="image/png" sizes="39x49" href="{% static 'img/logos/yegna-logo.svg' %}">
  <link rel="icon" type="image/png" sizes="16x16" href="{% static 'img/logos/yegna-logo.svg' %}">
  <link rel="shortcut icon" type="image/x-icon" href="{% static 'img/appicons/yegna/favicon.ico' %}">
  <link rel="icon" type="image/x-icon" href="{% static 'img/appicons/yegna/favicon.ico' %}">

  <!-- Code snippet to speed up Google Fonts rendering: googlefonts.3perf.com -->
  <link rel="dns-prefetch" href="https://fonts.gstatic.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
  <link rel="preload" href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700" as="fetch" crossorigin="anonymous">
  <script>
    !function(e,n,t){"use strict";var o="https://fonts.googleapis.com/css?family=Noto+Sans:400,700",r="__3perf_googleFontsStylesheet";function c(e){(n.head||n.body).appendChild(e)}function a(){var e=n.createElement("link");e.href=o,e.rel="stylesheet",c(e)}function f(e){if(!n.getElementById(r)){var t=n.createElement("style");t.id=r,c(t)}n.getElementById(r).innerHTML=e}e.FontFace&&e.FontFace.prototype.hasOwnProperty("display")?(t[r]&&f(t[r]),fetch(o).then(function(e){return e.text()}).then(function(e){return e.replace(/@font-face {/g,"@font-face{font-display:swap;")}).then(function(e){return t[r]=e}).then(f).catch(a)):a()}(window,document,localStorage);
  </script>

  {% compress css inline %}
  <link href="{{ STATIC_URL }}css/{{ ENV }}/yegna.css" rel="stylesheet" media="all">
  {% endcompress %}
</head>
<body {% block body_class %}{% endblock %} {% if request.LANGUAGE_CODE|language_bidi == True %}dir="rtl"{% endif %}>
  <img alt="Yegna" src="{% if self.social_media_image %}{{ tmp_photo.url }}{% elif article_photo.url %}{{ article_photo.url }}{% else %}{{ request.scheme }}://{{ request.get_host }}{% static 'img/logos/yegna-logo.png' %}{% endif %}" id="image__identity" style="display:none; visibility:hidden;" />
  <a class="skip-link" href="#wrapper">Skip to main</a>

  {% wagtailuserbar %}
  {% block google_analytics %}
   {% include "patterns/components/ga_tag_manager.html" %}
  {% endblock %}
  {% if settings.core.SiteSettings.local_ga_tracking_code %}
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
     })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
     ga('create', '{{settings.core.SiteSettings.local_ga_tracking_code}}', 'auto');
   </script>
  {% endif %}
    <div id="header" class="header" autofocus>
      {% if languages|length > 1 %}
      <div class="languages">
        <div class="languages--wrapper">
          <ul class="languages-list">
            {% for language in languages %}
              <li class="languages-list__item">
                <a rel="alternate" hreflang="{{language.locale | language_name_local}}" href="{% url 'locale_set' language.locale %}?next={{request.path}}{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}" class="languages-list__anchor{% if request.LANGUAGE_CODE == language.locale %} languages-list__anchor--active{% endif %}">
                  {{language.locale | language_name_local}}
                </a>
              </li>
            {% endfor %}
          </ul>
        </div>
      </div>
      {% endif %}
      <div class="header__inner">
        <div class="logo">
          <a href="/" class="logo__anchor">
            {% if settings.core.SiteSettings.logo %}
              {% image settings.core.SiteSettings.logo width-125 as logo_image %}
              <img src="{{logo_image.url}}" width="125" height="125" alt="Girl Effect Yegna" class="logo__image" />
            {% else %}
              {% with "img/logos/yegna-logo"|add:".svg" as logo_url %}
                <img src="{% static logo_url %}" width="125" height="125" alt="Girl Effect Yegna" class="logo__image" />
              {% endwith %}
            {% endif %}
          </a>
        </div>
        {% load_sections as sections %}
        {% if sections %}
        <div class="nav">
          <div class="nav-menu">
            <ul class="nav-menu-list">
              <li class="nav-menu-list__item dropdown">
                <label for="nav-menu_accordion"  id="menu" class="nav-menu-list__anchor dropdown-toggle">
                  <span>{% trans "Menu" %}</span>
                </label>
                <input type="checkbox" value="toggles" name="toggle" id="nav-menu_accordion" class="nav-menu-list__checkbox" />
                <div class="nav-menu-dropdown dropdown-menu">
                  <ul class="nav-menu-dropdown-list">
                    {% footer_page %}
                    {% for section in sections %}
                      <li class="nav-menu-dropdown-list__item">
                        {% if section|is_content:"News" or section|is_content:"Cast" %}
                          {#<!--EMPTY CHECK-->#}
                        {% else %}
                          <a href="{% pageurl section.specific %}" class="nav-menu-dropdown-list__anchor">{{section.title}}</a>
                        {% endif %}

                        {% load_child_sections_for_section section=section as sec_sections %}
                          <ul class="menu-list state-list">
                            {% for sec_section in sec_sections %}
                              {% if sec_section %}
                                <li class="menu-list__item state-list__item">
                                  <a href="{% pageurl sec_section.specific %}" class="menu-list__anchor state-list__anchor"><span>{{sec_section}}</span></a>
                                </li>
                              {% endif %}
                            {% endfor %}
                          </ul>

                      </li>
                    {% endfor %}
                  </ul>
                </div>
              </li>
              {% for section_page in sections %}
                {% if section_page.show_in_menus == True %}
                    <li class="nav-menu-list__item">
                      <a href="{% pageurl section_page.specific %}" id="{% if section_page|is_content:"Listen" %}listen{% elif section_page|is_content:"Cast" %}cast{% elif section_page|is_content:"Watch" %}watch{% endif %}" class="nav-menu-list__anchor">
                        <span>{{section_page.title}}</span>
                      </a>
                    </li>
                {% endif %}
              {% endfor %}
            </ul>
          </div>
          {% endif %}

          <div class="nav-social">
            {% social_media_footer %}
          </div>
          <div class="nav-search dropdown">
            <label for="search_accordion" id="nav_search" class="nav-search__label dropdown-toggle">{% trans "Search" %}</label>
            <input type="checkbox" value="toggles" name="search_toggle" id="search_accordion" class="nav-search__checkbox" />
            <div class="nav-search__wrapper dropdown-menu">
              <form action="{% url 'search' %}" class="nav-search__form" novalidate>
                <label class="search__label" for="search_button">{% trans "Search" %}</label>
                <input name="q" type="search" aria-label="Search Input" placeholder="{% trans 'Search Yegna' %}" id="search_button">
                <input type="submit" value="{% trans 'Go' %}" class="call-to-action__item call-to-action__item--icon">
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>


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

    <div id="footer" class="footer">
      {% social_media_footer %}
      <ul class="nav-menu-dropdown-list">
        {% footer_page %}
      </ul>
    </div>
    {% if is_via_kaios %}
      <div class="softkey">
        <div id="softkey-left" class="softkey-link">Back</div>
        <div id="softkey-center" class="softkey-link">SELECT</div>
        <div id="softkey-right" class="softkey-link">Options</div>
      </div>
    {% endif %}
    <div class="copyright">
      <p class="copyright__content">&copy; {% now "Y" %} Girl Effect. {% trans "All Rights Reserved." %}</p>
      {% if settings.profiles.UserProfilesSettings.terms_and_conditions %}
        <a href="{% pageurl settings.profiles.UserProfilesSettings.terms_and_conditions.specific %}" class="copyright__link">
          {% trans "Terms &amp; Conditions" %}
        </a>
      {% endif %}
      {% if settings.gem.GemSettings.show_partner_credit %}
        <a href="{{settings.gem.GemSettings.partner_credit_link}}" class="copyright__link copyright__link--credit">
          {{settings.gem.GemSettings.partner_credit_description}}
        </a>
      {% endif %}
    </div>
    {% compress js inline %}
    <script>
      !function(a){var b=/iPhone/i,c=/iPod/i,d=/iPad/i,e=/(?=.*\bAndroid\b)(?=.*\bMobile\b)/i,f=/Android/i,g=/(?=.*\bAndroid\b)(?=.*\bSD4930UR\b)/i,h=/(?=.*\bAndroid\b)(?=.*\b(?:KFOT|KFTT|KFJWI|KFJWA|KFSOWI|KFTHWI|KFTHWA|KFAPWI|KFAPWA|KFARWI|KFASWI|KFSAWI|KFSAWA)\b)/i,i=/IEMobile/i,j=/(?=.*\bWindows\b)(?=.*\bARM\b)/i,k=/BlackBerry/i,l=/BB10/i,m=/Opera Mini/i,n=/(CriOS|Chrome)(?=.*\bMobile\b)/i,o=/(?=.*\bFirefox\b)(?=.*\bMobile\b)/i,p=new RegExp("(?:Nexus 7|BNTV250|Kindle Fire|Silk|GT-P1000)","i"),q=function(a,b){return a.test(b)},r=function(a){var r=a||navigator.userAgent,s=r.split("[FBAN");return"undefined"!=typeof s[1]&&(r=s[0]),s=r.split("Twitter"),"undefined"!=typeof s[1]&&(r=s[0]),this.apple={phone:q(b,r),ipod:q(c,r),tablet:!q(b,r)&&q(d,r),device:q(b,r)||q(c,r)||q(d,r)},this.amazon={phone:q(g,r),tablet:!q(g,r)&&q(h,r),device:q(g,r)||q(h,r)},this.android={phone:q(g,r)||q(e,r),tablet:!q(g,r)&&!q(e,r)&&(q(h,r)||q(f,r)),device:q(g,r)||q(h,r)||q(e,r)||q(f,r)},this.windows={phone:q(i,r),tablet:q(j,r),device:q(i,r)||q(j,r)},this.other={blackberry:q(k,r),blackberry10:q(l,r),opera:q(m,r),firefox:q(o,r),chrome:q(n,r),device:q(k,r)||q(l,r)||q(m,r)||q(o,r)||q(n,r)},this.seven_inch=q(p,r),this.any=this.apple.device||this.android.device||this.windows.device||this.other.device||this.seven_inch,this.phone=this.apple.phone||this.android.phone||this.windows.phone,this.tablet=this.apple.tablet||this.android.tablet||this.windows.tablet,"undefined"==typeof window?this:void 0},s=function(){var a=new r;return a.Class=r,a};"undefined"!=typeof module&&module.exports&&"undefined"==typeof window?module.exports=r:"undefined"!=typeof module&&module.exports&&"undefined"!=typeof window?module.exports=s():"function"==typeof define&&define.amd?define("isMobile",[],a.isMobile=s()):a.isMobile=s()}(this);

      (function() {
        var domReady = function(callback) {
          window.onload ? callback() : document.addEventListener("DOMContentLoaded", callback);
        };
        var screenOrient = function() {
          var windowSize = document.documentElement.clientWidth;
          var cutsTheMustard = 'querySelector' in document && 'localStorage' in window && 'addEventListener' in window;
          var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
          var smartDevice = (isMobile.apple.device || isMobile.android.device || isMobile.windows.device || !isMobile.other.opera || !isMobile.other.device);
          if (cutsTheMustard === true) {
            if (smartDevice && raf) {
              raf(function() {
                var jsScripts = [
                   "{% static 'js/jquery-3.5.1.min.js' %}",
                   "{% static 'js/dest/yegna-min.js' %}",
                   "{% static 'js/dest/kaios-min.js' %}",
                 ];
                for (var i = 0; i < jsScripts.length; i++) {
                  var script = document.createElement('script');
                  script.src = jsScripts[i];
                  script.async = false;
                  document.querySelector('script').parentNode.appendChild(script);
                }
              });
            }
          }
        };
        domReady(function() {
          screenOrient();
        });
      })();
    </script>
    <script src="{% static 'js/dest/main-min.js' %}"></script>
    {% endcompress %}
</body>
</html>
{% endspaceless %}
