{% extends 'base2.html' %}

{% block title %}Lista de Actividades{% endblock %}

{% block content %}
<h1 class="my-4">¡Diviertete y Aprende!</h1>
<div class="row">
    {% for actividad in actividades %}
        <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
                {% if actividad.imagen %}
                    <img src="{{ actividad.imagen.url }}" class="card-img-top" alt="{{ actividad.nombre }}">
                {% endif %}
                <div class="card-body">
                    <h5 class="card-title">{{ actividad.nombre }}</h5>
                    <p class="card-text">{{ actividad.descripcion }}</p>
                    <p class="card-text"><small class="text-muted">Fecha: {{ actividad.fecha }}</small></p>
                </div>
            </div>
        </div>
    {% endfor %}
</div>
{% endblock %}