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

<div class="block-list-wrap" data-block-list>
  {% with first_article=items|first %}
    {% if first_article %}
      <div class="block-first-article">
        <div class="first-article-image">
          <a href="{{ first_article.url }}">
            {% if first_article.cover_image %}
              {% image first_article.cover_image max-480x293 as cover %}
              <img src="{{ cover.url }}" alt="{{ first_article.title }}"/>
            {% else %}
              <img src="{% static 'img/default_cover.jpg' %}" alt="{{ first_article.title }}"/>
            {% endif %}
          </a>
        </div>
        <div class="first-article-content">
          <a href="{{ first_article.url }}">
            <div class="first-article-title">
              <span>{{ first_article.title }}</span>
            </div>
            <div class="first-article-date">
              <span>{{ first_article.date|date:"Y.m.d" }}</span>
            </div>
            {% if first_article.intro %}
              <div class="first-article-intro">
                <span>{{ first_article.intro }}</span>
              </div>
            {% endif %}
            <div class="first-article-body">
              <span>{{ first_article.body_search_text|truncatechars:200 }}</span>
            </div>
          </a>
        </div>
      </div>
    {% else %}
      <span class="empty">目前沒有文章</span>
    {% endif %}
  {% endwith %}

  {% if items|length >= 2 %}
    {% include "home/includes/block_list_lower.html" with items=items|slice:"1:7" %}
  {% endif %}
</div>