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

{% block content %}
    {% include 'partials/breadcrumb.twig' %}

    {% 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 btn-secondary position-absolute"
                            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 %}
{% endblock %}