{% extends "base.html" %}
{% load static %}

{% block title %}Upcoming Events{% endblock %}

{% block content %}
<div class="hero">
    <h1>Find Your Next Experience</h1>
    <p>Browse our curated list of events and join our community.</p>
</div>

<div class="container">
    <div class="event-grid">
        {% for event in events %}
        <div class="event-card">
            <div class="event-card-image">
                Event Image
            </div>
            <div class="event-card-content">
                <h2 class="event-card-title">{{ event.title }}</h2>
                <p class="event-card-date">{{ event.start_date|date:"D, M j, Y, P" }}</p>
                <p class="event-card-location">{{ event.location }}</p>
                <p class="event-card-description">{{ event.description|truncatewords:20 }}</p>
                <div class="event-card-footer">
                    <a href="#" class="btn btn-primary">View Details</a>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <p class="text-center fs-4">No events found. Please check back later!</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}
