{% extends "default.html" %}

{% block head_includes %}

{% endblock %}

{% block content %}
  <div class="row justify-content-evenly g-4 mb-4 py-4">
      {% for content_item in content_items %}
      <div class="col-auto align-items-stretch d-flex mx-2" style="width: 100%; width: 24em;">
          <div class="card h-100 px-0 rounded mx-1 my-3" style="width: 100%; width: 22em;">
            <div class="card-header">
              {% if content_item.image_file %}
              <img src="{{ parent_path }}static/images/{{ content_item.image_file }}" alt="{{ content_item.title }}" class="card-img-top img-fluid mx-auto d-block object-fit-fill rounded" style="height: 200px; width: auto;">
              {% else %}
              <img src="{{ parent_path }}static/images/1x1.png" alt="{{ content_item.title }}" class="card-img-top img-fluid mx-auto d-block object-fit-scale rounded" style="height: 200px; width: auto;">
              {% endif %}
            </div>
            <div class="card-body">
              <h5 class="fw-bold"><a class="text-decoration-none text-body" href="{{ parent_path }}content/{{ content_item.slug}}.html">{{ content_item.title }}</a></h5>
              <p class="card-text mb-2">{{ content_item.preview | safe}}<a class="text-decoration-none" href="{{ parent_path }}content/{{ content_item.slug}}.html">... read more</a> </p>
            </div>
            <div class="card-footer" style="height: 4em;">
              {% for item_category in content_item.categories %}
              <small><a href="{{ parent_path }}categories/{{ item_category }}.html" class="text-muted text-decoration-none mx-1">{{ item_category }}</a></small>
              {% endfor %}
            </div>
          </div>
      </div>
      {% endfor %}
    </div>
{% endblock %}