@extends('layouts.app')

@section('content')
    <div class="mb-6">
        <h1 class="text-title-md font-semibold text-gray-800 dark:text-white/90">{{ __('Activity Log') }}</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400">{{ __('Track important actions.') }}</p>
    </div>

    <div class="overflow-x-auto rounded-2xl border border-gray-200 bg-white shadow-theme-xs dark:border-gray-800 dark:bg-gray-900">
        <table class="w-full text-left text-sm text-gray-600 dark:text-gray-400">
            <thead class="text-xs uppercase text-gray-400 dark:text-gray-500">
                <tr>
                    <th class="px-5 py-4">{{ __('User') }}</th>
                    <th class="px-5 py-4">{{ __('Action') }}</th>
                    <th class="px-5 py-4">{{ __('Description') }}</th>
                    <th class="px-5 py-4">{{ __('Date') }}</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($logs as $log)
                    <tr class="border-t border-gray-100 dark:border-gray-800">
                        <td class="px-5 py-4">{{ $log->user?->name ?? __('System') }}</td>
                        <td class="px-5 py-4">{{ __(\Illuminate\Support\Str::headline(str_replace('_', ' ', $log->action))) }}</td>
                        <td class="px-5 py-4">{{ __($log->description) }}</td>
                        <td class="px-5 py-4">{{ $log->created_at->translatedFormat('M d, Y H:i') }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="px-5 py-8 text-center text-gray-500">{{ __('No activity yet.') }}</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-4">
        {{ $logs->links() }}
    </div>
@endsection