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

{% block content %}
    <p class="mb-5 position-relative fs-4 fw-bold sp-module-title">SERVICIOS PÚBLICOS</p>

    <section class="grid servicios servicios-publicos">
        <div class="container">
            <div class="row">
            {% for pagina in subpaginas_servicios_publicos %}
            <div class="col-12 mb-2">
                <article>
                    <div class="card">
                        {% if pagina.thumbnail %}
                            <img src="{{ pagina.thumbnail.src}}" 
                                    alt="{{ pagina.thumbnail.alt }}"
                                    >
                        {% else %}
                            <p>no hay thumbnail </p>
                        {% 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>
                        </div>
                    </div>
                </article>
            </div>         
            {% else %}
                <p>No hay subpáginas disponibles.</p>
            {% endfor %}
            </div>
        </div>
    </section>

{% endblock %}