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

{% if articles %}
<div class="article-teaser article-teaser--watch">
  <div class="heading heading--video">
    <h1 class=" heading__component">
      {% trans "Introducing the new Yegna" %}
    </h1>
  </div>
  <div class="article-teaser__wrapper">
    <ul class="teaser-stacklist teaser-stacklist--watch">
      {% for article in articles|slice:":1" %}
          <li class="teaser-stacklist__item">
          {% if article.homepage_media %}
            {% for block in article.homepage_media %}
              {% with block.value as media %}
                <div class="teaser-stacklist__images">
                  {% if block.value.youtube_link %}
                    {% embed media.youtube_link %}
                  {% elif block.value.type == 'video' %}
                    <div class="media-player__embed">
                      <video poster="{% if media.thumbnail %}{{ media.thumbnail.url }}{% endif %}" controls>
                        <source src={{media.file.url}} type="video/mp4">
                        <source src={{media.file.url}} type="video/webm">
                        <source src={{media.file.url}} type="video/ogg">
                        <span class="media-player__caption">
                          {% trans "Your browser does not support the video tag." %}
                        </span>
                      </video>
                    </div>
                  {% endif %}
                </div>
              {% endwith %}
            {% endfor %}
          {% else %}
            {% 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 %}
          {% endif %}
            <div class="teaser-stacklist__container{% if article.get_parent_section.get_effective_extra_style_hints %} teaser-stacklist__container--{{article.get_parent_section.get_effective_extra_style_hints}}{% 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 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.homepage_media %}
                {% for block in article.homepage_media %}
                  {% with block.value as media %}
                    {% if media.duration %}
                      <p class="teaser-stacklist__duration">({{media.duration}})</p>
                    {% endif %}
                  {% endwith %}
                {% endfor %}
              {% endif %}
              {% 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">
                  {{ article.subtitle|smarttruncatechars:150|safe}}
                </p>
              {% endif %}
              {% if article.homepage_media %}
                {% for block in article.homepage_media %}
                  {% with block.value as media %}
                    <div class="call-to-action call-to-action--media-download">
                      <a href="{{media.file.url}}" onclick="ga('send', 'event', 'Video', '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>
                  {% endwith %}
                {% endfor %}
              {% endif %}
            </div>
          </li>
      {% endfor %}
    </ul>
  </div>
</div>
{% endif %}