{% if offset == 0 %}
<div class="overflow-x-auto rounded-lg">
    <div class="align-middle inline-block min-w-full">
        <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col"
                            class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
                        <th scope="col"
                            class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actor</th>
                        <th scope="col"
                            class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
                        <th scope="col"
                            class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details
                        </th>
                        <th scope="col"
                            class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP & Source
                        </th>
                    </tr>
                </thead>
                <tbody id="activity-logs-tbody" class="bg-white divide-y divide-gray-200">
                    {% endif %}

                    {% for log in logs %}
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="p-4 whitespace-nowrap text-sm text-gray-500">{{ log.timestamp.strftime('%Y-%m-%d
                            %H:%M:%S') }}</td>
                        <td class="p-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ log.person_name or
                            'System' }}</td>
                        <td class="p-4 whitespace-nowrap text-sm text-gray-500">
                            <span class="px-2 py-1 text-xs font-semibold rounded-full 
            {% if 'DELETE' in log.action %}bg-red-100 text-red-800
            {% elif 'CREATE' in log.action or 'ADD' in log.action %}bg-green-100 text-green-800
            {% elif 'UPDATE' in log.action %}bg-blue-100 text-blue-800
            {% else %}bg-gray-100 text-gray-800{% endif %}">
                                {{ log.action }}
                            </span>
                        </td>
                        <td class="p-4 text-sm text-gray-600">{{ log.details }}</td>
                        <td class="p-4 whitespace-nowrap text-sm text-gray-400">
                            <div class="font-mono text-gray-500">{{ log.ip_address }}</div>
                            <div class="text-xs truncate max-w-[150px] text-gray-400" title="{{ log.user_agent }}">
                                {{ log.user_agent or 'Unknown Source' }}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}

                    {% if has_more %}
                    <tr id="load-more-row">
                        <td colspan="5" class="p-4 text-center">
                            <button hx-get="/settings/activity_logs?offset={{ offset + limit }}"
                                hx-target="#load-more-row" hx-swap="outerHTML"
                                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-cyan-700 bg-cyan-100 hover:bg-cyan-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 transition-colors">
                                Load More...
                            </button>
                        </td>
                    </tr>
                    {% endif %}

                    {% if offset == 0 %}
                    {% if not logs %}
                    <tr>
                        <td colspan="5" class="p-8 text-center text-gray-500 italic">No activity logs found.</td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endif %}