{% load wagtailimages_tags static home_tags %}

{% if show_hero != False %}
  <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">{{ empty_message|default:"目前沒有文章" }}</span>
        {% endif %}
      {% endwith %}
    </div>
  </div>
{% endif %}

{% if show_hero != False %}
  {% if items|length > 2 %}
    <div class="article-list-lower">
      {% 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 %}
    </div>
  {% endif %}
{% else %}
  {% if items|length %}
  <div class="article-list-lower">
    {% for article in items %}
      <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 %}
  </div>
  {% else %}
    <span class="empty">{{ empty_message|default:"沒有符合條件的文章" }}</span>
  {% endif %}
{% endif %}