{% 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 %}
  {% with parent_section=self.get_parent_section %}
    {% if sections  %}
      {# <!-- GENERAL ARTICLE UI --> #}
      {% for section in sections %}
        {% if parent_section.pk ==  section.pk %}
          <div class="article-page">
            <div class="article-page__wrapper">
              <div class="content--left">
                <div class="article-teaser">
                  <div class="article-teaser__wrapper">
                    <ul class="teaser-stacklist">
                      <li class="teaser-stacklist__item">
                      {# <!-- ARTICLE BODY IMAGE | LEGACY IMPLEMETATION --> #}
                        {% for block in self.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 self.get_effective_image %}
                            <div class="teaser-stacklist__images">
                              <a href="{% pageurl self.specific %}" class="teaser-stacklist__anchor">
                                    {% image self.get_effective_image width-1080 format-jpeg as teaser_thumbnail %}
                                    <img alt="{{ self.title }}" src="{{ teaser_thumbnail.url }}" class="teaser-stacklist__thumbnail"/>
                                  </a>
                              </div>
                            {% endif %}
                          {% endif %}
                        {% endfor %}

                        <div class="teaser-stacklist__container">
                          <h1 class="teaser-stacklist__title">{{ self.title}}</h1>
                          <div class="teaser-stacklist__cta-buttons">
                            {% has_forms page=self as has_polls %}
                            {% if has_polls %}
                              <div class="vote__item">
                                <a href="#survey-form" class="vote__icon">{% trans "Poll" %}</a>
                              </div>
                            {% endif %}

                            {% comment %}
                            <!-- DISPLAY REACTION QUESTIONS RADIO FIELDS -->
                            {% endcomment %}
                            {% forms_list_linked_to_pages self %}

                            {% 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=self %}
                                </div>
                              </div>
                            {% endif %}

                            {% if self.is_commenting_enabled %}
                              {% if self.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>
                          {% if self.subtitle %}
                            <h4 class="teaser-stacklist__subtitle">{{ self.subtitle}}</h4>
                          {% endif %}
                          {% for block in self.body %}
                            {% if not block.block_type == 'media' %}
                              <div class="teaser-stacklist__excerpt">
                                <p>{{block.value}}</p>
                              </div>
                            {% endif %}
                          {% endfor %}
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>

                {% comment %}<!-- POLL FORM -->{% endcomment %}
                {% if has_polls %}
                  {% forms_list_for_pages page=self %}
                {% endif %}

                {% include "comments/comment_block.html" with article=self %}
              </div>

              {% get_translation self.get_parent_section as section %}
              {% content_is section "Videos" as is_video_section %}
              {% if not is_video_section %}
                {% load_child_articles_for_section section.get_first_sibling.specific False as articles %}
              {% else %}
                {% load_child_articles_for_section section as articles %}
              {% endif %}

              <div class="content--right">
                {# <!-- Beginning of Side Bar -->  #}
                {% if articles %}
                  <div class="article-teaser">
                  <div class="heading heading--hero">
                    <h1 class="heading__component">{% trans "Arress dekho" %}</h1>
                  </div>
                  <div class="article-teaser__wrapper">
                    <ul class="teaser-grid">
                      {% for article in articles %}
                        <li class="teaser-grid__item">
                          {# <!-- ARTICLE BODY IMAGE | LEGACY IMPLEMETATION --> #}
                          {% 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-1080 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>
                  </div>
                {% endif %}
              </div>
            </div>
          </div>
        {% endif %}
      {% endfor %}

      {% include "core/article_page-service-finder.html" %}

    {% endif %}
  {% endwith %}
{% endblock %}