<flux:main>
    <div class="flex justify-between items-center">
        <div>
            <flux:heading size="xl">{{ $pageTitle }}</flux:heading>
        </div>
        <div>
            <flux:button href="{{ route('studio.catalog.' . $module . '.index') }}" wire:navigate.hover class="text-sm">
                Kembali
            </flux:button>
        </div>
    </div>

    <div class="mt-6 space-y-2">
        @forelse ($activityLogs as $log)
            <flux:card class="p-4 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition text-gray-500 dark:text-gray-300">
                <div class="flex justify-between items-center mb-2">
                    <div class="text-md">{{ $log['log_name'] }}</div>
                    <div class="text-md">{{ $log['created_at'] }}</div>
                    <div class="text-md">{{ $log['user'] }}</div>
                    <span
                        class="px-2 py-1 inline-flex text-xs font-semibold rounded-full
                        bg-{{ $log['event']['color'] }}-200 text-{{ $log['event']['color'] }}-800
                        dark:bg-{{ $log['event']['color'] }}-800 ">
                        {{ $log['event']['label'] }}
                    </span>
                </div>

                <flux:separator class="my-2
                        dark:border-gray-700" />

                <div class="flex flex-wrap gap-4 text-sm ">
                    <div>Stok Sebelumnya: {{ $log['previous_stock'] }}</div>
                    <flux:separator vertical class="dark:border-gray-700" />
                    <div>Perubahan: {{ $log['quantity_change'] }}</div>
                    <flux:separator vertical class="dark:border-gray-700" />
                    <div>Total Stok: {{ $log['new_stock'] }}</div>
                </div>

                <flux:separator class="my-2 dark:border-gray-700" />

                <p class="mt-2text-sm truncate">
                    {{ $log['description'] }}
                </p>
            </flux:card>
        @empty
            <div class="flex justify-center flex-col">
                <dotlottie-wc src="https://lottie.host/4282c234-6d0f-4a8d-ad04-3d82f2783814/FuhTCVgPGi.lottie" autoplay
                    loop style="width: 200px; height: 200px; margin: 0 auto;">
                </dotlottie-wc>
                <flux:text class="block text-center italic mt-5">
                    Yahhh, sepertinya belum ada data yang tersedia.
                </flux:text>
            </div>
        @endforelse
    </div>

</flux:main>
@assets
    <script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
@endassets
