{% load wagtailcore_tags %}

<article
  class="
    min-w-[calc(100vw_-_2.5rem)] flex flex-col

    {% if image %}
      min-h-[600px]
    {% endif %}

    lg:min-w-[24rem]

    {{ classes }}
  "
>
  {% if image %}
    <{% if url %}a href="{{ url }}"{% else %}div{% endif %}>
      <img src="{{ image.url }}" alt="{{ header }}" draggable="false" class="w-full h-[17rem] object-cover">
    </{% if url %}a{% else %}div{% endif %}>
  {% endif %}

  <div class="p-6 bg-white text-black {{ description_classes }} h-full flex flex-col justify-between">
    <div class="{% if url %}mb-6{% endif %}">
      {% if date %}
        <div class="text-xl text-grey-350 mb-2">
          {{ date }}
        </div>
      {% endif %}

      <div class="flex flex-col mt-3 gap-3 justify-between mt-auto">
        {% if header %}
          <h2 class="font-alt text-4xl">
            <a href="{{ url }}" class="underline-offset-4">
              {{ header }}
            </a>
          </h2>
        {% endif %}

        <p class="text-black text-lg">
          {% if content_blocks %}
            {% for content_block in content_blocks %}
              {% include_block content_block %}
            {% endfor %}
          {% elif content %}
            {{ content }}
          {% endif %}
        </p>
      </div>
    </div>

    {% if url %}
      <div class="flex justify-center">
        {% include 'styleguide2/includes/atoms/buttons/round_button.html' with url=url text="Zjisti více" classes=None show_arrow_on_hover=True %}
      </div>
    {% endif %}
  </div>
</article>