{%- assign height = include.height | default: site.i18n.post.height -%}
{%- assign overlap = include.overlap | default: false -%}

<article class="col d-flex flex-column mb-3">
  {%- if include.post.video -%}
    <div class="h-{{ height }}">
      {%- include_cached video.html video=include.post.video class='min-h-100' -%}
    </div>
  {%- else -%}
    <a href="{{ include.post.url }}">
      {%- include_cached picture.html image=include.post.image default_description=include.post.title height=height -%}
    </a>
  {%- endif -%}

  {% comment %}
  El margen negativo al 100% hace que se solape el div sobre el img.
  {% endcomment %}
  <div class="{% if overlap %}h-{{ height }} mt-n{{ height }} justify-content-end{% endif %} pl-3 pr-3 pb-3 d-flex flex-column">
    <header class="position-relative">
      <h1 class="{{ overlap | ternary: 'mt-3 h5', 'h4' }}">
        <a
          class="{{ overlap | ternary: 'white', 'black' }} line-clamp-5"
          href="{{ include.post.url }}">
          <span class="{{ overlap | value_if: 'background-blue-t4' }}">{{ include.post.title }}</span>
        </a>
      </h1>

      <p class="{{ overlap | value_if: 'background-blue-t4 white d-inline' }}">
        {% comment %}
        El fondo está repetido porque el line-clamp lo deshabilita (?)
        {% endcomment %}
        <span class="line-clamp-1 {{ overlap | value_if: 'background-blue-t4' }}">
          {{ include.post.author | join: ', ' }}
        </span>

        <time datetime="{{ include.post.date }}">
          {{ include.post.date | date_local: site.i18n.date.format }}
        </time>
      </p>

      <p>
        {% for category in include.post.categories %}
          <a href="{{ category.url }}" class="badge badge-primary">{{ category.title }}</a>
        {% endfor %}
      </p>
    </header>
  </div>
</article>