{% load wagtailcore_tags wagtailimages_tags wagtailembeds_tags core_tags gem_tags %}
  <div class="teaser-{{teaser_type}}__container">
    {% 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 %}
    <div class="teaser-breadcrumb">
      {% with parent=self.get_parent %}
        <ul class="teaser-breadcrumb-list">
          {% if parent.exact_type == "SectionPage"  %}
            <li class="teaser-breadcrumb-list__item">
              <span class="teaser-breadcrumb-list__anchor">{{parent}}</span>
            </li>
          {% endif %}
          <li class="teaser-breadcrumb-list__item">
            <a href="{% pageurl self.specific %}"  class="teaser-breadcrumb-list__anchor">{{self}}</a>
          </li>
        </ul>
      {% endwith %}
    </div>

    <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.homepage_media %}
      {% for block in article.homepage_media %}
        {% with block.value as media %}
          {% if media.duration %}
            <p class="teaser-{{teaser_type}}__duration">({{media.duration}})</p>
          {% endif %}
        {% endwith %}
      {% endfor %}
    {% endif %}
    {% 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 %}
    <div class="call-to-action call-to-action--video-media">
      <a href="{% pageurl article.specific%}" class="call-to-action__button call-to-action__button--primary">
        {% trans "Watch video" %}
      </a>
    </div>
  </div>