{% extends "base.html" %} {% block content %}
<center>
  <h1>{{ title }}</h1>
  <span><a href="{{ path }}/">Featured</a></span>
  <span><a href="{{ path }}/recent/">Recent</a></span>
  <span><a href="{{ path }}/popular/">Popular</a></span>
  <span><a href="{{ path }}/views/">Views</a></span>
  <span><a href="{{ path }}/winners/">Winners</a></span>
  <br />

  <div class="container">
    <div class="row">
      {% for ible in ibles %}
      <div class="ible-list-item col-xs-12 col-sm-6 col-lg-4">
        <a href="{{ ible.link }}" style="color: #bbc2cf">
          <img
            style="max-width: 350px"
            src="{{ ible.img }}"
            alt="{{ ible.title }}"
          />
          <p>{{ ible.title }}</p>
        </a>
        <p>
          by <a href="{{ ible.author_link }}">{{ ible.author }}</a> in
          <a href="{{ ible.channel_link }}">{{ ible.channel }}</a>
        </p>
        <p>{{ ible.views }} Views, {{ ible.favorites }} Favorites</p>
      </div>
      {% endfor %}

      <ul class="pagination">
        {% for page in pagination %}
        <li class="page-item">
          <a
            class="page-link {% if page.active %}active{% endif %} {% if page.disabled %}disabled{% endif %}"
            href="{{ page.link }}"
            >{{ page.text }}</a
          >
        </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</center>
{% endblock %}