{% load wagtailcore_tags wagtailimages_tags wagtailembeds_tags core_tags gem_tags %}

<li class="teaser-{{teaser_type}}__item">
  <div class="teaser-{{teaser_type}}__item--inner">
    {% if article.get_effective_image %}
      <div class="teaser-{{teaser_type}}__images">
        <a href="{% pageurl article.specific %}" class="teaser-{{teaser_type}}__anchor">
          {% image article.get_effective_image width-1080 format-jpeg as teaser_thumbnail %}
          <img loading="eager" alt="{{ article.title }}" src="{{ teaser_thumbnail.url }}" class="teaser-{{teaser_type}}__thumbnail" />
        </a>
      </div>
    {% endif %}

    <div class="teaser-{{teaser_type}}__container">
      <a href="{% pageurl article.specific %}" class="teaser-{{teaser_type}}__anchor">
        <h1 class="teaser-{{teaser_type}}__title{% if article.title_highlight %} teaser-{{teaser_type}}__title--highlight{% endif %}">
          {% if article.title_highlight %}
            {{ article.title_highlight|smarttruncatechars:100|safe}}
          {% else %}
            {{ article.title|smarttruncatechars:100|safe}}
          {% endif %}
        </h1>
      </a>
      {% if article.subtitle_highlight or article.body_highlight %}
        <p class="teaser-{{teaser_type}}__subtitle">
          {% if article.subtitle_highlight %}
            {{article.subtitle_highlight|smarttruncatechars:150|safe}}
          {% elif article.body_highlight %}
            {{article.body_highlight|smarttruncatechars:150|safe}}
          {% endif %}
        </p>
      {% elif article.subtitle %}
        <p class="teaser-{{teaser_type}}__subtitle">
          {{ article.subtitle|smarttruncatechars:150|safe}}
        </p>
      {% endif %}
      {% load_tags_for_article article as tags %}
      {% if tags %}
      <ul class="teaser-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">{{ 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 %}
      </ul>
      {% endif %}
      <a class="call-to-action__item call-to-action__item--paginate" href="{% pageurl article %}">
        {% trans "Read more" %}
      </a>
    </div>
  </div>
</li>