{% extends 'base.html' %}

{% block menuapp %}

{% endblock menuapp %}

{% block content %}

<div class="container-xl">
			    
    <h1 class="app-page-title">Introducción</h1>

    <div class="app-card alert alert-dismissible shadow-sm mb-4 border-left-decoration" role="alert">
        <div class="inner">
            <div class="app-card-body p-3 p-lg-4">
                <h3 class="mb-3">¡Bienvenido a Jugar al Pádel entre amigos!</h3>
                <div class="row gx-5 gy-3">
                    <h2>Noticias Recientes</h2>
                    <div class="news-container">
                        {% for noticia in noticias %}
                            <div class="news-item">
                                <h3>{{ noticia.titulo }}</h3>
                                <p>{{ noticia.contenido|truncatewords:20 }}</p> <!-- Muestra solo 20 palabras del contenido -->
                                <p><small>Publicado el {{ noticia.fecha_publicacion|date:"d M Y" }} por {{ noticia.autor }}</small></p>
                                <a href="{% url 'eventos:detalle_noticia' noticia.id %}">Leer más</a>
                            </div>
                        {% empty %}
                            <p>No hay noticias disponibles.</p>
                        {% endfor %}
                    </div>
                </div><!--//row-->
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div><!--//app-card-body-->
        </div><!--//inner-->
    </div><!--//app-card-->

</div><!--//container-fluid-->

{% endblock %}