{% extends 'base.html' %}
{% block content %}
<section class="section">
  <div class="container">
    <h1 class="title">Actividades</h1>
    <div class="columns is-multiline">
      {% for a in actividades %}
      <div class="column is-one-third">
        <div class="card">
          <div class="card-content">
            <p class="title is-5">{{ a.titulo }}</p>
            <p class="subtitle is-6">{{ a.descripcion|truncatechars:100 }}</p>
            <p><strong>Materia:</strong>
              {% if a.materia %}
                {{ a.materia.nombre }}
              {% else %}
                Sin materia
              {% endif %}
            </p>
            <div style="margin-top:.75rem;">
              <a class="button is-link" href="{% url 'actividades:actividad_detalle' a.pk %}">Ir a actividad</a>
              {% if user.is_authenticated %}
              <form method="post" action="{% url 'actividades:participar_actividad' a.pk %}" style="display:inline;">
                {% csrf_token %}
                <button class="button is-primary">Participar</button>
              </form>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
      {% empty %}
      <p>No hay actividades disponibles.</p>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock %}