{% extends "base.html" %}

{% block title %}
{{ site_name or "wenji" }} Knowledge Engine{% if q %} — {{ q }}{% endif %}
{% endblock %}

{% block extra_meta %}
{% if site_url %}
<script type="application/ld+json">{{ {
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": (site_name or "wenji") + " Knowledge Engine",
  "url": site_url,
  "potentialAction": {
    "@type": "SearchAction",
    "target": site_url + "/?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
} | tojson }}</script>
{% endif %}
{% endblock %}

{% block content %}
  {% if not q and not tag and not source_type and not year %}
  <section class="hero-section">
    <h1 class="hero-title">UNCOVER DEEPER TRUTH.</h1>
    <p class="hero-subtitle">{{ site_name or "wenji" }} Knowledge Engine. Powered by Insight, Faith, and Wisdom.</p>
    
    <div class="search-form-container">
      <form action="/" method="get" class="search-form" id="search-form-hero">
        <input
          type="search"
          name="q"
          placeholder="搜尋關於屬靈操練、教會事工或神學的問題..."
          autofocus
          required>
        <button type="submit">搜尋</button>
      </form>
    </div>

    {% if topic_shortcuts %}
    <div class="layout" style="display: block; max-width: 960px; margin-top: 4rem;">
      <div class="topic-discovery">
        {% for group in topic_shortcuts %}
        <div class="topic-card">
          <div class="topic-card-icon">
            {% if group.category == '靈修與實踐' %}🧘{% else %}⛪{% endif %}
          </div>
          <h2>{{ group.category }}</h2>
          <div class="topic-chips">
            {% for topic in group.topics %}
            <span class="topic-chip" onclick="var i=document.querySelector('#search-form-hero input'); i.value=this.textContent; document.getElementById('search-form-hero').submit();">{{ topic }}</span>
            {% endfor %}
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}
  </section>
  {% endif %}

  {% if error %}
  <div class="error-banner" role="alert" style="max-width: 800px; margin: 2rem auto;">
    <strong>暫時無法搜尋</strong>
    <p>{{ error }}</p>
  </div>
  {% endif %}

  {% if q or tag or source_type or year %}
  <main class="layout">
    <aside class="axis-sidebar">
      <h3>維度分層</h3>
      <ul>
        <li><a href="/?q={{ q|urlencode }}"
               class="{% if not axis %}active{% endif %}">全部 <span class="count">∞</span></a></li>
        {% if axes %}
          {% for a in axes %}
          <li{% if a.depth %} style="padding-left: {{ a.depth * 12 }}px"{% endif %}>
            <a href="/?q={{ q|urlencode }}&amp;axis={{ a.id|urlencode }}"
               class="{% if axis == a.id %}active{% endif %}">
              {{ a.id }} <span class="count">{{ a.count }}</span>
            </a>
          </li>
          {% endfor %}
        {% endif %}
      </ul>

      {% if facets and (facets.tags or facets.source_types) %}
      <div style="margin-top: 2rem;">
        <h3>熱門分類</h3>
        {% if facets.tags %}
        <div class="topic-chips" style="margin-top: 1rem;">
          {% for f in facets.tags[:10] %}
          <a href="/?q={{ q|urlencode }}{% if axis %}&amp;axis={{ axis|urlencode }}{% endif %}&amp;tag={{ f.name|urlencode }}"
             class="topic-chip {% if tag == f.name %}active{% endif %}" style="text-decoration: none;">
            {{ f.name }}
            <span style="font-size: 0.7rem; opacity: 0.6; margin-left: 2px;">
              {% if facets.query_aware %}({{ f.count }}/{{ f.query_count }}){% else %}({{ f.count }}){% endif %}
            </span>
          </a>
          {% endfor %}
        </div>
        {% endif %}
      </div>
      {% endif %}
    </aside>

    <section class="results">
      {% if not error %}
        {% if results %}
        <div style="margin-bottom: 2rem; border-bottom: 1px solid var(--color-border); padding-bottom: 1rem;">
          <p class="result-count" style="margin:0;">
            {% if not q and (tag or source_type or year) %}
            正在瀏覽 <strong>{% if tag %}#{{ tag }}{% endif %} {% if source_type %}{{ source_type }}{% endif %} {% if year %}{{ year }}年{% endif %}</strong>
            {% else %}
            找到 <strong>{{ results|length }}</strong> 筆相關結果
            {% endif %}
          </p>
        </div>
        <ol class="result-list">
          {% for r in results %}
          {% include "result.html" %}
          {% endfor %}
        </ol>
        {% else %}
        <p class="empty" style="text-align: center; margin-top: 4rem;">查無結果，試試不同的關鍵字？</p>
        {% endif %}
      {% endif %}
    </section>
  </main>
  {% endif %}
{% endblock %}

{% block scripts %}
<script>
  document.querySelectorAll('form').forEach(f => f.addEventListener('submit', () => document.body.classList.add('searching')));
</script>
{% endblock %}