{% extends "base.html" %}
{% block content %}
<div class="row mt-4 mb-3">
    <div class="col d-flex justify-content-between align-items-center">
        <h2>Kommende Events</h2>
        <a href="/event/add" class="btn btn-primary">
            <i class="bi bi-plus-circle"></i> Neues Event erstellen
        </a>
    </div>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
{% for event in events %}
    <div class="col">
        <div class="card h-100 shadow-sm">
            <div class="card-body">
                    <h5 class="card-title mb-1">{{ event.title }}</h5>
                    <p class="text-muted mb-3"><i class="bi bi-calendar"></i> {{ event.event_time.strftime('%A, %d.%m.%Y')
                        }}
                    </p>
                <p class="card-text">{{ event.description }}</p>
                <a href="event/{{ event.id }}" class="btn btn-sm {% if event.registration_deadline > now %}btn-primary{% else %}btn-secondary{% endif %}">{% if event.registration_deadline > now %}Zur Anmeldung{% else %}Details ansehen{% endif %}</a>
            </div>
        </div>
    </div>
{% endfor %}
</div>
{% endblock %}