{% load compress wagtailuserbar wagtailcore_tags core_tags static %}
{% load wagtailsettings_tags wagtailimages_tags molo_commenting_tags %}
{% get_settings %}

<!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 IE 10]><html class="no-js lt-ie9 ie10"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="{{request.LANGUAGE_CODE}}">
<!--<![endif]-->
  <head>
    <meta charset="utf-8"/>
    <title>Tujibebe |
      {% 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 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 }}" />
    <link href="{{ request.build_absolute_uri }}" rel="canonical" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="{{ STATIC_URL }}img/appicons/tanzania/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    {% 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 %}

    {% comment %}
      This meta block is overriden in some child templates because not all of the properties
      used here are available on every model.
    {% endcomment %}
    <meta property="og:type" content="website" />
    {% block meta %}
      <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 %}" />
      <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/tujibebe.svg' %}{% endif %}"/>
      {% if self.search_description %}
        <meta name="description" content="Tujibebe | {{self.search_description}}" />
        <meta property="og:description" content="Tujibebe | {{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="Tujibebe | Tujibebe is a youth brand that educates and empowers young Tanzanians to make informed choices that enable them to overcome life’s challenges together." />
        <meta name="description" lang="sw-tz" content="Tujibebe | Tujibebe inawaelimisha na kuwawezesha vijana wa kitanzania kufanya maamuzi sahihi ili kwa pamoja waweze kukabiliana na changamoto za maisha." />
        <meta property="og:description" lang="en" content="Tujibebe | Tujibebe is a youth brand that educates and empowers young Tanzanians to make informed choices that enable them to overcome life’s challenges together."/>
        <meta property="og:description" lang="sw-tz" content="Tujibebe | Tujibebe inawaelimisha na kuwawezesha vijana wa kitanzania kufanya maamuzi sahihi ili kwa pamoja waweze kukabiliana na changamoto za maisha."/>
      {% endif %}
    {% endblock %}
    <meta property="og:image:type" content="" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <link rel="apple-touch-icon" sizes="144x144" href="{{ STATIC_URL }}img/appicons/tanzania/ms-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ STATIC_URL }}img/appicons/tanzania/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="{{ STATIC_URL }}img/appicons/tanzania/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="96x96" href="{{ STATIC_URL }}img/appicons/tanzania/android-icon-96x96.png">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ STATIC_URL }}img/appicons/tanzania/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ STATIC_URL }}img/appicons/tanzania/favicon-16x16.png">
    {% if settings.core.SiteSettings.google_search_console %}
      <meta name="google-site-verification" content="{{settings.core.SiteSettings.google_search_console}}" />
    {% endif %}
    {% compress css inline %}
      <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/{{ ENV }}/tanzania.css" media="all">
    {% endcompress %}
  </head>
  <body class="{% block body_class %}{% endblock %}" {% if request.LANGUAGE_CODE|language_bidi == True %}dir="rtl"{% endif %}>
    <img alt="Tujibebe" 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/tujibebe.svg' %}{% endif %}" id="image__identity" style="display:none; visibility:hidden;" />
    {% if settings.gem.GemSettings.fb_enable_chat_bot %}
      <!-- Load Facebook SDK for JavaScript -->
      <div id="fb-root"></div>
      <script>
      window.fbAsyncInit = function() {
        FB.init({
          xfbml            : true,
          version          : 'v3.2'
        });
      };
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
      </script>
      <!-- Your customer chat code -->
      <div class="fb-customerchat"
        attribution=install_email
        page_id="200029997300894"
        logged_in_greeting="Hi! "
        logged_out_greeting="Hi! "
        ref="website">
      </div>
    {% endif %}
    {% wagtailuserbar %}

    <div id="header-wrapper" class="header-wrapper" autofocus>
      <div id="language-bar" class="language-wrapper">
        {% if languages|length > 1 %}
          <div class="languages languages--fixed-header">
            <ul class="language-list language-list--standard-center">
            {% for language in languages %}
              <li class="language-list__item language-list__item--standard-center">
                <a href="{% url 'locale_set' language.locale %}?next={{request.path}}{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}" class="language-list__anchor language-list__anchor--standard-center {% if request.LANGUAGE_CODE == language.locale %} is-active {% endif %}">{{language.locale|language_name_local}}</a>
              </li>
            {% endfor %}
            </ul>
          </div>
        {% endif %}
      </div>
      <div id="header" class="header">
        <a href="/" class="logo logo--center">
          <img alt="Tujibebe" srcset="{% static 'img/logos/tujibebe-white.svg' %}" src="{% static 'img/logos/tujibebe-white.png' %}" class="logo__image"  width="115" height="35"/>
        </a>

        <div class="header__menu">
          <ul class="menu-list menu-list--section-nav">
            <li id="profile" class="menu-list__item menu-list__item--section-nav">
              {% if not user.is_authenticated %}
                <a  href={{REGISTRATION_URL}} class="menu-list__anchor menu-list__anchor--section-nav">
                  <span class="menu-list__label">{% trans "Sign up" %}</span>
                </a>
              {% else %}
                <a  href="{{VIEW_PROFILE_URL}}" class="menu-list__anchor menu-list__anchor--section-nav">
                  <span class="menu-list__label">{% trans "Profile" %}</span>
                </a>
              {% endif %}
            </li>
            <li id="search" class="menu-list__item menu-list__item--section-nav">
              <label for="search-toggle" class="menu-list__anchor menu-list__anchor--section-nav">
                <span class="menu-list__label">{% trans "Search" %}</span>
              </label>
            </li>
          </ul>
        </div>
        <div class="header__search">
          <input class="header__search-input" type="checkbox" id="search-toggle">
          <div class="header__search-bar">
            <div class="search-bar">
              <form action="{% url 'search' %}" novalidate>
                {% block search_input_header %}
                  <input aria-label="Search Input" placeholder="{% trans "Search" %}" name="q" type="text">
                {% endblock search_input_header %}
                <input type="submit" value="{% trans "Search" %}" class="call-to-action__item call-to-action__item--with-icon call-to-action__item--search-icon">
              </form>
            </div>
          </div>
        </div>
        <div class="section-nav">
          <ul id="nav-list" class="section-nav-list">
            <li class="section-nav-list__item">
              <a href="/" class="section-nav-list__anchor{% if request.path == '/' %} selected{% endif %}">
                {% trans "Home" %}
              </a>
            </li>
            {% load_sections as sections %}
            {% for section in sections %}
            {% pageurl section.specific as section_path %}
              <li class="section-nav-list__item">
                <a href="{% pageurl section.specific %}" class="section-nav-list__anchor{% if request.path == section_path %} selected{% endif %}">
                  {{section.title}}
                </a>
              </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    </div>

    <div id="content-wrapper" class="content-wrapper">
      <div class="content">
        {% display_unread_notifications %}
        {% block content %}{% endblock %}
        {% block breadcrumbs %}
          {% breadcrumbs %}
        {% endblock %}
        {% if not request.path == '/' %}
          {% tag_menu_homepage %}
        {% endif %}

        {% block footer_menu %}
          <div id="gem-footer">
            <div class="search-bar">
              <form action="{% url 'search' %}" novalidate>
                {% block search_input_footer %}
                <input aria-label="Search Input" placeholder="{% trans "Search" %}" name="q" type="text">
                {% endblock search_input_footer %}
                <input type="submit" value="{% trans "Search" %}" class="call-to-action__item call-to-action__item--with-icon call-to-action__item--search-icon">
              </form>
            </div>
            <div class="group">
              <ul class="sections footer-menu-list left">
                <li class="footer-menu-list__item">
                  <a href="/" class="footer-menu-list__anchor{% if request.path == '/' %} selected{% endif %}">{% trans "Home" %}</a></li>
                {% load_sections as sections %}
                {% for section in sections %}
                {% pageurl section.specific as section_path %}
                  <li class="footer-menu-list__item">
                    <a href="{% pageurl section.specific %}" class="footer-menu-list__anchor{% if request.path == section_path %} selected{% endif %}">
                      {{section.title}}
                    </a>
                  </li>
                {% endfor %}
              </ul>
              <ul class="sections footer-menu-list right">
                {% footer_page %}
                {% if not user.is_authenticated %}
                  <li class="footer-menu-list__item">
                    <a href={{REGISTRATION_URL}} class="footer-menu-list__anchor">
                      {% trans "Join us" %}
                    </a>
                  </li>
                  <li class="footer-menu-list__item">
                    <a href="{{ LOGIN_URL }}" class="footer-menu-list__anchor">
                      {% trans "Log in" %}
                    </a>
                  </li>
                {% else %}
                  <li class="footer-menu-list__item">
                    <a href="{{VIEW_PROFILE_URL}}" class="footer-menu-list__anchor">
                      {% trans "Profile" %}
                    </a>
                  </li>
                  <li class="footer-menu-list__item">
                    <form method="post" action="{{ LOGOUT_URL }}">
                      {% csrf_token %}
                      <input class="footer-menu-list__anchor" value="{% trans 'Log out' %}" type="submit">
                    </form>
                  </li>
                {% endif %}
              </ul>
            </div>
          </div>
        {% endblock %}

        {% block footer %}
          <div id="footer-bar" class="footer-bar-wrapper">
              {% social_media_footer %}
            <a class="footer-logo" href="/">
              <img class="footer-logo__thumbnail" alt="{% trans "Tujibebe Logo - Footer" %}" src="{% static 'img/logos/tujibebe.png' %}"/>
            </a>
            {% if languages|length > 1 %}
              <div class="languages">
                <ul class="language-list language-list--with-label">
                  <li class="language-list__item language-list__item--with-label">
                    <span class="language-list--with-label__title">{% trans "Language" %}</span>
                  </li>
                  {% for language in languages %}
                  <li class="language-list__item language-list__item--with-label">
                    <a href="{% url 'locale_set' language.locale %}?next={{request.path}}{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}" class="language-list__anchor language-list__anchor--with-label {% if request.LANGUAGE_CODE == language.locale %}is-active{% endif %}">
                      {{language.locale|language_name_local}}
                    </a>
                  </li>
                  {% endfor %}
                </ul>
              </div>
            {% endif %}
            <div class="call-to-action call-to-action--backToTop">
              <a href="#" class="call-to-action__nav-item-text call-to-action__nav-item-text--backToTop">
                {% trans "Back to Top" %}</a>
            </div>
          </div>
        {% endblock %}
        {% 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__footer-copy" >&copy;
            {% now "Y" %} Tujibebe. {% trans "All Rights Reserved." %}
            {% if settings.profiles.UserProfilesSettings.terms_and_conditions %}
            <a href="{% pageurl settings.profiles.UserProfilesSettings.terms_and_conditions.specific %}">
              {% trans "Terms &amp; Conditions" %}
            </a>
            {% endif %}
          </p>
          {% if settings.gem.GemSettings.show_partner_credit %}
            <a href="{{settings.gem.GemSettings.partner_credit_link}}">
              {{settings.gem.GemSettings.partner_credit_description}}
            </a>
          {% endif %}
        </div>
      </div>
    </div>
    {% block google_analytics %}
      {% include "patterns/components/ga_tag_manager.html" %}
    {% endblock %}

    {% block facebook_pixel_tracker %}
    {# Facebook Pixel Code #}
      <script>
      !function(f,b,e,v,n,t,s)
      {if(f.fbq)return;n=f.fbq=function()
      {n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}
      ;
      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
      n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t,s)}(window,document,'script',
      'https://connect.facebook.net/en_US/fbevents.js');
      fbq('init', '461337710896694');
      fbq('track', 'PageView');
      </script>
      <noscript>
      <img height="1" width="1"
      src="https://www.facebook.com/tr?id=461337710896694&ev=PageView
      &noscript=1" alt="Facebook pixel tracker"/>
      </noscript>
    {# End Facebook Pixel Code #}
    {% endblock %}

    {% block facebook_analytics %}
      {% include "core/facebook_analytics.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 %}
    {% if not is_via_freebasics %}
      {% compress js inline %}
      <script src="{% static 'js/dest/main-min.js' %}"></script>
      <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);
      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) {
            var jsScripts = [
               "{% static 'js/jquery-3.5.1.min.js' %}",
               "{% static 'js/dest/springster-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);
            }
          }
        };

        //Event Propagation NOT covered
        var disabledElem = document.querySelectorAll('.call-to-action__nav-item-text--disabled'),
            pageNums;
        for(var i = 0; i < disabledElem.length; i++){
          disabledElem[i].addEventListener('click', (event) => {
            event.preventDefault();
            var pageNums = event.target.href.split('/')[6] === '' ?  event.target.href.split('/')[5]  : event.target.href.split('/')[6];
            window.location = "/commenting/molo/reply/" + pageNums + "/#comment-block";
          });
        };
      </script>
      {% endcompress %}
    {% endif %}
  </body>
</html>
