{% load wagtailcore_tags core_tags wagtailimages_tags wagtailsettings_tags gem_tags static comments %}
{% get_settings %}
{% if articles %}
<div class="article-teaser article-teaser--latest">
  <div class="heading heading--hero">
    <h1 class=" heading__component">
      {% trans "Latest articles" %}
    </h1>
  </div>
  <div class="article-teaser__wrapper">
    <ul class="teaser-grid teaser-grid--latest teaser-grid--primary">
      {% for article in articles|slice:":3" %}
        <li class="teaser-grid__item">
        {% if 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 %}
        {% 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}}</span>
                </li>
              {% endfor %}
            {% endif %}
          {% endif %}
        </ul>
        <h1 class="teaser-grid__title{% if article.title_highlight %} teaser-grid__title--highlight{% endif %}">
          {% if article.title_highlight %}
            {{ article.title_highlight|smarttruncatechars:45|safe}}
          {% else %}
            {{ article.title|smarttruncatechars:45|safe}}
          {% endif %}
        </h1>
        {% if article.subtitle_highlight or article.body_highlight %}
          <p class="teaser-grid__subtitle">
            {% if article.subtitle_highlight %}
              {{article.subtitle_highlight|smarttruncatechars:50|safe}}
            {% elif article.body_highlight %}
              {{article.body_highlight|smarttruncatechars:50|safe}}
            {% endif %}
          </p>
        {% elif article.subtitle %}
          <p class="teaser-grid__subtitle">
            {% if article.title.30 %}
              {{ article.subtitle|smarttruncatechars:50|safe}}
            {% else %}
              {{ article.subtitle|smarttruncatechars:50|safe}}
            {% endif %}
          </p>
        {% endif %}
        {% with article.body|first as block %}
          {% if block.block_type == 'paragraph' %}
            <p class="teaser-grid__paragraph">
              {{block.value|smarttruncatechars:800|safe}}
            </p>
          {% endif %}
        {% endwith %}
        <a class="call-to-action__button call-to-action__button--primary" href="{% pageurl article.specific %}">
          {% trans "Read article" %}
        </a>
        </li>
      {% endfor %}
    </ul>
    {% comment %}
    <ul class="teaser-grid teaser-grid--latest">
      {% for article in articles|slice:"3:" %}
        <li class="teaser-grid__item">
          {% if 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 %}
          {% get_comment_count for article as comment_count %}
          {% load_tags_for_article article as tags %}
            <ul class="teaser-tags">
            {% get_comment_count for article as comment_count %}
            {% 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}}</span>
                    </li>
                  {% endfor %}
                {% endif %}
              {% endif %}
            </ul>
            <h1 class="teaser-grid__title{% if article.title_highlight %} teaser-grid__title--highlight{% endif %}">
              {% if article.title_highlight %}
                {{ article.title_highlight|smarttruncatechars:50|safe}}
              {% else %}
                {{ article.title|smarttruncatechars:50|safe}}
              {% endif %}
            </h1>
            {% if article.subtitle_highlight or article.body_highlight %}
              <p class="teaser-grid__subtitle">
              {% if article.subtitle_highlight %}
                {{article.subtitle_highlight|smarttruncatechars:50|safe}}
              {% elif article.body_highlight %}
                {{article.body_highlight|smarttruncatechars:50|safe}}
              {% endif %}
              </p>
            {% elif article.subtitle %}
              <p class="teaser-grid__subtitle">
              {% if article.title.30 %}
                {{ article.subtitle|smarttruncatechars:50|safe}}
              {% else %}
              {{ article.subtitle|smarttruncatechars:50|safe}}
              {% endif %}
            </p>
            {% endif %}
          <a class="call-to-action__button call-to-action__button--primary" href="{% pageurl article.specific %}">
          {% trans "Read article" %}</a>
        </li>
      {% endfor %}
    </ul>
    {% endcomment %}
  </div>
</div>
{% endif %}