{% extends "base.html" %}
{% load wagtailcore_tags wagtailimages_tags wagtailembeds_tags wagtailsettings_tags core_tags comments gem_tags molo_forms_tags %}
{% get_settings %}

{% block content %}
  {% load_sections service_aggregator=True as service_aggregators %}
  {% load_sections as sections %}

  {% if sections  %}
    {% for section in sections %}
    {% load_child_articles_for_section self count=1 featured_in_section=True as featured_articles %}
    {% content_is section "Videos" as is_video_section %}
      {% if self.pk ==  section.pk %}
        {% if is_video_section %}
        <!-- VIDEO SECTION -->
          <div class="container">
            <div class="content--left">
              <div class="article-teaser">
                <div class="article-teaser__wrapper">
                  <ul class="teaser-stacklist">
                    {% for article in featured_articles|slice:":1" %}
                      {% include "core/tags/video-main.html" %}
                      {% forms_list_for_pages page=article %}
                    {% endfor %}
                  </ul>
                </div>
              </div>
            </div>
            <div class="content--right">
              {% latest_listing_homepage %}
            </div>
          </div>
        {% else %}
        <!-- ARREN SUN NA / GENERAL SECTION -->
          <div class="section-page">
            <div class="section-page__images">
              {% if self.get_effective_image %}
                {% image self.get_effective_image width-200 as section_photo %}
                  <img alt="{{ self.title }}" src="{{ section_photo.url }}" class="section-page__thumbnail"/>
              {% else %}
                <span class="section-page__thumbnail--placeholder">{{self.title}}</span>
              {% endif %}
            </div>
            <div class="section-page__wrapper">
              <ul class="teaser-stacklist">
                {% for featured_article in featured_articles  %}
                  <li class="teaser-stacklist__item">
                    {% for block in featured_article.body %}
                      {% if block.value.type == "video" %}
                        {% if block.value.youtube_link %}
                          <div class="teaser-stacklist__iframe">
                            {% embed block.value.youtube_link %}
                          </div>
                          {% endif %}
                      {% else %}
                        {% if forloop.last and featured_article.get_effective_image %}
                          <div class="teaser-stacklist__images">
                            {% image featured_article.get_effective_image width-1980 format-jpeg as teaser_thumbnail %}
                            <img alt="{{ featured_article.title }}" src="{{ teaser_thumbnail.url }}" class="teaser-stacklist__thumbnail"/>
                          </div>
                        {% endif %}
                      {% endif %}
                    {% endfor %}

                    <div class="teaser-stacklist__container">
                      <div class="teaser-stacklist__main">
                        <h2 class="teaser-stacklist__title-secondary">
                          {{featured_article.title|smarttruncatechars:100|safe}}</h2>
                        {% if featured_article.subtitle %}
                          <h6 class="teaser-stacklist__subtitle">
                            {{ featured_article.subtitle}}
                          </h6>
                        {% endif %}
                        <!-- RICH TEXT -->
                        {% for block in featured_article.body %}
                          {% if not block.block_type == 'media' %}
                            <p class="teaser-stacklist__excerpt">
                              {{block.value}}
                            </p>
                          {% endif %}
                        {% endfor %}
                        <!-- END RICH TEXT -->
                      </div>
                      <div class="teaser-stacklist__cta-buttons">
                        {% comment %}
                        <!-- DISPLAY REACTION QUESTIONS RADIO FIELDS -->
                        {% endcomment %}
                        {% forms_list_linked_to_pages featured_article %}

                        {% if settings.core.SiteSettings.facebook_sharing or settings.core.SiteSettings.twitter_sharing %}
                          <div class="share__item">
                            <a href="#" id="share_article" class="share__icon">{% trans "Share" %}</a>
                            <div id="share_reveal" class="share__reveal">
                              {% social_media_article page=featured_article %}
                            </div>
                          </div>
                        {% endif %}

                        {% if featured_article.is_commenting_enabled %}
                          {% if featured_article.allow_commenting %}
                            {% if request.user.is_authenticated %}
                              <div class="comments__item">
                                <a href="#comment-form" class="comments__icon">{% trans "Comment" %}</a>
                              </div>
                            {% endif %}
                          {% endif %}
                        {% endif %}
                      </div>
                    </div>
                  </li>
                {% endfor %}
              </ul>

              <div class="section-page__columns">
                {% load_child_sections_for_section section=self as child_sections %}
                {# <!-- ARREN SUN NA - SUBSECTION --> #}
                <div class="section-page__columns-left">
                  {% if child_sections %}

                    {% for child_section in child_sections %}
                      <div class="heading heading--hero">
                        <h1 class="heading__component">{{child_section.title}}</h1>
                      </div>
                      {% load_child_articles_for_section child_section False 10 as articles %}
                      <ul class="teaser-card">
                      {% for article in articles %}
                        <li class="teaser-card__item">
                          {% if article.image %}
                            <div class="teaser-card__images">
                              {% image article.image width-480 format-jpeg as teaser_thumbnail %}
                              <img alt="{{ article.title }}" src="{{ teaser_thumbnail.url }}" class="teaser-card__thumbnail"/>
                            </div>
                          {% endif %}
                          <div class="teaser-card__container">
                            <h3 class="teaser-card__title">
                              {{ article.title|smarttruncatechars:80|safe}}
                            </h3>
                            <div class="teaser-stacklist__cta-buttons">
                              {% comment %}
                              <!-- !!!!! DISPLAY REACTION QUESTIONS RADIO FIELDS ON SUBSECTION ARTICLE
                              -->
                              {% endcomment %}
                              {% forms_list_linked_to_pages article %}
                            </div>
                            {% if article.subtitle %}
                              <h6 class="teaser-card__subtitle">
                                {{ article.subtitle|smarttruncatechars:50|safe}}
                              </h6>
                            {% endif %}
                            {% for block in article.body %}
                              {% if not block.block_type == 'media' %}
                                <p class="teaser-card__para">
                                  {{block.value}}
                                </p>
                              {% endif %}
                            {% endfor %}
                          </div>
                        </li>
                      {% endfor %}
                      </ul>
                    {% endfor %}
                  {% endif %}
                </div>

                {# <!-- SIDE BAR--> #}
                {% if not is_video_section %}
                  {% load_child_articles_for_section self.get_first_sibling.specific False as articles %}
                {% else %}
                  {% load_child_articles_for_section self as articles %}
                {% endif %}
                {% if articles %}
                  <div class="section-page__columns-right">
                    <div class="heading heading--hero">
                      <h1 class="heading__component">{% trans "Arre dekho" %}</h1>
                    </div>
                    <ul class="teaser-grid">
                      {% for article in articles %}
                        <li class="teaser-grid__item">
                          {% for block in article.body %}
                            {% if block.value.type == "video" %}
                              {% if block.value.youtube_link %}
                                <div class="teaser-grid__iframe">
                                  {% embed block.value.youtube_link %}
                                </div>
                                {% endif %}
                            {% else %}
                              {% if forloop.last and article.get_effective_image %}
                                <div class="teaser-grid__images">
                                  <a href="{% pageurl article.specific %}" class="teaser-grid__anchor">
                                    {% image article.get_effective_image width-480 format-jpeg as teaser_thumbnail %}
                                    <img alt="{{ article.title }}" src="{{ teaser_thumbnail.url }}" class="teaser-grid__thumbnail"/>
                                  </a>
                                </div>
                              {% endif %}
                            {% endif %}
                          {% endfor %}
                          <div class="teaser-grid__container">
                            <a class="teaser-grid__anchor" href="{% pageurl article.specific %}">
                              <h1 class="teaser-grid__title">
                                {{ article.title|smarttruncatechars:45|safe}}</h1>
                            </a>
                            {% for block in article.body %}
                              {% if block.value.type == "video" %}
                                {% with block.value as media %}
                                  <span class="teaser-grid__duration">
                                    ({{block.value.duration|seconds_to_time}})</span>
                                {% endwith %}
                              {% endif %}
                            {% endfor %}
                            {% if article.subtitle %}
                              <p class="teaser-grid__subtitle">
                                {{ article.subtitle|smarttruncatechars:50|safe}}
                              </p>
                            {% endif %}
                          </div>
                        </li>
                      {% endfor %}
                    </ul>
                  </div>
                {% endif %}
              </div>
            </div>
          </div>
        {% endif %}
      {% endif %}
    {% endfor %}
    <!-- START: REVIEW IMPLEMEMTATION -->
    {% if not is_video_section %}
      {% load_child_articles_for_section self.get_first_sibling.specific False as articles %}
    {% else %}
      {% load_child_articles_for_section self as articles %}
    {% endif %}
    <!-- STOP: REVIEW IMPLEMEMTATION -->

    <div class="section-page__commenting">
      {% for article in featured_articles %}
        {% include "comments/comment_block.html" %}
      {% endfor %}
    </div>


    <!-- SERVICE FINDER UI -->
    {% for service_aggregator in service_aggregators %}
      {% if self.pk ==  service_aggregator.pk %}
        <div class="section-page section-service">
          <div class="heading heading--hero">
            <h1 class="heading__component heading__component--service-finder">{{service_aggregator.title}}</h1>
          </div>
          <div class="section-page__wrapper section-service__wrapper">
            {% load_child_articles_for_section service_aggregator count=8 as services %}
            <ul class="service-stacklist">
              {% for service in services %}
                <li class="service-stacklist__item">
                  {% if service.homepage_media %}
                    {% for block in service.homepage_media %}
                      {% with block.value as media %}
                        <div class="service-stacklist__iframe">
                          {% if block.value.youtube_link %}
                            {% embed media.youtube_link %}
                          {% endif %}
                        </div>
                      {% endwith %}
                    {% endfor %}
                  {% else %}
                    {% if service.get_effective_image %}
                      <div class="service-stacklist__images">
                        <a href="{% pageurl service.specific %}" class="service-stacklist__anchor">
                          {% image service.get_effective_image width-480 format-jpeg as teaser_thumbnail %}
                          <img alt="{{ service.title }}" src="{{ teaser_thumbnail.url }}" class="service-stacklist__thumbnail" />
                        </a>
                      </div>
                    {% endif %}
                  {% endif %}
                  <div class="service-stacklist__container">
                    <div class="service-stacklist__main">
                      <a href="{% pageurl service.specific %}">
                        <h2 class="service-stacklist__title-secondary">
                          {{ service.title|smarttruncatechars:50|safe}}
                        </h2>
                      </a>
                      {% if service.subtitle %}
                        <h6 class="service-stacklist__subtitle">
                          {{ service.subtitle|smarttruncatechars:85|safe}}
                        </h6>
                      {% endif %}

                      {% for block in service.body %}
                        {% if not block.block_type == 'media' %}
                          <p class="service-stacklist__excerpt">
                            {{block.value}}
                          </p>
                        {% endif %}
                      {% endfor %}

                    </div>
                    <div class="service-stacklist__cta-buttons">

                      <a href="{% pageurl service.specific %}" class="service-stacklist__link">
                        {{ service.title|smarttruncatechars:25|safe}}
                      </a>
                    </div>
                  </div>
                </li>
              {% endfor %}
            </ul>
            {% if services and articles_paginated.paginator.num_pages > 1 %}
              <div class="pagination">
                {% if articles_paginated.has_previous %}
                  <a id="prev" href="?p={{ articles_paginated.previous_page_number }}" class="call-to-action__button call-to-action__button--secondary"></a>
                {% endif %}
                <p class="call-to-action__item call-to-action__item--text">
                  {% trans "Pages" %} <span class="call-to-action__counter">{{ articles_paginated.number }}</span> {% trans "of" %} <span class="call-to-action__counter">{{articles_paginated.paginator.num_pages }}</span>
                </p>
                {% if articles_paginated.has_next %}
                  <a id="next" href="?p={{ articles_paginated.next_page_number }}" class="call-to-action__button call-to-action__button--secondary"></a>
                {% endif %}
              </div>
            {% endif %}
          </div>
        </div>
      {% endif %}
    {% endfor %}

  {% endif %}
{% endblock %}