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

{% block content %}
<div class="hero-section">
    <div class="container">
        <h1>Sacred Hive Promo Dashboard</h1>
        <p class="lead">The central hub for our promotional team.</p>
    </div>
</div>

<div class="event-grid">
    <div class="container">
        <h2 class="text-center mb-5">Upcoming Events</h2>
        <div class="row">
            {% for event in events %}
            <div class="col-lg-4 col-md-6">
                <div class="event-card">
                    <div class="event-card-body">
                        <h5 class="event-artist">{{ event.artist }}</h5>
                        <ul class="event-details">
                            <li><strong>Date:</strong> {{ event.date|date:"m/d/y" }}</li>
                            <li><strong>Venue:</strong> {{ event.venue }}</li>
                            <li><strong>City:</strong> {{ event.city }}, {{ event.state }}</li>
                            <li><strong>Ages:</strong> {{ event.ages }}</li>
                        </ul>
                        <p class="event-status">
                            Status:
                            {% if event.status == "Open" %}
                                <span class="status-open">{{ event.status }}</span>
                            {% else %}
                                <span class="status-closed">{{ event.status }}</span>
                            {% endif %}
                        </p>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col">
                <p class="text-center">No upcoming events. Please check back soon!</p>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}