{% load wagtailimages_tags static home_tags %}

<div class="horizontal-list-wrap" data-horizontal-list>
  <button class="horizontal-list-arrow is-hidden" type="button" data-dir="left" aria-label="上一頁">
    <svg class="horizontal-list-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>
  <ul class="horizontal-list">
    {% for article in items %}
      <li>
        <a href="{{ article.url }}">
          <div class="horizontal-list-thumb">
            {% if article.cover_image %}
              {% image article.cover_image max-194x133 as cover %}
              <img src="{{ cover.url }}" alt="{{ article.title }}" height="133" width="194"/>
            {% else %}
              {% random_default_cover as default_cover %}
              <img src="{{ default_cover }}" alt="{{ article.title }}" height="133" width="194"/>
            {% endif %}
          </div>
          <div><span class="article-title">{{ article.title }}</span></div>
          <div><span class="article-intro">{{ article.intro }}</span></div>
          <div><span class="article-date">{{ article.date|date:"Y.m.d" }}</span></div>
        </a>
      </li>
    {% empty %}
      <li class="empty">目前沒有文章</li>
    {% endfor %}
  </ul>
  <button class="horizontal-list-arrow" type="button" data-dir="right" aria-label="下一頁">
    <svg class="horizontal-list-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>
</div>