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

{% block content %}
<div class="section-page {% if self.get_effective_extra_style_hints %}section-page--{{self.get_effective_extra_style_hints}}{% endif %}">
  {% load_child_sections_for_section self as sections %}
  <div class="section__theme"></div>
  <div class="section-page__wrapper">
    <div class="heading heading--primary {% if section.get_effective_extra_style_hints %}section--{{section.get_effective_extra_style_hints}}{% endif %}">
      <div class="section__caption">
        <h1 class="section__title">{{self.title}}</h1>
      </div>
    </div>
    {% load_child_articles_for_section self as articles %}
    <ul class="teaser-stacklist">
    {% for article in articles %}
      <li class="teaser-stacklist__item">
        {% if article.image %}
          <div class="article-teaser__images">
            <a href="{% pageurl article.specific %}" class="article-teaser__anchor">
              {% image article.image width-480 format-jpeg as teaser_thumbnail %}
              <img alt="{{ article.title }}" src="{{ teaser_thumbnail.url }}" class="article-teaser__thumbnail"/>
            </a>
          </div>
        {% endif %}
        <div class="article-teaser__container">
          {% get_comment_count for article as comment_count %}
          {% load_tags_for_article article as tags %}
          <ul class="teaser-tags">
            {% if comment_count > 0 %}
            <li class="teaser-tags__item">
              <a href="{% pageurl article.specific %}?#comments" class="comments-counter">
                <span class="comments-counter__numeral">{{comment_count}}</span>
              </a>
            </li>
            {% endif %}
            {% if tags %}
              {% if settings.core.SiteSettings.enable_tag_navigation %}
                {% for tag in tags %}
                  {% if not tag.title.20 %}
                    <li class="teaser-tags__item">
                      <a href="{% url 'tags_list' tag.slug %}" class="teaser-tags__anchor">
                        <span class="teaser-tags__title__anchor">{{ tag.title }}</span>
                      </a>
                    </li>
                  {% endif %}
                {% endfor %}
              {% elif settings.core.SiteSettings.enable_clickable_tags %}
                {% for tag in article.tags_list %}
                  <li class="teaser-tags__item">
                    <span class="teaser-tags__title">tag{{tag}}</span>
                  </li>
                {% endfor %}
              {% endif %}
            {% endif %}
          </ul>
          <h3 class="article-teaser__title {% if article.title_highlight %}article-teaser__title--highlight{% endif %}">
            <a href="{% pageurl article.specific %}" class="article-teaser__heading">
            {% if article.title_highlight %}
              {{ article.title_highlight|smarttruncatechars:50|safe}}
            {% else %}
              {{ article.title|safe}}
            {% endif %}
          </a>
          </h3>
          {% if article.subtitle_highlight or article.body_highlight %}
            <h6 class="article-teaser__subtitle">
              {% if article.subtitle_highlight %}
                {{article.subtitle_highlight|smarttruncatechars:50|safe}}
              {% elif article.body_highlight %}
                {{article.body_highlight|smarttruncatechars:50|safe}}
              {% endif %}
            </h6>
          {% elif article.subtitle %}
            <h6 class="article-teaser__subtitle">
              {{ article.subtitle|smarttruncatechars:50|safe}}
            </h6>
          {% endif %}
          {% with article.body|first as block %}
            {% if block.block_type == 'paragraph' %}
              <p>{{block.value|smarttruncatechars:150|safe}}</p>
            {% endif %}
          {% endwith %}
          <a class="call-to-action__button call-to-action__button--primary" href="{% pageurl article.specific %}">
            {% trans "Read article" %}
          </a>
        </div>
    </li>
    {% endfor %}
    </ul>
    {% if articles and articles_paginated.paginator.num_pages > 1 %}
      <div class="pagination">
      {% if articles_paginated.has_previous %}
        <a href="?p={{ articles_paginated.previous_page_number }}" class="call-to-action__button call-to-action__button--previous">
          {% trans "Previous" %}</a>
      {% endif %}
        <p class="call-to-action__item--text call-to-action__item--text-current">
          {% trans "Page" %} {{ articles_paginated.number }} {% trans "of" %} {{articles_paginated.paginator.num_pages }}
        </p>
      {% if articles_paginated.has_next %}
        <a href="?p={{ articles_paginated.next_page_number }}" class="call-to-action__button call-to-action__button--next">
          {% trans "Newer" %}</a>
      {% endif %}
      </div>
    {% endif %}
  </div>
</div>
{% bannerpages position=4 %}
<div class="section-nav">
  <div class="heading heading--hero">
    <h2 class=" heading__component">
      {% trans "Article categories" %}
    </h2>
  </div>
{% load_sections as sections %}
  <ul class="section-nav-list">
    {% for section in sections %}
      {% pageurl section.specific as section_path %}
      {% pageurl self.specific as self_path %}
        {% if section_path != self_path and section_path != '/sections/events/' and section_path != '/sections/sakwe/' and section_path != '/sections/radio-show/' and section_path != '/sections/myth/' %}
          <li class="section-nav-list__item">
            <a href="{% pageurl section.specific %}" class="section-nav__anchor  {% if section.get_effective_extra_style_hints %}section-nav__anchor--{{section.get_effective_extra_style_hints}}{% endif %}"
              {% if self.get_effective_image %}
              {% image section.get_effective_image width-480 as section_photo %}
                style="background-image: url({{ section_photo.url }});"
              {% endif %}>
              <h2 class="section-nav__label">
                {{section.title}}
              </h2>
            </a>
            <p class="section-nav__desc">{{section.description}}</p>
          </li>
        {% endif %}
    {% endfor %}
  </ul>
</div>
{% bannerpages position=5 %}
{% forms_list_for_pages page=self %}

{% endblock %}