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

<div class="block-list-lower">
  <div class="block-list-items">
    {% for article in items %}
      <a href="{{ article.url }}">
        <div class="block-list-thumb">
          {% if article.cover_image %}
            {% image article.cover_image max-194x133 as cover %}
            <img src="{{ cover.url }}" alt="{{ article.title }}"/>
          {% else %}
            {% random_default_cover as default_cover %}
            <img src="{{ default_cover }}" alt="{{ article.title }}"/>
          {% endif %}
        </div>
        <div><span class="article-title">{{ article.title }}</span></div>
        <div><span class="article-date">{{ article.date|date:"Y.m.d" }}</span></div>
      </a>
    {% endfor %}
  </div>
  <div class="block-list-more-article">
    <a href="{{ items.0.get_parent.url }}">
      <span>更多文章</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>
  </div>
</div>
