{#
Embeddable Section Component

Base section layout with overridable blocks. Use with {% embed %}.

Blocks:
- title: Section heading (required)
- description: Optional description below title
- actions: Action buttons in header (optional)
- content: Main section content (required)
- footer: Section footer (optional)

Args (via context):
- id: Section ID for anchoring
- css_class: Additional CSS classes
- heading_level: h2, h3, h4 (default: 'h2')
- collapsible: Make section collapsible (default: false)
- open: If collapsible, start expanded (default: true)

Example:
{% embed 'partials/_embeds/section.html' %}
{% block title %}Getting Started{% end %}
{% block description %}Learn the basics in 5 minutes.{% end %}
{% block content %}
<ol>
    <li>Install the package</li>
    <li>Configure settings</li>
    <li>Run your first build</li>
</ol>
{% end %}
{% end %}

Example with actions:
{% with id='api-reference', heading_level='h3' %}
{% embed 'partials/_embeds/section.html' %}
{% block title %}API Reference{% end %}
{% block actions %}
<a href="/api/openapi.json" class="btn btn-sm">Download OpenAPI</a>
{% end %}
{% block content %}
<p>Full API documentation...</p>
{% end %}
{% end %}
{% end %}
#}

{% let section_id = id ?? none %}
{% let section_class = css_class ?? '' %}
{% let section_heading = heading_level ?? 'h2' %}
{% let section_collapsible = collapsible ?? false %}
{% let section_open = open ?? true %}

{% if section_collapsible %}
<details class="embed-section embed-section--collapsible {{ section_class }}" {% if section_id %} id="{{ section_id }}"
    {% end %}{% if section_open %} open{% end %}>
    <summary class="embed-section-header">
        <span class="embed-section-title">{% block title %}{% end %}</span>
        {% block actions %}{% end %}
        <span class="embed-section-toggle">{{ icon('chevron-down', size=16) }}</span>
    </summary>
    {% block description %}{% end %}
    <div class="embed-section-content">
        {% block content %}{% end %}
    </div>
    {% block footer %}{% end %}
</details>
{% else %}
<section class="embed-section {{ section_class }}" {% if section_id %} id="{{ section_id }}" {% end %}>
    <header class="embed-section-header">
        <{{ section_heading }} class="embed-section-title">{% block title %}{% end %}</{{ section_heading }}>
        {% block actions %}{% end %}
    </header>
    {% block description %}{% end %}
    <div class="embed-section-content">
        {% block content %}{% end %}
    </div>
    {% block footer %}{% end %}
</section>
{% end %}