{% comment %}
  <!--
  NOTE!!
  THIS APPLICATION USES ARTICLE BODY MEDIA(VIDEO / YOUTUBE ) [FIRST MEDIA IN ARTICLE BODY]
  Homepage Media Option is later added for YEGNA
  We cannot simple change the template behaviour as this qill require CMS content redoing.
  -->
{% endcomment %}

{% load wagtailuserbar wagtailsettings_tags wagtailcore_tags  wagtailimages_tags %}
{% load core_tags compress gem_tags static 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 gt IE 8]><!-->
<html class="no-js" lang="{{request.LANGUAGE_CODE}}">
<!--<![endif]-->

<head>
  <meta charset="utf-8" />
  <title>
    Chhaa Jaa |
    {% block title %}
      {% if self.seo_title %}
        {% if self.seo_title == "Main" %}Home{% else %}
          {{ self.seo_title }}
        {% endif %}
      {% else %}
        {% if self.title == "Main" %}Home{% else %}
          {{ self.title }}
        {% endif %}
      {% endif %}
    {% endblock %}
  </title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="twitter:card" content="summary_large_image" />

  {# <!--CORRECT GOOGLE SITE VERIFICATION CONTENT? --> #}
  <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="#ffe559">
  <meta name="msapplication-TileImage" content="{% static 'img/logos/chhaajaa-logo.png' %}">
  <meta name="theme-color" content="#ffe559"/>
  {% 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 %}
  <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:type" content="website" />
  {% 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" content="Chhaa Jaa har hafte aapke liye laayega hasi, knowledge aur inspiration! Ham wada karte hain ki hamari kahaniya sachchi, mazedaar aur joshili hongi Aao milein aisi ladkiyon se jo zindagi puri tarah se jeena chahti hain aur jinhe savaal poochne se darr nahi lagta" />
    <meta property="og:description" content="Chhaa Jaa har hafte aapke liye laayega hasi, knowledge aur inspiration! Ham wada karte hain ki hamari kahaniya sachchi, mazedaar aur joshili hongi Aao milein aisi ladkiyon se jo zindagi puri tarah se jeena chahti hain aur jinhe savaal poochne se darr nahi lagta"/>
  {% 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/chhaajaa-logo.png' %}{% endif %}" />
  <meta property="og:image:type" content="" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta name="msapplication-TileImage" content="{% static 'img/appicons/chhaajaa/chaajaa-purple.png' %}">
  <meta name="theme-color" content="#ffffff">
  <link rel="apple-touch-icon" sizes="300x300" href="{% static 'img/appicons/chhaajaa/chaajaa-purple.png' %}">
  <link rel="shortcut icon" href="{% static 'img/appicons/chhaajaa/favicon.ico' %}" type="image/x-icon">
  <link rel="icon" href="{% static 'img/appicons/chhaajaa/chaajaa-purple.png' %}" type="image/x-icon">

  {% 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 }}/chhaajaa.css" media="all">
  {% endcompress %}

  <!-- 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', '2468162103426122');
      fbq('track', 'PageView');
  </script>
  <noscript>
    <img height="1" width="1"src="https://www.facebook.com/tr?id=2468162103426122&ev=PageView&noscript=1"/>
  </noscript>
  <!-- End Facebook Pixel Code -->
  {% if user.is_authenticated %}
    <script>
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({
        'wagtailID':'{{user.profile.uuid}}'
      });
    </script>
  {% endif %}
  <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', 'GTM-NH95KK4');
  </script>
  <!-- End Google Tag Manager -->
</head>
<body>
  <img alt="Chhaajaa" 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/chhaajaa-logo.png' %}{% endif %}" id="image__identity" style="display:none; visibility:hidden;" />
  <a class="skip-link" href="#wrapper">Skip to main</a>
  <!-- Google Tag Manager (noscript) -->
  <noscript>
    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P45VN52" height="0" width="0" style="display:none;visibility:hidden"></iframe>
  </noscript>

  <header class="main_menu_area">
    <nav class="navbar">
      <div class="navbar-header">
        <button aria-label="Collapse Menu" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          {% if user.is_authenticated %}{% endif %}
          <span class="sr-only">{% trans "Menu" %}</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">
         {% if settings.core.SiteSettings.logo %}
            {% image settings.core.SiteSettings.logo width-350 as logo_image %}
            <img src="{{logo_image.url}}" alt="Chhaajaa" />
          {% else %}
            <img src="{% static 'img/logos/chhaajaa-logo-old.png' %}" alt="Chhaajaa" />
          {% endif %}
        </a>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <div class="nav navbar-nav navbar-right">
          {% load_sections service_aggregator=True as service_aggregators %}
          {% load_sections as sections %}
          <!-- DESKTOP NAV -->
          <ul class="navbar-nav__item">
            <li class="navbar-nav__option">
              <a href="/" class="navbar-nav__anchor">
                {% trans "Home" %}
              </a>
            </li>
            {% if sections %}
              {% for section in sections %}
                {% if section.show_in_menus == True  %}
                  {% content_is section "Home" as is_home %}
                  {% if not is_home %}
                    <li class="navbar-nav__option">
                      <a href="{% pageurl section.specific %}" class="navbar-nav__anchor">
                        {{section.title}}
                      </a>
                    </li>
                  {% endif %}
                {% endif %}
              {% endfor %}
            {% endif %}
            {% if service_aggregators %}
              {% for service_aggregator in service_aggregators %}
                <li class="navbar-nav__option">
                  <a href="{% pageurl service_aggregator.specific %}" class="navbar-nav__anchor">{{service_aggregator.title}}</a>
                </li>
              {% endfor %}
            {% endif %}
          </ul>
          <!-- MOBILE NAV -->
          <ul class="navbar-nav__item">
            {% if request.user.is_authenticated %}
            <li class="navbar-nav__option">
              <a href="{{VIEW_PROFILE_URL}}" class="navbar-nav__button">{% trans "Profile" %}</a>
            </li>
            <li class="navbar-nav__option">
              <form method="post" id="logout-form" action="{{ LOGOUT_URL }}">
              {% csrf_token %}
                <input value="{% trans 'Log out' %}" type="submit" class="navbar-nav__button"/>
              </form>
            </li>
            {% else %}
              <li class="navbar-nav__option">
                <a href="{{LOGIN_URL}}" class="navbar-nav__button">{% trans "Log In" %}</a>
              </li>
            {% endif %}
            <li class="navbar-nav__option">
              <div class="nav-search">
                <label for="search_accordion" id="nav_search" class="nav-search__label"></label>
                <input type="checkbox" value="toggles" name="search_toggle" id="search_accordion" class="nav-search__checkbox" />
                <div class="nav-search__wrapper">
                  <form action="{% url 'search' %}" class="nav-search__form" novalidate>
                    <label class="search__label" for="search_top">{% trans 'Search' %}</label>
                    <input name="q" type="search" aria-label="Search Input" id="search_top" placeholder="{% trans 'Search' %}">
                    <input type="submit" value="{% trans 'Search' %}" class="call-to-action__item call-to-action__item--icon">
                  </form>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

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

  <footer class="footer_area">
    <div class="footer--left">
      <a href="/" class="footer__logo">
        {% if settings.core.SiteSettings.logo %}
          {% image settings.core.SiteSettings.logo width-350 as logo_image %}
          <img src="{{logo_image.url}}"  alt="Chhaajaa" />
        {% else %}
          <img src="{% static 'img/logos/chhaajaa-logo-old.png' %}" alt="Chhaajaa" />
        {% endif %}
      </a>
      <p class="copyright">
        &copy; {% now "Y" %}{% trans " All Rights Reserved." %}
      </p>
    </div>

    {% footer_page %}
    <div class="call-to-action call-to-action--backToTop">
      <a href="#" class="call-to-action__item--label">
        {% trans "Go to top" %}
      </a>
    </div>
  </footer>



  <script src="{% static 'js/jquery-3.5.1.min.js' %}" type="text/javascript"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="{% static 'js/isotope.pkgd.min.js'%}"></script>
  <script src="https://www.googleoptimize.com/optimize.js?id=OPT-P879MZC"></script>
  {% if settings.core.SiteSettings.local_ga_tracking_code %}
    <script type="text/javascript">
      (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 %}
  <script src="{% static 'js/dest/main-min.js' %}"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      var widthViewport =  $(window).width();
      if(widthViewport > 720) {
        var $grid = $('.service-stacklist').isotope({
          itemSelector: '.service-stacklist__item',
          layoutMode: 'masonry',
          cellsByRow: {
            columnWidth: 200,
            rowHeight: 150
          }
        });
      };
      /* Section */
      $("#share_article").click(function(e) {
        e.preventDefault();
        $("#share_reveal").toggle(function(){
          $(this).animate({
             "display": "block",
             "transition": "display .15s ease-in-out"
           }, 500);
          },function() {
           $(this).animate({
             "display": "block",
             "transition": "display .15s ease-in-out"
           }, 500);
          }
        );
      });
      /* Commenting */
      $('#comment-form').submit(function() {
        $.ajax({
          data: $(this).serialize(),
          type: $(this).attr('method'),
          url: $(this).attr('action'),
          success: function (data) {
            // if the comment was a success, remove the comment text from the text area
            $('#id_comment').val('');
            $('#id_comment').after("<p class='comment-success'>Thank you for your comment!</p>");
            setTimeout(function(){
              $('.comment-success').each(function(index) {
                $(this).hide('fast', function(){ $(this).remove(); });
              })
            }, 3000);
          },
        });
        return false;
      });
      //Teaser excerpt
      var article_excerpt = $(".teaser-stacklist__excerpt").text().length;
      var show_more_link = $(".show-more");
      show_more_link.css({
        display: 'none'
      });
      if(article_excerpt > 308) {
        show_more_link.css({
          display: 'inline-block'
        });
        show_more_link.click(function (e) {
          e.preventDefault();
          var $this = $(this);

          $this.text($this.text() == "(Show Less)" ? "(Show More)" : "(Show Less)");
          $(".teaser-stacklist__excerpt").toggleClass("teaser-stacklist__excerpt--hidden").slow();
        });
      }
      $( "#id_comment").on("focus",function(event){
        $(this).closest(".comments-posting").css({
          "border": "5px solid #72f3a2",
          "outline": "none",
          "padding": "10px",
          "border-radius": "5px"
        });
      }).on("blur",function(event) {
      $(this).closest(".comments-posting").css("border","5px solid transparent");
    });
    //Menu active state
    var urlPath = window.location.pathname;
      $('.navbar-nav__anchor, .pull-right-list__anchor').each(function(){
        var $this = $(this),
            navhref = $this.attr('href');
          if(navhref != undefined && urlPath.substring(0,navhref.length) == navhref) {
            if(navhref === '/' ) {
              $("a[href='/']").addClass('active');
            } else {
              $("a[href='/']").removeClass('active');
              $this.closest('.navbar-nav__anchor, .pull-right-list__anchor').addClass('active');
            }
          }
      });
    });
  </script>
</body>
</html>
