{% extends 'admin/base_site.html' %}
{% block title %}Dashboard{% endblock %}
{% block page_title %}Dashboard{% endblock %}
{% block nav_dashboard %}active{% endblock %}

{% block topbar_actions %}

{% endblock %}

{% block content %}
<div class="panel-stats">
  <div class="panel-stat">
    <div class="panel-stat-icon"><i class="bi bi-people-fill"></i></div>
    <div class="panel-stat-value">{{ total_users }}</div>
    <div class="panel-stat-label">Total Users</div>
    <a href="{% url 'admin_accounts:user_list' %}" class="panel-stat-link">View all &rarr;</a>
  </div>
  <div class="panel-stat">
    <div class="panel-stat-icon"><i class="bi bi-calendar3-event-fill"></i></div>
    <div class="panel-stat-value">{{ total_events }}</div>
    <div class="panel-stat-label">Total Events</div>
    <a href="{% url 'admin_events:event_list' %}" class="panel-stat-link">View all &rarr;</a>
  </div>
  <div class="panel-stat">
    <div class="panel-stat-icon"><i class="bi bi-ticket-perforated-fill"></i></div>
    <div class="panel-stat-value">{{ total_tickets }}</div>
    <div class="panel-stat-label">Tickets Sold</div>
    <a href="{% url 'admin_tickets:ticket_list' %}" class="panel-stat-link">View all &rarr;</a>
  </div>
  <div class="panel-stat">
    <div class="panel-stat-icon"><i class="bi bi-tags-fill"></i></div>
    <div class="panel-stat-value">{{ total_cats }}</div>
    <div class="panel-stat-label">Categories</div>
    <a href="{% url 'admin_categories:category_list' %}" class="panel-stat-link">View all &rarr;</a>
  </div>
  <div class="panel-stat">
    <div class="panel-stat-icon"><i class="bi bi-hash"></i></div>
    <div class="panel-stat-value">{{ total_tags }}</div>
    <div class="panel-stat-label">Tags</div>
    <a href="{% url 'admin_events:tag_list' %}" class="panel-stat-link">View all &rarr;</a>
  </div>
</div>
<div class="grid-2">
  <div>
    <div class="panel-section-header">
      <span class="panel-section-title"><i class="bi bi-calendar3-event-fill"></i> Recent Events</span>
      <a href="{% url 'admin_events:event_list' %}" class="btn btn-outline btn-sm">View All</a>
    </div>
    <div class="table-wrap">
      <table>
        <thead><tr><th>Title</th><th>Tags</th><th>Status</th><th>Organiser</th></tr></thead>
        <tbody>
          {% for event in recent_events %}
          <tr>
            <td>
              <a href="{% url 'admin_events:event_detail' event.id %}" class="link-accent font-bold text-sm">{{ event.title|truncatechars:26 }}</a>
              {% if event.deleted_at %}<span class="chip chip-deleted" style="font-size:.6rem">Deleted</span>{% endif %}
            </td>
            <td>
              <div class="perm-list">
                {% for tag in event.tags.all|slice:":2" %}
                <span class="tag-badge" style="--tc:{{ tag.color }}">{{ tag.name }}</span>
                {% empty %}<span class="text-xs text-muted">-</span>{% endfor %}
              </div>
            </td>
            <td><span class="chip chip-{{ event.status }}">{{ event.status|title }}</span></td>
            <td class="text-muted text-sm">{{ event.organiser.username }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  <div>
    <div class="panel-section-header">
      <span class="panel-section-title">&#128101; Recent Users</span>
      <a href="{% url 'admin_accounts:user_list' %}" class="btn btn-outline btn-sm">View All</a>
    </div>
    <div class="table-wrap">
      <table>
        <thead><tr><th>User</th><th>Type</th><th>Role</th><th>Joined</th></tr></thead>
        <tbody>
          {% for u in recent_users %}
          <tr>
            <td>
              <div class="font-bold text-sm">{{ u.username }}</div>
              <div class="text-xs text-muted">{{ u.email }}</div>
            </td>
            <td><span class="chip chip-{{ u.account_type }}">{{ u.account_type|title }}</span></td>
            <td><span class="badge badge-purple">{{ u.role }}</span></td>
            <td class="text-muted text-sm">{{ u.date_joined|date:"M d, Y" }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}