{% extends "base.html" %}

{% block title %}Activity Logs{% endblock %}
{% block page_title %}Staff Activity Logs{% endblock %}
{% block page_subtitle %}Track login, logout, and staff actions{% endblock %}

{% block content %}
<div class="card mb-6">
    <form method="get" class="flex flex-wrap gap-4 items-end">
        <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">Action</label>
            <select name="action" class="form-select" style="min-width: 200px;">
                <option value="">All actions</option>
                {% for value, label in actions %}
                <option value="{{ value }}" {% if selected_action == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>
        </div>
        <button type="submit" class="btn-primary">Filter</button>
        <a href="{% url 'activity_logs:list' %}" class="btn-secondary">Clear</a>
    </form>
</div>

<div class="card overflow-x-auto">
    <table>
        <thead>
            <tr>
                <th>Timestamp</th>
                <th>Staff</th>
                <th>Action</th>
                <th>Description</th>
                <th>IP Address</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><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="5" class="text-center text-slate-500 py-8">No activity logs found.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% if page_obj.has_other_pages %}
<div class="pagination">
    {% if page_obj.has_previous %}
    <a href="?page={{ page_obj.previous_page_number }}{% if selected_action %}&action={{ selected_action }}{% endif %}">Previous</a>
    {% endif %}
    <span class="current">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
    {% if page_obj.has_next %}
    <a href="?page={{ page_obj.next_page_number }}{% if selected_action %}&action={{ selected_action }}{% endif %}">Next</a>
    {% endif %}
</div>
{% endif %}
{% endblock %}