<x-filament::section class="mt-4" icon="heroicon-o-clipboard-document-list">
    <x-slot name="heading">{{ __('Activity Log') }}</x-slot>
    <x-slot name="description">{{ __('Recent actions performed in your account.') }}</x-slot>

    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead class="bg-gray-50 dark:bg-gray-800">
                <tr>
                    <th class="px-4 py-3 text-left fi-section-header-heading">{{ __('Time') }}</th>
                    <th class="px-4 py-3 text-left fi-section-header-heading">{{ __('Category') }}</th>
                    <th class="px-4 py-3 text-left fi-section-header-heading">{{ __('Action') }}</th>
                    <th class="px-4 py-3 text-left fi-section-header-heading">{{ __('Description') }}</th>
                    <th class="px-4 py-3 text-left fi-section-header-heading">{{ __('IP') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                @forelse($this->getActivityLogs() as $log)
                    <tr>
                        <td class="px-4 py-3 fi-section-header-description">{{ $log->created_at?->format('Y-m-d H:i') }}</td>
                        <td class="px-4 py-3 fi-section-header-description">{{ $log->category }}</td>
                        <td class="px-4 py-3 fi-section-header-description">{{ $log->action }}</td>
                        <td class="px-4 py-3 fi-section-header-description">{{ $log->description }}</td>
                        <td class="px-4 py-3 fi-section-header-description">{{ $log->ip_address }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-4 py-6 text-center fi-section-header-description">
                            {{ __('No activity recorded yet.') }}
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</x-filament::section>
