{% extends "base.html" %}
{% load wagtailcore_tags static %}

{% block body_class %}template-searchresults{% endblock %}

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

{% block title %}
  {% if search_query %}搜尋：{{ search_query }}{% else %}搜尋{% endif %}
{% endblock %}

{% block content %}
  {% if search_query %}
    <div class="site-hero-band full-bleed">
      <div class="site-container category-toolbar">
        <div class="block-title category-title"><span>{{ search_query }}</span></div>
        {% if results_count %}
          {% include "home/includes/page_size_selector.html" with category=category_sections.0 %}
        {% endif %}
      </div>
    </div>
  {% endif %}

  <section class="search-results">
    {% if search_query %}
      {% if results_count %}
        {% include "home/includes/page-article-list.html" with category=category_sections.0 show_hero=False empty_message="沒有符合條件的文章" %}
      {% else %}
        <p>找不到與「{{ search_query }}」相關的文章。</p>
      {% endif %}
    {% else %}
      <p>請輸入關鍵字後再進行搜尋。</p>
    {% endif %}
  </section>
{% endblock %}
