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

<div class="section-header mb-3">
  <div>
    <a href="{% url 'web_categories:category_list' %}" class="text-sm text-muted">&larr; All Categories</a>
    <h1 class="section-title mt-1 mb-0">{{ cat.title }}</h1>
    {% if cat.description %}<p class="text-muted mt-1">{{ cat.description }}</p>{% endif %}
    <p class="text-sm text-muted mt-1">
      <strong>{{ total_events }}</strong> event{{ total_events|pluralize }}
      {% if subcategories %}across {{ cat.title }} and its sub-categories{% endif %}
    </p>
  </div>
</div>

{% if subcategories %}
<div class="events-tag-row mb-3">
  <a href="{% url 'web_categories:category_detail' cat.slug %}" class="events-tag-chip active">
    All {{ cat.title }}
  </a>
  {% for sub in subcategories %}
  <a href="{% url 'web_categories:category_detail' sub.slug %}" class="events-tag-chip">
    {{ sub.title }}
  </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>
        {% if subcategories and event.category and event.category != cat %}
        <div class="event-card-date mt-1" style="color:var(--accent);font-size:.72rem;font-weight:600;">
          &#127991; {{ event.category.title }}
        </div>
        {% endif %}
        {% 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 }}" class="web-pag-btn">&larr; Previous</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 }}" class="web-pag-btn">Next &rarr;</a>
  {% endif %}
</div>
{% endif %}

{% else %}
<div class="empty-state">
  <div class="empty-icon-lg">&#128197;</div>
  <p class="text-muted mb-2">No events in this category yet.</p>
  <a href="{% url 'web_events:event_list' %}" class="btn btn-outline">Browse all events</a>
</div>
{% endif %}
{% endblock %}