{% load static %}
{% get_static_prefix as STATIC_PREFIX %}

<h3 class="mb-1">See what our members have been creating below.</h3>
<div id="feeds">
  <div class="card-deck">
    {% for article in articles %}
      <div class="card">
        <a href="{{ article.url }}">

          {% if article.image %}
          <img class="card-img-top img-fluid" alt="{{ article.title }}" src="{{ article.image.home.url }}">
          {% elif article.feed.image %}
          <img class="card-img-top img-fluid" alt="{{ article.feed }}" src="{{ article.feed.image.home.url }}">
          {% else %}
          <img class="card-img-top img-fluid" alt="Maidstone Hackspace Logo" src="{% static "images/card.png" %}">
          {% endif %}
        </a>
        <div class="card-block">
          <a href="{{ article.url }}" class="card-link"><h4 class="card-title">{{ article.title }}</h4></a>
          <p class="card-text">{{ article.feed.author }}</p>
          <p class="card-text">{{ article.description|striptags|truncatewords:30 }}</p>
          <a href="{{ article.url }}" class="card-link">View Original</a>
        </div>
      </div>

      {% if forloop.counter|divisibleby:3 %}</div><div class="card-deck">{% endif %}
    {% endfor %}
  </div>
</div>