{% extends "base.html" %}
{% load wagtailcore_tags static %}
{% block extra_css %}
  <link rel="stylesheet" type="text/css" href="{% static 'css/category.css' %}">
{% endblock %}
{% block body_class %}{% if not page.has_subcategories %}template-darkbackground{% endif %}{% endblock %}
{% block content %}
  {# Breadcrumbs navigation may not used anymore #}
  {% if breadcrumbs %}
    <nav class="breadcrumbs" aria-label="breadcrumb">
      <ol>
        {% if breadcrumb_root %}
          <li><a href="{{ breadcrumb_root.url }}">首頁</a></li>
        {% endif %}
        {% for crumb in breadcrumbs %}
          {% if not breadcrumb_root or crumb.id != breadcrumb_root.id %}
            <li>
              {% if crumb.id == page.id %}
                <span>{{ crumb.title }}</span>
              {% else %}
                <a href="{{ crumb.url }}">{{ crumb.title }}</a>
              {% endif %}
            </li>
          {% endif %}
        {% endfor %}
      </ol>
    </nav>
  {% endif %}
  <div class="site-hero-band full-bleed">
    <div class="site-container">
      <div class="block-title category-title"><span>{{ self.title}}</span></div>
    </div>
  </div>
  {% if page.has_subcategories %}
      {% for section in category_sections %}
        <div class="subcategory-title">
          <a href="{{ section.url }}">
            <span>{{ section.title }}</span>
          </a>
        </div>
        {% include "home/includes/block_list.html" with items=section.items %}
      {% endfor %}
  {% else %}
    {% include "home/includes/page-article-list.html" with category=category_sections.0 %}
    {% if category_trending %}
        <div class="subcategory-title">
          <span>熱門文章</span>
        </div>
        {% include "home/includes/block_list_lower.html" with items=category_trending %}
    {% endif %}
  {% endif %}
{% endblock %}