{% extends 'base.html' %}
{% block title %}Dashboard - EventNest{% endblock %}
{% block content %}
<div class="dash-header">
  <div>
    <h1 class="dash-title">Welcome back, {{ request.user.username }} &#128075;</h1>
    <p class="dash-sub">Your EventNest activity</p>
  </div>
  <span class="badge badge-purple">{{ request.user.role }}</span>
</div>

<div class="grid-stats mb-4">
  <div class="stat-card"><div class="stat-value">{{ tickets|length }}</div><div class="stat-label">My Tickets</div></div>
  <div class="stat-card"><div class="stat-value">{{ upcoming_events|length }}</div><div class="stat-label">Upcoming Events</div></div>
</div>

{% if tickets %}
<h2 class="font-head mb-2 fs-h2">&#127919; My Recent Tickets</h2>
<div class="table-wrap mb-4">
  <table>
    <thead><tr><th>Event</th><th>Code</th><th>Date</th><th>Status</th><th></th></tr></thead>
    <tbody>
      {% for ticket in tickets %}
      <tr>
        <td><a href="{% url 'web_events:event_detail' ticket.event.slug %}" class="link-accent font-bold">{{ ticket.event.title }}</a></td>
        <td><span class="ticket-code">{{ ticket.ticket_code }}</span></td>
        <td class="text-muted text-sm">{{ ticket.event.start_date|date:"M d, Y" }}</td>
        <td><span class="badge {% if ticket.status == 'confirmed' %}badge-green{% elif ticket.status == 'cancelled' %}badge-red{% else %}badge-orange{% endif %}">{{ ticket.status|title }}</span></td>
        <td><a href="{% url 'web_events:event_detail' ticket.event.slug %}" class="btn btn-outline btn-sm">View</a></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
<a href="{% url 'web_tickets:my_tickets' %}" class="btn btn-outline btn-sm">All Tickets</a>
{% else %}
<div class="card text-center mb-4 empty-state-sm">
  <div class="fs-icon-md">&#127919;</div>
  <h3 class="font-head mt-2 mb-1">No tickets yet</h3>
  <p class="text-muted mb-3">Explore and register for events</p>
  <a href="{% url 'web_events:event_list' %}" class="btn btn-gradient">Explore Events</a>
</div>
{% endif %}

{% if upcoming_events %}
<h2 class="font-head mb-2 mt-4 fs-h2">&#128197; Upcoming Events</h2>
<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--xs"><span class="event-card-img-placeholder">&#127881;</span></div>
      <div class="event-card-body">
        <div class="event-card-title event-card-title--sm">{{ 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>
  </a>
  {% endfor %}
</div>
{% endif %}
{% endblock %}