{% extends "base.html" %}

{#
  Generic Section Index Template

  Used for non-chronological section landing pages.
  Falls back when no specialized template exists.

  Context variables:
    - section: Section object (for auto-generated pages)
    - page: Page object (for explicit _index.md files)
    - posts: Child pages (_posts)
    - subsections: Child sections (_subsections)

  Frontmatter options:
    - show_children: true/false (default: true)
      Controls whether child pages and subsections are displayed as tiles
#}

{% from 'partials/navigation-components.html' import breadcrumbs %}
{% from 'partials/content-components.html' import child_page_tiles %}

{% block content %}
{{ breadcrumbs(page if page is defined else section) }}

<div class="section-index">
    <header class="section-header">
        <h1>{{ page.title if page else section.title if section else site.config.title }}</h1>

        {% if page and page.metadata.get('description', '') %}
        <p class="section-description">{{ page.metadata.get('description', '') }}</p>
        {% elif section and section.metadata.get('description') %}
        <p class="section-description">{{ section.metadata.get('description', '') }}</p>
        {% endif %}
    </header>

    {# User-provided content (from _index.md) #}
    {% if content %}
    <div class="section-content prose">
        {{ content | safe }}
    </div>
    {% endif %}

    {# Child content display - can be disabled via frontmatter: show_children: false #}
    {% set show_children = page.metadata.get('show_children', true) if page else true %}
    {% if show_children %}
        {{ child_page_tiles(posts=posts, subsections=subsections) }}
    {% endif %}

    {# Empty state if no children to display #}
    {% if not (posts or subsections) %}
    {# Empty state with helpful guidance #}
    <div class="section-empty">
        <div class="empty-state">
            <p class="empty-message">This section doesn't have any content yet.</p>
            {% if section %}
            <div class="empty-help">
                <p><strong>To add content:</strong></p>
                <ul>
                    <li>Create a page: <code>content/{{ section.path.relative_to(site.content_dir) }}/my-page.md</code></li>
                    <li>Add a custom index: <code>content/{{ section.path.relative_to(site.content_dir) }}/_index.md</code></li>
                    <li>Create a subsection: <code>content/{{ section.path.relative_to(site.content_dir) }}/subsection/</code></li>
                </ul>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}