{% extends "base.html" %}

{% block title %}Activity Logs{% endblock %}
{% block page_title %}Staff Activity Logs{% endblock %}
{% block page_subtitle %}Track staff actions across all modules{% endblock %}

{% block content %}
{% include "partials/breadcrumb.html" %}

<div class="card mb-6">
    <form method="get" class="toolbar-tablet-filters">
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Action</label>
            <select name="action" class="form-select" style="min-width:180px">
                <option value="">All actions</option>
                {% for value, label in actions %}
                <option value="{{ value }}" {% if selected_action == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Module</label>
            <input type="text" name="module" value="{{ selected_module }}" placeholder="e.g. customers" class="form-input">
        </div>
        <button type="submit" class="btn-primary">Filter</button>
        <a href="{% url 'accounts:activity_logs' %}" class="btn-secondary">Clear</a>
    </form>
</div>

<div class="table-scroll-card card">
    <div class="table-scroll">
    <table>
        <thead>
            <tr><th>Timestamp</th><th>Staff</th><th>Module</th><th>Action</th><th>Description</th><th>IP</th></tr>
        </thead>
        <tbody>
            {% for log in page_obj %}
            <tr>
                <td>{{ log.created_at|date:"d M Y, H:i" }}</td>
                <td>{{ log.user.username|default:"—" }}</td>
                <td>{{ log.module_name|default:"—" }}</td>
                <td><span class="badge badge-counter">{{ log.get_action_display }}</span></td>
                <td>{{ log.description }}</td>
                <td>{{ log.ip_address|default:"—" }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="6" class="text-center text-slate-500 py-8">No activity logs found.</td></tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
</div>
{% include "partials/pagination.html" %}
{% endblock %}