{% extends "base.html" %}

{% block title %}Activity Log{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <h1 class="display-6 fw-bold text-primary">Activity Log</h1>
        <p class="text-muted">History of your actions and changes.</p>
    </div>
</div>

<div class="card shadow-sm border-0">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4">Time</th>
                        <th>Action</th>
                        <th>Resource</th>
                        <th>Details</th>
                    </tr>
                </thead>
                <tbody>
                    {% for entry in log_entries %}
                    <tr>
                        <td class="ps-4 text-nowrap text-muted small">
                            {{ entry.timestamp|date:"M d, Y H:i" }}
                        </td>
                        <td>
                            {% if entry.action == 0 %}
                                <span class="badge bg-success bg-opacity-10 text-success rounded-pill">Created</span>
                            {% elif entry.action == 1 %}
                                <span class="badge bg-primary bg-opacity-10 text-primary rounded-pill">Updated</span>
                            {% elif entry.action == 2 %}
                                <span class="badge bg-danger bg-opacity-10 text-danger rounded-pill">Deleted</span>
                            {% else %}
                                <span class="badge bg-secondary rounded-pill">Accessed</span>
                            {% endif %}
                        </td>
                        <td>
                            <span class="fw-medium">{{ entry.content_type.name|capfirst }}</span>
                            <br>
                            <small class="text-muted">{{ entry.object_repr }}</small>
                        </td>
                        <td class="small text-muted">
                            <div style="max-width: 400px; overflow-wrap: break-word;">
                            {% if entry.changes %}
                                {{ entry.changes|truncatechars:100 }}
                            {% else %}
                                -
                            {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="4" class="text-center py-5 text-muted">
                            <i class="bi bi-clock-history fs-1 d-block mb-3"></i>
                            No activity recorded yet.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{% if is_paginated %}
<div class="mt-4">
    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link rounded-pill px-3 me-1" href="?page={{ page_obj.previous_page_number }}">Previous</a>
            </li>
            {% endif %}
            
            <li class="page-item disabled">
                <span class="page-link border-0 bg-transparent">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
            </li>

            {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link rounded-pill px-3 ms-1" href="?page={{ page_obj.next_page_number }}">Next</a>
            </li>
            {% endif %}
        </ul>
    </nav>
</div>
{% endif %}
{% endblock %}
