{% extends 'dashboard/base.html' %}
{% block title %}Activity Log{% endblock %}
{% block page_title %}Activity Log{% endblock %}

{% block content %}
<div class="page-header">
  <div class="breadcrumb"><a href="{% url 'dashboard:home' %}">Dashboard</a> <span>/</span> Activity Log</div>
  <h1 class="page-title">Activity Log</h1>
  <p class="page-subtitle">All admin actions and system events</p>
</div>

<div class="card">
  <div class="card-header">
    <div class="card-title"><i class="fas fa-history" style="color:var(--accent);margin-right:8px"></i>Recent Activity</div>
    <form method="GET" style="display:flex;gap:8px">
      <input type="text" name="q" value="{{ q }}" class="form-control" style="width:220px" placeholder="Search actions...">
      <button type="submit" class="btn btn-outline btn-sm"><i class="fas fa-search"></i></button>
      {% if q %}<a href="{% url 'dashboard:activity_log' %}" class="btn btn-outline btn-sm">Clear</a>{% endif %}
    </form>
  </div>
  <div class="card-body" style="padding:0">
    <div class="table-wrap">
      <table class="data-table">
        <thead>
          <tr>
            <th>Time</th>
            <th>User</th>
            <th>Action</th>
            <th>IP Address</th>
          </tr>
        </thead>
        <tbody>
          {% for log in logs %}
          <tr>
            <td style="white-space:nowrap;font-size:12px;color:var(--muted)">
              <div>{{ log.timestamp|date:"M d, Y" }}</div>
              <div>{{ log.timestamp|time:"H:i:s" }}</div>
            </td>
            <td>
              {% if log.user %}
              <div style="display:flex;align-items:center;gap:8px">
                <div style="width:28px;height:28px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--dark);flex-shrink:0">
                  {{ log.user.first_name|first|upper|default:log.user.username|first|upper }}
                </div>
                <div>
                  <div style="font-size:13px;font-weight:500">{{ log.user.get_full_name|default:log.user.username }}</div>
                  <div style="font-size:11px;color:var(--muted)">{{ log.user.username }}</div>
                </div>
              </div>
              {% else %}
              <span style="color:var(--muted)">System</span>
              {% endif %}
            </td>
            <td>
              <div style="display:flex;align-items:center;gap:8px">
                <div style="width:8px;height:8px;border-radius:50%;background:
                  {% if 'delete' in log.action|lower %}var(--danger)
                  {% elif 'create' in log.action|lower or 'created' in log.action|lower %}var(--success)
                  {% elif 'update' in log.action|lower or 'updated' in log.action|lower %}var(--info)
                  {% elif 'login' in log.action|lower %}var(--accent)
                  {% else %}var(--muted){% endif %};
                  flex-shrink:0"></div>
                <span style="font-size:13px">{{ log.action }}</span>
              </div>
              {% if log.details %}<div style="font-size:11px;color:var(--muted);margin-top:2px">{{ log.details }}</div>{% endif %}
            </td>
            <td style="font-size:12px;color:var(--muted);font-family:monospace">
              {{ log.ip|default:"—" }}
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="4">
            <div class="empty-state"><i class="fas fa-history"></i><h3>No activity yet</h3></div>
          </td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{% if logs.has_other_pages %}
<div class="pagination">
  {% if logs.has_previous %}<a href="?page={{ logs.previous_page_number }}{% if q %}&q={{ q }}{% endif %}" class="page-btn"><i class="fas fa-chevron-left"></i></a>{% endif %}
  {% for num in logs.paginator.page_range %}
  <a href="?page={{ num }}{% if q %}&q={{ q }}{% endif %}" class="page-btn {% if logs.number == num %}active{% endif %}">{{ num }}</a>
  {% endfor %}
  {% if logs.has_next %}<a href="?page={{ logs.next_page_number }}{% if q %}&q={{ q }}{% endif %}" class="page-btn"><i class="fas fa-chevron-right"></i></a>{% endif %}
</div>
{% endif %}
{% endblock %}