{% load wagtailcore_tags core_tags wagtailimages_tags gem_tags static comments %}
{% if featured_articles %}
<div class="grid-teaser-wrapper">
  <div class="heading heading__component">
    <h2>{{section.title}}</h2>
  </div>
  <ul class="grid-teaser-list">
  {% for article in featured_articles %}
  {% get_translation article.get_parent_section as origin_section %}
    {% if origin_section == section %}
    <li class="grid-teaser-list__item">
      {% with layouttype="grid" %}
        {% if article.get_effective_image %}
        <a href="{% pageurl article.specific %}" class="{{layouttype}}-teaser__thumbnail-link">
          {% image article.get_effective_image fill-96x96 as teaser_thumbnail %}
          <img alt="{{ article.title }}" src="{{ teaser_thumbnail.url }}" class="{{layouttype}}-teaser__thumbnail" />
        </a>
        {% endif %}
        {% if article.title_highlight %}
          <h3 class="{{layouttype}}-teaser__title {{layouttype}}-teaser__title--highlight block-with-text">
              <a href="{% pageurl article.specific %}" class="{{layouttype}}-teaser__title-link">
                   {{ article.title_highlight|smarttruncatechars:45|safe}}
              </a>
          </h3>
        {% else %}
          <h3 class="{{layouttype}}-teaser__title block-with-text">
              <a href="{% pageurl article.specific %}" class="{{layouttype}}-teaser__title-link">
                  {{ article.title|smarttruncatechars:45|safe}}
              </a>
          </h3>
        {% endif %}
        {% if article.subtitle_highlight or article.body_highlight %}
          <p class="carousel-teaser__subtitle highlight-description">
            {% if article.subtitle_highlight %}
              {{article.subtitle_highlight|smarttruncatechars:28|safe}}
            {% elif article.body_highlight %}
              {{article.body_highlight|smarttruncatechars:28|safe}}
            {% endif %}
          </p>
        {% elif article.subtitle %}
          {% if article.title.30 %}
            <p class="{{layouttype}}-teaser__subtitle block-with-text">
                {{ article.subtitle|smarttruncatechars:28|safe}}
            </p>
          {% else %}
            <p class="{{layouttype}}-teaser__subtitle block-with-text">
                {{ article.subtitle|smarttruncatechars:50|safe}}
            </p>
          {% endif %}
        {% endif %}
      {% endwith %}
      {% with layouttype="base" %}
        {% get_comment_count for article as comment_count %}
        {% if article.is_commenting_enabled %}
          {% if comment_count > 0 %}
            <a href="{% pageurl article.specific %}?#comments" class="comment-counter{% if not article.allow_commenting %} comment-counter--disabled{% endif %}">
              <img alt="Comments" srcset="{% static 'img/icons/comment.svg' %}" src="{% static 'img/icons/check@2x.png' %}" class="comment-counter__icon">
              <span class="comment-counter__numeral">{{comment_count}}</span>
            </a>
          {% endif %}
        {% endif %}
      {% endwith %}
    </li>
    {% endif %}
  {% endfor %}
  </ul>
  <div class="call-to-action">
    <a href="{% pageurl section.specific %}" class="call-to-action__nav-item-text call-to-action__nav-item-text--right">
      {% trans "Read All" %} {{ section }}</a>
  </div>
</div>
{% endif %}