{% load wagtailcore_tags wagtailimages_tags wagtailembeds_tags core_tags gem_tags %}
    <div class="teaser-{{teaser_type}}__container">
      <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.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">
          {% if article.title.30 %}
            {{ article.subtitle|smarttruncatechars:150|safe}}
          {% else %}
            {{ article.subtitle|smarttruncatechars:150|safe}}
          {% endif %}
        </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 %}
    </div>
  </div>
  {% for block in article.homepage_media %}
    {% with block.value as media %}
      <div class="teaser-{{teaser_type}}__elem-audio">
        {% if block.value.youtube_link %}
          {% embed media.youtube_link %}
        {% elif block.value.type == 'audio' %}
          <div class="media-player__embed">
            <audio controls>
             <source src={{media.file.url}} type="audio/mpeg">
             <source src={{media.file.url}} type="audio/ogg">
             <source src={{media.file.url}} type="audio/wav">
               <span class="media-player__caption">
                 {% trans "Your browser does not support the audio tag." %}
               </span>
             </audio>
           </div>
        {% endif %}
          <div class="call-to-action call-to-action--media-download">
            <a href="{{media.file.url}}" onclick="ga('send', 'event', 'Audio', 'Download', '{{media.title}}');" class="call-to-action__button call-to-action__button--primary" download>
              {% trans "Download" %} {% if media.file.size %}<span class="call-to-action__item--text">({{media.file.size|filesizeformat}})</span>{% endif %}
            </a>
            <div class="social-media">
              {% social_media_article page=article %}
            </div>
          </div>
      </div>
    {% endwith %}
  {% endfor %}