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

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

    <section class="posts-noticias">
        {% if recent_posts_noticias %}
            {% for noticias in recent_posts_noticias %}

                <div class="card my-3 position-relative">
                <div class="row g-0">
                    <div class="col-md-4">
                        <img src="{{ noticias.thumbnail.src }}" 
                                class="rounded-start object-fit-cover w-100 h-100" 
                                alt="{{ noticias.thumbnail.alt }}"
                                style="min-height: 200px;"
                                />
                    </div>
                    <div class="col-md-8">
                    <div class="card-body" style="padding-bottom: 60px;">
                        <h5 class="card-title">{{ noticias.title }}</h5>
                        <p class="card-text"> {{
                                noticias.excerpt({
                                    words: 50,
                                    read_more: ''
                                })
                            }}</p>
                        <p class="card-text"><small class="text-body-secondary">{{ noticias.date }}</small></p>
                        <a href="{{ noticias.link  }}" 
                                class="btn position-absolute btn-secondary-cnt"
                                style="position: absolute; bottom: 15px; right: 15px; z-index: 10;" 
                                >Sigue leyendo...</a>
                    </div>
                    </div>
                </div>
                </div>

            {% endfor %}
        {% else %}
            <h2>no hay artículos</h2>
        {% endif %}
    </section>

{% endblock %}