@extends('layouts.universal', ['title' => 'Sticker Packs'])

@section('content')
    <div class="mb-4">
        <a href="{{ route('universal.sticker-packs.create') }}">
            <button type="button" class="bg-500 py-2 px-4 bg-green-500 rounded-md">
                New Sticker Pack
            </button>
        </a>
    </div>

    <div class="relative overflow-x-auto">
        <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                <tr>
                    <th scope="col" class="px-6 py-3">
                        Sticker Pack name
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Sticker Pack Icon
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Sticker Count
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody>

                @forelse ($stickerPacks as $stickerPack)
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">

                        <td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            {{ $stickerPack->name }}
                        </td>
                        <td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            <img class="h-8 w-8 rounded-full"  src="{{ $stickerPack->icon?->get_thumb_url }}" alt="">
                        </td>
                        <td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            {{ $stickerPack->stickers_count }}
                        </td>
                        <td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            <a href="{{ route('universal.sticker-packs.show', ['sticker_pack' => $stickerPack]) }}"
                                title="View">
                                <x-icons.eye />
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                        <td colspan="4"
                            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white text-center">
                            No sticker packs found
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>

        {{ $stickerPacks->links() }}
    </div>
@endsection