{% extends "base.html" %}

{% block content %}
<section class="oc-section">
    <div class="oc-container oc-section-header">
        <h1>{{ section.title }}</h1>
        {% if section.description %}
            <p class="oc-section-description">{{ section.description }}</p>
        {% endif %}
    </div>

    <div class="oc-container oc-content">
        {{ section.content | safe }}
    </div>

    {% if section.pages | length > 0 %}
        <div class="oc-container oc-grid-2 oc-section-list">
            {% for page in section.pages %}
                <article class="oc-card oc-card-link">
                    <h2><a href="{{ page.permalink }}">{{ page.title }}</a></h2>
                    {% if page.description %}
                        <p>{{ page.description }}</p>
                    {% else %}
                        <p>{{ page.summary | safe }}</p>
                    {% endif %}
                    <a href="{{ page.permalink }}" class="oc-link-arrow">Read more →</a>
                </article>
            {% endfor %}
        </div>
    {% endif %}
</section>
{% endblock content %}