{% set blog = page.find(header_var('blog_url')|defined(theme_var('blog_page'))) %}
{# Set the number or recent posts will be displayed in sidebar #}
{% set recent_enabled = theme_var('recent_posts_enabled')|defined(false) %}
{% set recent_number = theme_var('recent_posts_number')|defined(5) %}

{% if recent_enabled is same as true %}
<section>
  <header class="">
    <h3>{{ 'FUTURE.SIDEBAR.RECENT_POSTS.HEADLINE'|t }}</h3>
  </header>
  <ul class="posts">
    {% for p in blog.collection.order('date', 'desc').slice(0,recent_number) %}
    {% set datestamp = include('partials/page-bits/date.html.twig', { 'page': p } ) %}
    {% set image = p.media[p.header.primaryImage] ?: p.media.all|filter((v, k) => k != p.header.avatarImage and (v.type == 'image' or v.type == 'vector'))|first %}
    {% set title = p.title|raw %}
      <li>
        <article>
          <header>
            <h3>
              <a href="{{p.url}}">{{ title }}</a>
            </h3>  
            <time class="published" itemprop="datePublished" datetime="{{ datestamp }}">{{ datestamp }}</time>
          </header>
          <a href="{{p.url}}" class="image" aria-label="{{ title }}">
            {{ image.cropResize(64,64).quality(60).loading('lazy').attribute('decoding','async').html(title,title)|raw }}
          </a>
        </article>
      </li>
    {% endfor %}
  </ul>
</section>
{% endif %}