{% extends "base.html" %}

{% block content %}
  <div class="p-3 md:p-0">
    <h1 class="my-5 text-4xl">Mailing List Archives</h1>
  </div>
  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
    <ul class="space-y-3">
      {% for message in objects %}
        <li>
          {{ message.sent_at }}: <a href="{% url 'mailing-list-detail' pk=message.pk %}" class="text-orange">
            <strong>{{ message.sender_display }}</strong>: {{ message.subject }}
          </a>
          <ul class="pl-5 space-y-2">
            {% for reply in message.get_descendants %}
              <li>
                <a href="{% url 'mailing-list-detail' pk=reply.pk %}" class="text-orange">
                  <strong>{{ reply.sender_display }}</strong>: {{ reply.subject }}
                </a>
              </li>
            {% endfor %}
          </ul>
        </li>
      {% endfor %}
    </ul>
    <div class="mt-5 space-x-3 text-center">
      {% if messages.has_previous %}
        <a href="?page=1" class="text-orange"><small> &lt;&lt; First</small></a>
        <a href="?page={{ messages.previous_page_number }}" class="text-orange"><small> &lt; Previous</small> </a>
      {% endif %}
      {% if messages.has_next %}
        <a href="?page={{ messages.next_page_number }}" class="text-orange"><small>Next <small> &gt; </small></a>
          <a href="?page={{ messages.paginator.num_pages }}" class="text-orange">Last <small> &gt;&gt;</small></a>
      {% endif %}
    </div>
  </div>
{% endblock %}
