{% extends 'base.html' %}
{% block title %}#{{ tag.name }} Events - EventNest{% endblock %}
{% block content %}

<div class="tag-hero">
  <div class="tag-hero-badge" style="--tc:{{ tag.color }}">
    <span class="tag-hero-dot" style="background:{{ tag.color }}"></span>
    #{{ tag.name }}
  </div>
  <p class="section-sub">{{ total_events }} event{{ total_events|pluralize }} tagged with <strong>#{{ tag.name }}</strong></p>
</div>

{% if all_tags %}
<div class="events-tag-row mb-3">
  <a href="{% url 'web_events:event_list' %}" class="events-tag-chip">&#8592; All Events</a>
  {% for t in all_tags %}
  <a href="{% url 'web_events:tag_events' t.slug %}"
     class="events-tag-chip {% if t.slug == tag.slug %}active{% endif %}"
     style="--tc:{{ t.color }}">
    <span class="events-tag-chip-dot" style="background:{{ t.color }}"></span>
    {{ t.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>
        {% if event.category %}
        <div class="event-card-date mt-1">&#127991; {{ event.category.title }}</div>
        {% endif %}
        <div class="event-card-tags">
          {% for t in event.tags.all|slice:":3" %}
          <span class="event-tag-badge" style="--tc:{{ t.color }}">{{ t.name }}</span>
          {% endfor %}
        </div>
      </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; 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 }}" class="web-pag-btn">Next &rarr;</a>
  {% endif %}
</div>
{% endif %}

{% else %}
<div class="empty-state">
  <div class="empty-icon-lg">&#127991;</div>
  <h3 class="fs-h3 mb-1">No events for this tag yet</h3>
  <p class="text-muted mb-2">Try exploring other tags or browse all events.</p>
  <a href="{% url 'web_events:event_list' %}" class="btn btn-gradient">Browse All Events</a>
</div>
{% endif %}
{% endblock %}