{% extends 'base.html' %}
{% block title %}Explore Events - EventNest{% endblock %}
{% block content %}
<div class="section-header mb-3">
  <h1 class="section-title mb-0">Explore Events</h1>
</div>

<form method="get" class="card mb-4">
  <div class="card-body flex flex-wrap gap-2 items-end">
    <div class="form-group mb-0 filter-search">
      <label class="form-label">Search</label>
      <input type="text" name="q" value="{{ query }}" placeholder="Search events&hellip;" class="form-input">
    </div>
    <div class="form-group mb-0 filter-category">
      <label class="form-label">Category</label>
      <select name="category" class="form-input form-select">
        <option value="">All Categories</option>
        {% for cat in categories %}
        <optgroup label="{{ cat.title }}">
          <option value="{{ cat.slug }}" {% if current_category == cat.slug %}selected{% endif %}>{{ cat.title }}</option>
          {% for child in cat.children.all %}
          <option value="{{ child.slug }}" {% if current_category == child.slug %}selected{% endif %}>&nbsp;&nbsp;&#8627; {{ child.title }}</option>
          {% endfor %}
        </optgroup>
        {% endfor %}
      </select>
    </div>
    <div class="form-group mb-0 filter-type">
      <label class="form-label">Type</label>
      <select name="type" class="form-input form-select">
        <option value="">All Types</option>
        <option value="online"  {% if current_type == 'online'  %}selected{% endif %}>Online</option>
        <option value="offline" {% if current_type == 'offline' %}selected{% endif %}>Offline</option>
        <option value="hybrid"  {% if current_type == 'hybrid'  %}selected{% endif %}>Hybrid</option>
      </select>
    </div>
    <div class="flex gap-1">
      <button type="submit" class="btn btn-gradient">Filter</button>
      <a href="{% url 'web_events:event_list' %}" class="btn btn-outline">Clear</a>
    </div>
  </div>
</form>

{% if events %}
<p class="text-sm text-muted mb-3">{{ events|length }} event{{ events|length|pluralize }} found</p>
<div class="grid-3">
  {% for event in 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 %}E{% endif %}</span>
      </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 {% if event.event_type == 'online' %}badge-cyan{% elif event.event_type == 'hybrid' %}badge-orange{% else %}badge-green{% endif %}">
            {{ event.event_type|title }}
          </span>
        </div>
        <div class="event-card-title">{{ event.title }}</div>
        <p class="text-xs text-muted">{{ event.description|truncatewords:14 }}</p>
        <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">&#8377;{{ event.ticket_price }}</span>{% endif %}
        <span class="btn btn-gradient btn-sm">View</span>
      </div>
    </div>
  </a>
  {% endfor %}
</div>
{% else %}
<div class="text-center empty-state">
  <div class="empty-icon">&#128269;</div>
  <h3 class="font-head mt-2 mb-1">No events found</h3>
  <p class="text-muted">Try adjusting your search or filters.</p>
</div>
{% endif %}
{% endblock %}