{% load wagtailsettings_tags wagtailcore_tags wagtailimages_tags core_tags %}
{% get_settings %}
<div class="article-preview">
  <a href="{% pageurl article.specific %}" class="image">
    {% if article.image %}
      {% if square_image %}
        {% image article.image fill-200x200 class="article-thumbnail" %}
      {% else %}
        {% image article.image fill-400x300 class="article-thumbnail" %}
      {% endif %}
      {% if show_section_image %}
        {% if article.get_parent_section.image %}
          {% image article.get_parent_section.image width-200 as tmp_photo_small %}
          {% image article.get_parent_section.image width-400 as tmp_photo_large %}
          <img src="{{ tmp_photo_small.url }}" srcset="{{ tmp_photo_large.url }}" class="section-image icon-{{ section_image.get_effective_extra_style_hints }} {% if not article.image %} section-icon--noimage{% endif %}" />
        {% endif %}
      {% endif %}
    {% endif %}
  </a>
  <div class="text">
    <div class="section-title{% if not article.image %} section-title--noimage{% endif %}">
      {% get_translation article.get_parent_section as section %}
      <a href="{% pageurl section.specific %}">{{ section }}</a>
    </div>
    <h3><a href="{% pageurl article.specific %}">{{ article.title }}</a></h3>
    <p>{{ article.subtitle }}</p>
    {% load_tags_for_article article as tags %}
    {% if settings.core.SiteSettings.enable_tag_navigation %}
      <div class="tags">
        <ul class="tags-list">
          {% for tag in tags %}
          {% if not tag.title.20 %}
            <li class="tag-list__item">
              <a href="{% url 'tags_list' tag.slug %}" class="tag__item-anchor">
                {{ tag.title }}
              </a>
            </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
    {% endif %}
    <a class="read-more" href="{% pageurl article.specific %}">{% trans "Read more" %}</a>
  </div>
</div>