{% load wagtailcore_tags core_tags wagtailimages_tags wagtailembeds_tags wagtailsettings_tags gem_tags %}
{% get_settings %}

{% if articles %}
<div class="article-teaser article-teaser--listen">
  <div class="heading heading--listen">
    <h1 class=" heading__component">
      {% trans "Listen to the latest episode" %}
    </h1>
  </div>
  <div class="article-teaser__wrapper">
    <ul class="teaser-stacklist teaser-stacklist--listen">
      {% for article in articles|slice:":1" %}
          <li class="teaser-stacklist__item">
            <div class="teaser-stacklist__item--inner">
              {% if article.get_effective_image %}
                <div class="teaser-stacklist__images">
                  <a href="{% pageurl article.specific %}" class="teaser-stacklist__anchor">
                    {% image article.get_effective_image width-1080 format-jpeg as teaser_thumbnail %}
                    <img alt="{{ article.title }}" src="{{ teaser_thumbnail.url }}" class="teaser-stacklist__thumbnail" />
                  </a>
                </div>
              {% endif %}
              <div class="teaser-stacklist__container">
                  <div class="section__caption">
                    {% get_translation article.get_parent_section as section %}
                    <h3 class="section__title">{{section}}</h3>
                  </div>
                  <a href="{% pageurl article.specific %}" class="teaser-stacklist__anchor">
                    <h1 class="teaser-stacklist__title{% if article.title_highlight %} teaser-stacklist__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-stacklist__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-stacklist__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-stacklist__elem-audio{% if article.get_parent_section.get_effective_extra_style_hints %} teaser-stacklist__elem-audio--{{article.get_parent_section.get_effective_extra_style_hints}}{% endif %}">
                  {% if block.value.youtube_link %}
                    {% embed media.youtube_link %}
                  {% elif block.value.type == 'audio' %}
                  <div class="media-player__embed">
                    <audio id="{{media|slugify}}" 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 %}
          </li>
          <div class="call-to-action">
            <a class="call-to-action__item call-to-action__item--paginate" href="{% pageurl article.get_parent_section.specific %}">
              {% trans "More episodes" %}
            </a>
          </div>
      {% endfor %}
    </ul>
  </div>
</div>
{% endif %}