{%- assign article_id = post.date | date: '%Y-%m-%d-' | append: post.title | slugify -%}
<div class="article-card-container">
    <!-- Article metadata -->
    <div class="article-card">

      {%- if post.draft -%}
      <span class="article-draft">
        <ul>
          <li title="Article will not deployed in production (only visible on development mode)">
            Draft
          </li>
        </ul>
      </span>
      {%- endif -%}

      <!-- Article cover -->
      {%- assign article_cover_path = "/_static/posts/" | append: article_id | append: ".jpg" -%}
      {%- assign article_cover_path_exist = site.static_files | where: "path", article_cover_path | first -%}
      {%- unless article_cover_path_exist -%}
        {%- assign article_cover_path = "/_core/static/img/default/article-cover.jpg" -%}
      {%- endunless -%}
      <div class="article-cover">
        <img class="img-fluid lazyload" data-src="{{ article_cover_path }}"
             alt="{{article_id}}"/>
      </div>

      <!-- Article details -->
      <div class="article-details">
        <!-- Article title -->
        <div class="article-title">
          {{ post.title }}
        </div>

        <!-- Article description -->
        <div class="article-description">
          {{ post.description }}
        </div>

        <!-- Article categories -->
        <div class="article-category">
          <ul>
            <li>{{ post.category }}</li>
          </ul>
        </div>

        <!-- Article publication date -->
        <div class="date">
          <i class="far fa-calendar-alt"></i>
          <span>{{ post.date | date: '%B %d, %Y' }}</span>
        </div>
        <!-- Article reading time -->
        <div class="reading-time">
          <i class="far fa-clock"></i>
          <span>{{ post.time_reading_minutes }} min</span>
        </div>
      </div>

    </div>
</div>