<div>
    <div class="px-4">
        <div class="sm:flex sm:flex-col sm:items-center">
            <div class="flex flex-col md:flex-row justify-between w-full my-4">
                <h1 class="text-base font-semibold leading-6 text-gray-900">Mosaics</h1>
                <livewire:components.pending-message :project="$project" type="mosaics"></livewire:components.pending-message>
            </div>
            <div class="flex flex-col md:flex-row mt-4 items-center md:justify-between w-full gap-2">
                <x-search class="flex-1 w-full"></x-search>
                @manager
                <x-button wire:click="openCreateMosiacsModal"
                          class="justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                    Create Mosaic
                </x-button>
                @endmanager
            </div>
        </div>
        <div class="mt-8 flow-root">
            <div class="">
                <div class="relative">
                    <div class="inline-block min-w-full py-2 align-middle">
                        <table class="min-w-full divide-y divide-gray-300">
                            <thead>
                            <tr>
                                <th scope="col"
                                    class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 lg:pl-8">
                                    {{__('Name')}}
                                </th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                                    {{__('Start')}}
                                </th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                                    {{__('End')}}
                                </th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                                    {{__('Range (days)')}}
                                </th>
                                <th scope="col"
                                    class="px-3 py-3.5 text-right text-sm font-semibold text-gray-900 sm:pr-8 lg:pr-8">
                                    Status
                                </th>
                            </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200 bg-white">
                            @foreach($mosaics as $mosaic)
                                <tr>
                                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">{{ $mosaic->name }}</td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                                        {{ $mosaic->end_date->copy()->subDays($mosaic->offset)->format('Y-m-d') }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                                        {{ $mosaic->end_date->format('Y-m-d') }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                                        {{ $mosaic->offset }}
                                    </td>
                                    <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
                                        <livewire:components.badge :status="$mosaic->status" :id="$mosaic->id" type="mosaic" wire:key="{{$mosaic->id}}"></livewire:components.badge>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="pt-4 flex justify-between items-center">
                        <div class="text-gray-700 text-sm">
                            Results: {{ \Illuminate\Support\Number::format($mosaics->total()) }}
                        </div>
                        {{ $mosaics->links('livewire.pagination') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <x-mosaic-create-modal :manager="$this"/>
</div>

