{% load wagtailcore_tags wagtailimages_tags wagtailroutablepage_tags %}
{% routablepageurl page.root_page.articles_page "tags" as articles_tag_page_url %}

<article
  itemtype="http://schema.org/BlogPosting"
  class="card card--hoveractive article-card{% if article.is_black %} bg-black{% endif %}"
  itemscope=""
>

  <link itemprop="mainEntityOfPage" href="{{ article.get_url }}">

  <div class="article-card-cover">
    <a href="{{ article.get_url }}" {{ article.get_rel }} itemprop="image" itemtype="http://schema.org/ImageObject" itemscope="">
      {% if article.thumb_image %}
        {% image article.thumb_image fill-356x192 as img %}
        {% image article.thumb_image fill-714x384 as img_2x %}
      {% else %}
        {% image article.image fill-356x192 as img %}
        {% image article.image fill-714x384 as img_2x %}
      {% endif %}
      <img
        src="{{ img.url }}"
        srcset="{{ img.url }}, {{ img_2x.url }} 2x"
        alt="{{ article.title }}"
      >
      <meta itemprop="url" content="{{ img.url }}">
    </a>

    <div class="article-card-cover__details">
      <div class="article-card-sharing">
        <div class="social-icon-group">
          <a
            href="https://www.facebook.com/sharer/sharer.php?u={{ article.get_url|urlencode }}"
            onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
            class="social-icon social-icon--fill bg-brands-facebook text-white text-sm social-icon--4"
          ><i class="ico--facebook"></i></a>
          <a
            href="https://twitter.com/intent/tweet?text={{ article.title|urlencode }}&url={{ article.get_url|urlencode }}"
            onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
            class="social-icon social-icon--fill bg-brands-twitter text-white text-sm social-icon--4"
          ><i class="ico--twitter"></i></a>
          <a
            href="https://www.linkedin.com/sharing/share-offsite/?url={{ article.get_full_url|urlencode }}"
            onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
            class="social-icon social-icon--fill bg-brands-linkedin text-white text-sm social-icon--4">
            <i class="ico--linkedin"></i>
          </a>
        </div>
      </div>

      <div class="article-card-meta c-metadata-block-section__item">
        <span itemprop="description" class="article-card-meta__item">
          {{ article.date|date:"SHORT_DATE_FORMAT" }}
          <meta itemprop="datePublished" content="{{ article.last_published_at }}"/>
        </span>
        {% if article.author %}
          <span class="article-card-meta__item" itemprop="author" itemtype="http://schema.org/Person" itemscope="">
            <span itemprop="name">{{ article.author }}</span>
          </span>
        {% endif %}
      </div>

    </div>
  </div>

  <div class="card__body article-card__body{% if article.is_black %} text-white{% endif %}">
    <a href="{{ article.get_url }}" {{ article.get_rel }}>
      <h1 class="card-headline mb-4">
        {{ article.title }}
      </h1>
    </a>
    <p class="card-body-text text-ellipsis overflow-hidden {% firstof perex_size 'h-64' %} flex-grow{% if article.is_black %} bg-black{% endif %}">
      {{ article.perex }}
    </p>
    <div class="inline-block-nogap mt-4">
      {% for tag in article.get_tags %}
        <a
          href="{{ articles_tag_page_url }}?tag={{ tag.slug }}"
          class="btn article-card__category-button btn--condensed text-sm font-light btn--grey-{% if article.is_black %}700{% else %}125{% endif %} btn--hoveractive"
        >
          <div class="btn__body">{{ tag }}</div>
        </a>
      {% endfor %}
    </div>
  </div>

  <div itemprop="publisher" itemtype="http://schema.org/Organization" class="hidden" itemscope="">
    <div itemprop="logo" itemtype="http://schema.org/ImageObject" itemscope="">
      <meta itemprop="url" content="/assets/img/brand/logo.svg">
    </div>
    <meta itemprop="name" content="Česká pirátská strana">
  </div>

</article>