{% load wagtailcore_tags core_tags wagtailimages_tags gem_tags static comments %}
<div class="article-teaser">
{% if articles %}
  <ul class="teaser-stacklist">
    {% for article in articles %}
    <li class="teaser-stacklist__item">
      {% with layouttype="base" %}
        {% 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 %}
      {% endwith %}
      <div class="teaser-stacklist__item--content">
        {% with layouttype="base" %}
          {% 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 %}
        {% load_tags_for_article article as tags %}
        {% if tags %}
          {% if settings.core.SiteSettings.enable_tag_navigation %}
            <div class="teaser-stacklist-tags-container">
              <ul class="teaser-stacklist-tags">
                {% for tag in tags %}
                {% if not tag.title.20 %}
                  <li class="teaser-stacklist-tags__item">
                    <a href="{% url 'tags_list' tag.slug %}" class="teaser-stacklist-tags__anchor">{{ tag.title }}</a>
                  </li>
                  {% endif %}
                {% endfor %}
              </ul>
            </div>
          {% endif %}
        {% endif %}

        {% 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 %}

      </div>
    </li>
    {% endfor %}
  </ul>
{% endif %}
</div>