{% extends settings.utils.LayoutSettings.base_template %}
{% load wagtailroutablepage_tags %}

{% block main_content %}

<main id="content">
  <div class="bg-white border-bottom pb-1">
    <div class="container">
      {% include 'includes/breadcrumbs.html' %}
      <div class="u-max-text-width">
        <h1>{{self.title}}</h1>

        {% if self.filter_topic %}
          <p class="lead">You have filtered by {{ self.filter_topic.title }}</p>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-3 order-lg-last bg-white border-start border-end border-bottom pt-3 ">
      <h2 class="h6">Filter Blog & News by Topic</h2>
        <ul class="list-unstyled">
          <li class="text-uppercase"><a href="{% routablepageurl self 'all_entries' %}">All</a></li>
          {% for topic in topics %}
          <li><a href="{% routablepageurl self 'filtered_entries' topic.slug %}">{{ topic.title }}</a></li>
          {% endfor %}
        </ul>
      </div>

      <div class="col-12 col-lg py-3">
        <table class="mb-4">
          {% for entry in entries %}
          <tr>
            <td class="text-nowrap align-top pe-3 pb-2 pb-lg-0">{{entry.coalesced_published_date|date:"Y-m-d"}}</td>
            <td class="align-top pb-2 pb-lg-0"><a href="{{entry.url}}">{{entry.title}}</a></td>
          </tr>
          {% endfor %}
        </table>
      </div>

    </div>
  </div>
</main>
{% endblock %}