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

<div class="article-preview">
  {% if article.image %}
  <a href="{% pageurl article.specific %}" class="image">
    {% if square_image %}
      {% image article.image fill-200x200 %}
    {% else %}
      {% image article.image fill-400x300 %}
    {% endif %}

    {% if show_section_image and section.image %}
      {% image section.image width-40 as section_image %}
      <img  src="{{ section_image.url }}" class="section-image icon-{{ section_image.get_effective_extra_style_hints }}" />
    {% endif %}
  </a>
  {% endif %}

  <div class="text">
    <div class="section-title">
      {% get_translation article.get_parent_section as section %}
      <a href="{% pageurl section.specific %}">{{ section }}</a>
    </div>

    {% if article %}
          {% image article.get_parent_section.image width-200 as tmp_photo_small %}
          {% image article.get_parent_section.image width-400 as tmp_photo_large %}
    {% endif %}

    <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>