{% extends 'layout.twig' %}
{% block title %}Knowledge Base — {{ brand.name }}{% endblock %}
{% block content %}
    <section class="page-head">
        <div class="container">
            <h1>Knowledge Base</h1>
            <form action="{{ app_url('/kb/search') }}" method="get" class="kb-search">
                <input type="search" name="q" placeholder="Search articles…">
                <button type="submit">Search</button>
            </form>
        </div>
    </section>

    <section class="container">
        <h2 class="section-title">Categories</h2>
        <div class="card-grid">
            {% for c in categories %}
                <a class="card kb-card" href="{{ app_url('/kb/category/' ~ c.slug) }}">
                    <h3>{{ c.name }}</h3>
                    {% if c.description %}<p class="muted">{{ c.description }}</p>{% endif %}
                    <p class="small muted">{{ c.article_count }} article{{ c.article_count == 1 ? '' : 's' }}</p>
                </a>
            {% else %}
                <p class="muted">No categories yet.</p>
            {% endfor %}
        </div>
    </section>

    {% if recent %}
    <section class="container">
        <h2 class="section-title">Recently updated</h2>
        <ul class="article-list">
            {% for a in recent %}
                <li>
                    <a href="{{ app_url('/kb/article/' ~ a.slug) }}"><strong>{{ a.title }}</strong></a>
                    {% if a.category_name %}<span class="muted small"> · {{ a.category_name }}</span>{% endif %}
                    <p class="muted">{{ a.excerpt }}</p>
                </li>
            {% endfor %}
        </ul>
    </section>
    {% endif %}
{% endblock %}