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

{% block title %}Home - Sacred Hive Promo Dashboard{% endblock %}

{% block head %}
<meta name="description" content="The official promo dashboard for Sacred Hive events. Apply for influencer promotions and manage your event participation.">
{% endblock %}

{% block content %}
<div class="hero-section text-center">
    <div class="container">
        <h1 class="hero-title">Sacred Hive Promo Dashboard</h1>
        <p class="hero-tagline">Your portal to the underground. Apply, promote, and get on the list.</p>
    </div>
</div>

<div class="container content-section">
    <h2 class="section-title">Upcoming Events</h2>
    <div class="row gy-4">
        {% if events %}
            {% for event in events %}
            <div class="col-lg-4 col-md-6">
                <div class="event-card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <h5 class="card-title">{{ event.artist_name }}</h5>
                            <span class="badge status-badge status-{{ event.status|lower }}">{{ event.status }}</span>
                        </div>
                        <p class="card-text"><span class="icon">📅</span> {{ event.date|date:"m/d/y" }}</p>
                        <p class="card-text"><span class="icon">📍</span> {{ event.venue_name }} - {{ event.city }}, {{ event.state }}</p>
                        <p class="card-text"><span class="icon">🔞</span> {{ event.age_restriction }}</p>
                        <a href="#" class="stretched-link"></a>
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
            <div class="col">
                <p class="text-center">No upcoming events. Check back soon!</p>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}