{% extends 'layouts/base.twig' %}

{% block content %}
    <h1 class="mb-5 position-relative fs-4 fw-bold sp-module-title">{{ post.title }}</h1>

    <section class="grid servicios servicios-publicos {{ post.post_name }}">

        <div class="container">
            <div class="row">

            {% if subpaginas_servicios |length > 0 %}
                {% for pagina in subpaginas_servicios %}
                    <div class="col-12 mb-2">
                        <article>
                            <div class="card">
                                {% if pagina.thumbnail %}
                                    <img src="{{ pagina.thumbnail.src}}" 
                                        alt="{{ pagina.thumbnail.alt }}"
                                        class="card-img-top">
                                {% endif %}
                                <div class="card-body">
                                    <a href="{{ pagina.link }}" class="text-decoration-none">
                                        <h5 href="{{ pagina.link }}" class="card-title fs-4 text-dark link-underline-animate">{{ pagina.title }}</h5>
                                    </a>
                                    {# <p class="card-text">{{ pagina.content }}</p> #}
                                    <p class="card-text"> {{
                                            pagina.excerpt({
                                                words: 50,
                                                read_more: ''
                                            })
                                        }}</p>
                                </div>
                            </div>
                        </article>
                    </div> 
                {% else %}
                    <p>No hay subpáginas.</p>
                {% endfor %}       
                </div>

                <!-- PAGINATION -->
                {% if pagination %}
                    <div class="pagination-custom mt-5">
                        {% include 'partials/pagination-custom.twig' %}
                    </div>
                {% endif %}

            {% else %}
                <p>No hay servicios disponibles en esta sección.</p>
            {% endif %}
        </div>
    </section>

{% endblock %}