{% extends "base.html" %}
{% block title %}IT Overview{% endblock %}
{% block page_title %}IT Operations Overview{% endblock %}

{% block content %}
<!-- Stats grid -->
<div class="row g-3 mb-4">
  {% for label, value, icon, color, bg in [
    ('Total Tickets', stats.total_tickets, 'bi-collection', 'var(--text)', 'rgba(255,255,255,.05)'),
    ('Open', stats.open, 'bi-circle', 'var(--info)', 'rgba(96,165,250,.1)'),
    ('In Progress', stats.in_progress, 'bi-arrow-repeat', 'var(--accent3)', 'rgba(0,180,216,.1)'),
    ('Resolved', stats.resolved, 'bi-check-circle', 'var(--success)', 'rgba(45,212,191,.1)'),
    ('Closed', stats.closed, 'bi-archive', 'var(--muted)', 'rgba(112,112,160,.1)'),
    ('Active Users', stats.total_users, 'bi-people', 'var(--accent2)', 'rgba(123,94,167,.1)'),
  ] %}
  <div class="col-6 col-xl-2">
    <div class="stat-card">
      <div class="stat-icon" style="background:{{ bg }};color:{{ color }};"><i class="bi {{ icon }}"></i></div>
      <div>
        <div class="stat-value" style="color:{{ color }};">{{ value }}</div>
        <div class="stat-label">{{ label }}</div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>

<!-- Activity log -->
<div class="card">
  <div class="card-header d-flex align-items-center justify-content-between">
    <span><i class="bi bi-activity me-2"></i>Recent Activity</span>
    {% if current_user.is_admin %}
    <a href="{{ url_for('admin.activity_logs') }}" style="font-size:12px;color:var(--accent3);">Full log →</a>
    {% endif %}
  </div>
  <div class="card-body p-0">
    <table class="table mb-0">
      <thead>
        <tr>
          <th>Action</th>
          <th>User</th>
          <th>Entity</th>
          <th>Details</th>
          <th>Time</th>
        </tr>
      </thead>
      <tbody>
        {% for log in recent_logs %}
        <tr>
          <td>
            <span class="mono" style="font-size:11px;
              color:{% if 'create' in log.action %}var(--success){% elif 'delete' in log.action %}var(--danger){% elif 'update' in log.action or 'edit' in log.action %}var(--warning){% else %}var(--muted){% endif %};">
              {{ log.action }}
            </span>
          </td>
          <td style="font-size:13px;">
            {% if log.user %}{{ log.user.full_name }}{% else %}<span style="color:var(--muted);">System</span>{% endif %}
          </td>
          <td style="font-size:12px;color:var(--muted);">{{ log.entity_type or '—' }} {% if log.entity_id %}#{{ log.entity_id }}{% endif %}</td>
          <td style="font-size:12px;color:var(--muted);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ log.details or '—' }}</td>
          <td style="font-size:11px;color:var(--muted);font-family:'Space Mono',monospace;">{{ log.created_at.strftime('%b %d %H:%M') }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}