{% load wagtailcore_tags wagtailimages_tags %}
<article class="card card--hoveractive article-card article-card-pirati-stan {{ article.card_css_class }}">
  <div class="article-card-cover">
    <a href="{{ article.get_url }}">
      {% image article.image width-400 as img %}
      <img src="{{ img.url }}" alt="{{ article.title }}">
    </a>
    <div class="article-card-cover__details">
      <div class="article-card-sharing">
        <div class="social-icon-group {{ article.card_css_class }}">
          {% include "elections2021/_share_icon_facebook.html" with content_url=article.full_url %}
          {% include "elections2021/_share_icon_twitter.html" with content_url=article.full_url title=article.title %}
        </div>
      </div>
      <div class="article-card-meta">
        <span class="article-card-meta__item">{{ article.date|date:"SHORT_DATE_FORMAT" }}</span>
        {% if article.author %}
          <span class="article-card-meta__item">{{ article.author }}</span>
        {% endif %}
      </div>
    </div>
  </div>
  <div class="card__body article-card__body">
    <a href="{{ article.get_url }}">
      <h1 class="card-headline mb-4">{{ article.title }}</h1>
    </a>
    <p class="card-body-text flex-grow">{{ article.perex }}</p>
    {% if article.has_tags %}
      <div class="inline-block-nogap mt-4">
        {% for tag in article.tags.all %}
          {% comment %}
          <a href="{{ page.root_page.articles_page_url }}?tag={{ tag }}" class="btn article-card__category-button btn--grey-125 btn--condensed text-sm font-light">
            <div class="btn__body ">{{ tag }}</div>
          </a>
          {% endcomment %}
          <div class="btn article-card__category-button btn--grey-125 btn--condensed text-sm font-light">
            <div class="btn__body">{{ tag }}</div>
          </div>
        {% endfor %}
      </div>
    {% endif %}
  </div>
</article>