{% extends "base.html" %}
{% load el_pagination_tags wagtailcore_tags core_tags wagtailimages_tags gem_tags static comments %}
{% wagtail_site as current_site %}
{% block content %}
{% get_translation tag as translated_tag %}
<div class="call-to-action call-to-action--wide-back">
  <a href="{{current_site.root_page.specific.url}}" class="call-to-action__nav-item-text call-to-action__nav-item-text--left">
    {% trans "Back home" %}
  </a>
  </div>
  <div class="heading heading__component hash-tag">
  <h1>{{translated_tag.title}}</h1>
  </div>

  {% paginate 10 object_list as articles %}
  <div class="article-teaser">
  {% if articles %}
  <ul class="teaser-stacklist">
    {% for article in articles %}
    <li class="teaser-stacklist__item">
        {% if article.get_effective_image %}
        <a href="{% pageurl article.specific %}" class="base-teaser__thumbnail-link">
          {% image article.get_effective_image fill-96x96 as teaser_thumbnail %}
          <img alt="{{ article.title }}" src="{{ teaser_thumbnail.url }}" class="base-teaser__thumbnail" />
        </a>
        {% endif %}
      <div class="teaser-stacklist__item--content">
          {% if article.title_highlight %}
            <h3 class="base-teaser__title base-teaser__title--highlight block-with-text">
                <a href="{% pageurl article.specific %}" class="base-teaser__title-link">
                     {{ article.title_highlight|smarttruncatechars:45|safe}}
                </a>
            </h3>
          {% else %}
            <h3 class="base-teaser__title block-with-text">
                <a href="{% pageurl article.specific %}" class="base-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:28|safe}}
              {% elif article.body_highlight %}
                {{article.body_highlight|smarttruncatechars:28|safe}}
              {% endif %}
            </p>
          {% elif article.subtitle %}
            <p class="base-teaser__subtitle block-with-text">
              {% if article.title.30 %}
                {{ article.subtitle|smarttruncatechars:28|safe}}
              {% else %}
                {{ article.subtitle|smarttruncatechars:50|safe}}
              {% endif %}
            </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 %}
        {% 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 %}
      </div>
    </li>
    {% endfor %}
  </ul>
  {% endif %}
  </div>
  {% get_pages %}
  {% if pages.next %}
    <a id="more-link" data-next="{% url 'tag_index' %}?page={{pages.next.number}}&tag_name={{tag.slug}}&locale={{locale_code}}" class="more-link call-to-action__button call-to-action__button--primary">
      <span class="call-to-action__button-text call-to-action__button-text--primary">
        {% trans "Load more" %}
      </span>
    </a>
  {% endif %}

  {% get_next_tag tag as next_tag %}
  {% get_articles_for_tag next_tag as articles %}
  {% if next_tag %}
  <div class="carousel-teaser">
    {% if articles %}
      <div class="heading heading__component">
        <h2>{{next_tag.title}}</h2>
      </div>
      <ul class="carousel-teaser-list">
       {% for article in 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 %}

               {% 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 %}
             </div>
           </div>
         </div>
       </li>
       {% endfor %}
     </ul>
      <div class="call-to-action">
        <a href="{% url 'tags_list' next_tag.slug %}" class="call-to-action__nav-item-text call-to-action__nav-item-text--right">
          {% trans "Read All" %} {{next_tag}}</a>
        </div>
    {% endif %}
  </div>
  {% endif %}
{% endblock %}