{% load wagtailimages_tags static %}
{% block extra_css %}
  <link rel="stylesheet" type="text/css" href="{% static 'css/article_list.css' %}">
{% endblock %}

<div class="page-article-list">
  {% include "home/includes/article_list.html" with items=category.items %}

  {% if category.items.paginator.num_pages > 1 %}
    <div class="pagination">
      {% if category.items.has_previous %}
        <a class="prev-page" href="?page={{ category.items.previous_page_number }}">
          <button class="left-arrow" type="button" data-dir="left" aria-label="更多文章">
            <svg class="left-arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" viewBox="0 0 18.1213 33.4142">
              <path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="var(--stroke-0, #0E1B42)" stroke-width="2"/>
            </svg>
          </button>
          <span>BACK</span>
        </a>
      {% endif %}
      <div class="pagination-pages">
        {% for page_num in category.page_range %}
          {% if page_num == category.items.number %}
            <span class="pagination-current">{{ page_num }}</span>
          {% elif page_num == "…" %}
            <span class="pagination-ellipsis">{{ page_num }}</span>
          {% else %}
            <a href="?page={{ page_num }}">{{ page_num }}</a>
          {% endif %}
        {% endfor %}
      </div>
      {% if category.items.has_next %}
        <a class="next-page" href="?page={{ category.items.next_page_number }}">
          <span>NEXT</span>
          <button class="right-arrow" type="button" data-dir="right" aria-label="更多文章">
            <svg class="right-arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" viewBox="0 0 18.1213 33.4142">
              <path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="var(--stroke-0, #0E1B42)" stroke-width="2"/>
            </svg>
          </button>
        </a>
      {% endif %}
    </div>
  {% endif %}
</div>