{% load wagtailcore_tags core_tags wagtailimages_tags gem_tags static comments %}
{% block load_tags_for_homepage %}
{% if tag %}
  <div class="carousel-teaser">
  {% if tag_articles %}
  <div class="heading heading__component">
    <h2>{{tag.title}}</h2>
  </div>
  <ul class="carousel-teaser-list">
    {% for article in tag_articles %}
    <li class="carousel-teaser-list__item">
      <div class="carousel-teaser-list__item--container">
        {% if article.get_effective_image %}
        <a href="{% pageurl article.specific %}" class="carousel-teaser__thumbnail-link">
          {% image article.get_effective_image fill-218x96 as carousel_teaser_thumbnail %}
          <img alt="{{ article.title }}" src="{{ carousel_teaser_thumbnail.url }}" class="carousel-teaser__thumbnail" />
        </a>
        {% endif %}
        <div class="carousel-teaser__wrapper">
          <div class="carousel-teaser__content">
            {% if page.title_highlight %}
              <h3 class="carousel-teaser__title carousel-teaser__title--highlight">
                <a href="{% pageurl article.specific %}" class="carousel-teaser__title-link">
                    {{ article.title_highlight|smarttruncatechars:45|safe}}
                </a>
              </h3>
            {% else %}
              <h3 class="carousel-teaser__title">
                <a href="{% pageurl article.specific %}" class="carousel-teaser__title-link">
                    {{ article.title|smarttruncatechars:45|safe }}
                </a>
              </h3>
            {% endif %}
            {% if article.subtitle_highlight or article.body_highlight %}
              <p class="carousel-teaser__subtitle highlight-description">
                {% if article.subtitle_highlight %}
                  {{article.subtitle_highlight|smarttruncatechars:45|safe}}
                {% elif article.body_highlight %}
                  {{article.body_highlight|smarttruncatechars:45|safe}}
                {% endif %}
              </p>
            {% elif article.subtitle %}
              <p class="carousel-teaser__subtitle">
                  {{ article.subtitle|smarttruncatechars:45|safe}}
              </p>
            {% endif %}
            {% load_tags_for_article article as tags %}
            {% if tags %}
              {% if settings.core.SiteSettings.enable_tag_navigation %}
                <div class="teaser-stacklist-tags-container">
                  <ul class="teaser-stacklist-tags">
                    {% for tag in tags %}
                    {% if not tag.title.20 %}
                      <li class="teaser-stacklist-tags__item">
                        <a href="{% url 'tags_list' tag.slug %}" class="teaser-stacklist-tags__anchor">{{ tag.title }}</a>
                      </li>
                      {% endif %}
                    {% endfor %}
                  </ul>
                </div>
              {% endif %}
            {% endif %}
            {% with layouttype="base" %}
              {% get_comment_count for article as comment_count %}
              {% if article.is_commenting_enabled %}
                {% if comment_count > 0 %}
                  <a href="{% pageurl article.specific %}?#comments" class="comment-counter{% if not article.allow_commenting %} comment-counter--disabled{% endif %}">
                    <img alt="Comments" srcset="{% static 'img/icons/comment.svg' %}" src="{% static 'img/icons/check@2x.png' %}" class="comment-counter__icon">
                    <span class="comment-counter__numeral">{{comment_count}}</span>
                  </a>
                {% endif %}
              {% endif %}
            {% endwith %}
          </div>
        </div>
      </div>
    </li>
    {% endfor %}
  </ul>
  <div class="call-to-action">
    <a href="{% url 'tags_list' tag.slug %}" class="call-to-action__nav-item-text call-to-action__nav-item-text--right">
      {% trans "Read All" %} {{tag}}</a>
  </div>
  {% endif %}
  </div>
{% endif %}
{% endblock %}