{{ header }}
<div id="product-category" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
      <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  <div class="row">{{ column_left }}
    <div id="content" class="col">
      {{ content_top }}

      {% if topics %}
        <h3>{{ text_refine }}</h3>
        <div class="input-group dropdown mb-3">
          <input type="text" name="filter_search" value="{{ filter_search }}" placeholder="{{ text_search }}" id="input-search" class="form-control"/>
          <select name="topic_id" id="input-topic" class="form-select">
            {% for topic in topics %}
              <option value="{{ topic.topic_id }}"{% if topic.topic_id == topic_id %} selected{% endif %}>{{ topic.name }}</option>
            {% endfor %}
          </select> <a href="{{ continue }}" class="btn btn-primary">{{ button_search }}</a>
        </div>
      {% endif %}

      {% if articles %}

        {% for article in articles %}

          <div class="mb-3">

            <h2><a href="{{ article.href }}">{{ article.name }}</a></h2>

            {% if article.image %}
              <div class="article-image"><a href="{{ article.href }}"><img src="{{ article.image }}" title="{{ article.name }}" alt="{{ article.name }}" class="img-responsive"/></a></div>
            {% endif %}

            <ul class="list-inline">
              <li class="list-inline-item">By <a href="{{ article.filter_author }}">{{ article.author }}</a></li>
              <li class="list-inline-item">{{ article.date_added }}</li>
              <li class="list-inline-item">{{ article.comment_total }} Comments</li>
            </ul>

            <div class="mb-3">{{ article.description }}</div>

            <a href="{{ article.href }}" class="btn btn-primary">{{ button_continue }}</a>

          </div>

        {% endfor %}
        <div class="row">
          <div class="col-sm-6 text-start">{{ pagination }}</div>
          <div class="col-sm-6 text-end">{{ results }}</div>
        </div>
      {% else %}
        <p>{{ text_no_results }}</p>
      {% endif %}

      {{ content_bottom }}
    </div>
    {{ column_right }}
  </div>
</div>
{{ footer }}