{% extends 'base.html' %}
{% block title %}Explore Events - EventNest{% endblock %}
{% block content %}

<section class="events-hero">
  <h1 class="section-title">Explore Events</h1>
  <p class="section-sub">Discover events near you or online</p>
</section>

<div class="events-filter-bar">
  <form method="get" class="events-filter-form">
    <div class="events-filter-search">
      <input type="text" name="q" value="{{ query }}" placeholder="Search events, city…" class="form-input">
    </div>
    <select name="category" class="form-input events-filter-select">
      <option value="">All Categories</option>
      {% for cat in categories %}
      <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;&#8627; {{ child.title }}</option>
      {% endfor %}
      {% endfor %}
    </select>
    <select name="type" class="form-input events-filter-select">
      <option value="">All Types</option>
      <option value="offline" {% if current_type == 'offline' %}selected{% endif %}>Offline</option>
      <option value="online"  {% if current_type == 'online'  %}selected{% endif %}>Online</option>
      <option value="hybrid"  {% if current_type == 'hybrid'  %}selected{% endif %}>Hybrid</option>
    </select>
    <button type="submit" class="btn btn-gradient">Search</button>
    {% if query or current_category or current_type or current_tag %}
    <a href="{% url 'web_events:event_list' %}" class="btn btn-outline">Clear</a>
    {% endif %}
  </form>
</div>

{% if all_tags %}
<div class="events-tag-row">
  <a href="{% url 'web_events:event_list' %}{% if query %}?q={{ query }}{% endif %}"
     class="events-tag-chip {% if not current_tag %}active{% endif %}">All</a>
  {% for tag in all_tags %}
  <a href="?{% if query %}q={{ query }}&{% endif %}{% if current_category %}category={{ current_category }}&{% endif %}{% if current_type %}type={{ current_type }}&{% endif %}tag={{ tag.slug }}"
     class="events-tag-chip {% if current_tag == tag.slug %}active{% endif %}"
     style="--tc:{{ tag.color }}">
    <span class="events-tag-chip-dot" style="background:{{ tag.color }}"></span>
    {{ tag.name }}
  </a>
  {% endfor %}
</div>
{% endif %}

{% if events %}
<div class="grid-3">
  {% for event in events %}
  <a href="{% url 'web_events:event_detail' event.slug %}" class="event-card-link">
    <div class="event-card">
      {% with banner=event.get_banner %}
      {% if banner %}
      <div class="event-card-banner" style="background-image:url('{{ banner.file.url }}')"></div>
      {% else %}
      <div class="event-card-banner event-card-banner--placeholder">{{ event.title|first|upper }}</div>
      {% endif %}
      {% endwith %}
      <div class="event-card-body">
        <div class="event-card-meta">
          <span class="event-card-type event-card-type--{{ event.event_type }}">{{ event.event_type|title }}</span>
          {% if event.is_free %}<span class="event-card-free">Free</span>{% endif %}
        </div>
        <h3 class="event-card-title">{{ event.title|truncatechars:55 }}</h3>
        <div class="event-card-date">
          &#128197; {{ event.start_date|date:"M d, Y" }}
          {% if event.city %}&bull; &#128205; {{ event.city }}{% endif %}
        </div>
        {% with tags=event.tags.all %}
        {% if tags %}
        <div class="event-card-tags">
          {% for tag in tags|slice:":3" %}
          <span class="event-tag-badge" style="--tc:{{ tag.color }}">{{ tag.name }}</span>
          {% endfor %}
        </div>
        {% endif %}
        {% endwith %}
      </div>
    </div>
  </a>
  {% endfor %}
</div>

{% if page_obj.has_other_pages %}
<div class="web-pagination">
  {% if page_obj.has_previous %}
  <a href="?page={{ page_obj.previous_page_number }}{% if query %}&q={{ query }}{% endif %}{% if current_category %}&category={{ current_category }}{% endif %}{% if current_type %}&type={{ current_type }}{% endif %}{% if current_tag %}&tag={{ current_tag }}{% endif %}" class="web-pag-btn">&larr; Prev</a>
  {% endif %}
  <span class="web-pag-info">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
  {% if page_obj.has_next %}
  <a href="?page={{ page_obj.next_page_number }}{% if query %}&q={{ query }}{% endif %}{% if current_category %}&category={{ current_category }}{% endif %}{% if current_type %}&type={{ current_type }}{% endif %}{% if current_tag %}&tag={{ current_tag }}{% endif %}" class="web-pag-btn">Next &rarr;</a>
  {% endif %}
</div>
{% endif %}

{% else %}
<div class="empty-state">
  <div class="empty-icon-lg">&#128197;</div>
  <h3 class="fs-h3 mb-1">No events found</h3>
  <p class="text-muted mb-2">Try adjusting your search or filters.</p>
  <a href="{% url 'web_events:event_list' %}" class="btn btn-gradient">View all events</a>
</div>
{% endif %}
{% endblock %}