{% 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 show_hero=show_hero empty_message=empty_message %}

  {% if category.items.paginator.num_pages > 1 %}
    <div class="pagination">
      {% if category.items.has_previous %}
        <a class="prev-page" href="{{ category.pagination.previous_url }}">
          <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="currentColor" stroke-width="2"/>
            </svg>
          </button>
          <span>BACK</span>
        </a>
      {% else %}
        <a class="prev-page disabled" aria-disabled="true">
          <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="currentColor" stroke-width="2"/>
            </svg>
          </button>
          <span>BACK</span>
        </a>
      {% endif %}
      <div class="pagination-pages">
        {% for page_item in category.pagination.pages %}
          {% if page_item.is_current %}
            <span class="pagination-current">{{ page_item.number }}</span>
          {% elif page_item.is_ellipsis %}
            <span class="pagination-ellipsis">{{ page_item.number }}</span>
          {% else %}
            <a href="{{ page_item.url }}">{{ page_item.number }}</a>
          {% endif %}
        {% endfor %}
      </div>
      {% if category.items.has_next %}
        <a class="next-page" href="{{ category.pagination.next_url }}">
          <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="currentColor" stroke-width="2"/>
            </svg>
          </button>
        </a>
      {% else %}
        <a class="next-page disabled" aria-disabled="true">
          <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="currentColor" stroke-width="2"/>
            </svg>
          </button>
        </a> 
      {% endif %}
    </div>
  {% endif %}
</div>
