{% extends 'base.html' %}
{% block title %}EventNest - Discover & Host Events{% endblock %}
{% block content %}

<div class="hero">
  <span class="hero-eyebrow">The Events Platform</span>
  <h1 class="hero-title">
    Discover & Host<br>
    <span class="grad">Unforgettable Events</span>
  </h1>
  <p class="hero-sub">From tech conferences to music festivals - find your next experience or bring your vision to life.</p>
  <div class="hero-actions">
    <a href="{% url 'web_events:event_list' %}" class="btn btn-gradient btn-lg">Explore Events</a>
    {% if user.is_authenticated %}
      <a href="{% url 'web_dashboard:dashboard' %}" class="btn btn-primary btn-lg">My Dashboard</a>
    {% else %}
      <a href="{% url 'accounts:register' %}" class="btn btn-outline btn-lg">Get Started Free</a>
    {% endif %}
  </div>
  <div class="search-bar">
    <input type="text" id="searchInput" placeholder="Search events, cities, categories&hellip;">
    <button class="btn btn-gradient btn-sm" onclick="window.location='/events/?q='+document.getElementById('searchInput').value">Search</button>
  </div>
</div>

{% if nav_categories %}
<div class="cats mb-4">
  <a href="{% url 'web_events:event_list' %}" class="cat-pill active">All</a>
  {% for cat in nav_categories %}
  <a href="{% url 'web_events:event_list' %}?category={{ cat.slug }}" class="cat-pill">{{ cat.title }}</a>
  {% endfor %}
</div>
{% endif %}

{% if featured_events %}
<div class="section-header">
  <h2 class="section-title mb-0">Featured Events</h2>
  <a href="{% url 'web_events:event_list' %}" class="btn btn-outline btn-sm">View All</a>
</div>
<div class="grid-3 mb-4">
  {% for event in featured_events %}
  <a href="{% url 'web_events:event_detail' event.slug %}">
    <div class="event-card">
      <div class="event-card-img">
        <span class="event-card-img-placeholder">{% if event.category %}{{ event.category.title|first }}{% else %}&#127881;{% endif %}</span>
        {% if event.is_featured %}<span class="badge badge-orange badge-img-pos">Featured</span>{% endif %}
      </div>
      <div class="event-card-body">
        <div class="event-card-meta">
          {% if event.category %}<span class="badge badge-purple">{{ event.category.title }}</span>{% endif %}
          <span class="badge badge-cyan">{{ event.event_type|title }}</span>
        </div>
        <div class="event-card-title">{{ event.title }}</div>
        <div class="event-card-meta">
          <span>&#128197; {{ event.start_date|date:"M d, Y" }}</span>
          {% if event.city %}<span>&#128205; {{ event.city }}</span>{% endif %}
        </div>
      </div>
      <div class="event-card-footer">
        {% if event.is_free %}<span class="free-tag">FREE</span>
        {% else %}<span class="price-tag">{{ event.ticket_price }}</span>{% endif %}
        {% if event.spots_left is not None %}<span class="text-xs text-muted">{{ event.spots_left }} left</span>{% endif %}
      </div>
    </div>
  </a>
  {% endfor %}
</div>
{% endif %}

{% if upcoming_events %}
<div class="section-header mt-4">
  <h2 class="section-title mb-0">Upcoming Events</h2>
  <a href="{% url 'web_events:event_list' %}" class="btn btn-outline btn-sm">View All</a>
</div>
<div class="grid-4">
  {% for event in upcoming_events %}
  <a href="{% url 'web_events:event_detail' event.slug %}">
    <div class="event-card">
      <div class="event-card-img event-card-img--sm">
        <span class="event-card-img-placeholder"></span>
      </div>
      <div class="event-card-body">
        <div class="event-card-title">{{ event.title }}</div>
        <div class="event-card-meta">
          <span>{{ event.start_date|date:"M d" }}</span>
          {% if event.city %}<span>{{ event.city }}</span>{% endif %}
        </div>
      </div>
      <div class="event-card-footer">
        {% if event.is_free %}<span class="free-tag">FREE</span>
        {% else %}<span class="price-tag">&#8377;{{ event.ticket_price }}</span>{% endif %}
      </div>
    </div>
  </a>
  {% endfor %}
</div>
{% endif %}

{% if not featured_events and not upcoming_events %}
<div class="text-center empty-state">
  <div class="empty-icon-lg">&#127881;</div>
  <h2 class="font-head mt-2 mb-1">No events yet</h2>
  <p class="text-muted mb-3">Run <code>python manage.py seed</code> to add sample data</p>
</div>
{% endif %}
{% endblock %}