{% load wagtailcore_tags core_tags wagtailimages_tags wagtailsettings_tags gem_tags static comments %}
{% get_settings %}
{% if articles %}
  <div class="article-teaser article-teaser--hero">
    <div class="heading heading--hero">
      <h1 class=" heading__component">
        {% trans "Announcements" %}
      </h1>
    </div>
    <div class="article-teaser__wrapper">
      <ul class="teaser-grid teaser-grid--hero">
        {% for article in articles|slice:":1" %}
          <li class="teaser-grid__item">
              {% if article.get_effective_image %}
                <div class="teaser-grid__images">
                  <a href="{% pageurl article.specific %}" class="teaser-grid__anchor">
                    {% image article.get_effective_image width-480 format-jpeg as teaser_thumbnail %}
                    <img alt="{{ article.title }}" src="{{ teaser_thumbnail.url }}" class="teaser-grid__thumbnail" />
                  </a>
                </div>
              {% endif %}
              {% get_comment_count for article as comment_count %}
              {% load_tags_for_article article as tags %}
              <ul class="teaser-tags">
              {% if comment_count > 0 %}
                <li class="teaser-tags__item">
                  <a href="{% pageurl article.specific %}?#comments" class="comments-counter">
                    <span class="comments-counter__numeral">{{comment_count}}</span>
                  </a>
                </li>
              {% endif %}
              {% if 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__anchor">{{ 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 %}
              {% endif %}
              </ul>
              <h1 class="teaser-grid__title{% if article.title_highlight %} teaser-grid__title--highlight{% endif %}">
                {% if article.title_highlight %}
                  {{ article.title_highlight|smarttruncatechars:50|safe}}
                {% else %}
                  {{ article.title|smarttruncatechars:50|safe}}
                {% endif %}
              </h1>
              {% if article.subtitle_highlight or article.body_highlight %}
                <p class="teaser-grid__subtitle">
                  {% if article.subtitle_highlight %}
                    {{article.subtitle_highlight|smarttruncatechars:50|safe}}
                  {% elif article.body_highlight %}
                    {{article.body_highlight|smarttruncatechars:50|safe}}
                  {% endif %}
                </p>
              {% elif article.subtitle %}
                <p class="teaser-grid__subtitle">
                  {{ article.subtitle|smarttruncatechars:50|safe}}
                </p>
              {% endif %}
              {% with article.body|first as block %}
                {% if block.block_type == 'paragraph' %}
                  <p class="teaser-grid__paragraph">
                    {{block.value|smarttruncatechars:550|safe}}
                  </p>
                {% endif %}
              {% endwith %}
              <a class="call-to-action__button call-to-action__button--secondary" href="{% pageurl article.specific %}">
                {% trans "Read article" %}
              </a>
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
{% endif %}