{% load wagtailimages_tags static home_tags %}

<div class="site-hero-band full-bleed">
  <div class="site-container">
    {% with first_article=items|first %}
      {% if first_article %}
        <div class="first-article">
          <div class="first-article-image">
            <a href="{{ first_article.url }}">
              {% if first_article.cover_image %}
                {% image first_article.cover_image max-410x293 as cover %}
                <img src="{{ cover.url }}" alt="{{ first_article.title }}"/>
              {% else %}
                {% random_default_cover as default_cover %}
                <img src="{{ default_cover }}" 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 %}
  </div>
</div>
<div class="article-list-lower">
  {% if items|length >= 2 %}
    {% for article in items|slice:"1:" %}
      <a href="{{ article.url }}">
        <div class="article-list-item">
          <div class="article-thumb">
            {% if article.cover_image %}
              {% image article.cover_image max-410x218 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 class="article-content">
            <div><span class="article-title">{{ article.title }}</span></div>
            <div><span class="article-date">{{ article.date|date:"Y.m.d" }}</span></div>
          </div>
        </div>
      </a>
    {% endfor %}
  {% endif %}
</div>