{{-- The data table --}}
<div class="flex flex-col">
	<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
		<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">           
			<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                <div class="bg-white px-4 py-3 sm:px-6 flex">
                    <input 
                        wire:model="search"
                        class="form-input rounded-md shadow-sm mt-1 block w-full" 
                        type="text" 
                        placeholder="Buscar referencias"
                    >
                    <select wire:model="sectionFilter" class="form-input rounded-md shadow-sm mt-1 block ml-4 text-sm text-gray-500">
                        <option value="0">Filtrar por sección</option>
                        @foreach ($sections as $section)
                            <option value="{{ $section->id }}">{{ $section->name }}</option>
                        @endforeach
                    </select>
                    
                    {{-- <select wire:model="sectionFilter" class="form-input rounded-md shadow-sm mt-1 block ml-4 text-sm text-gray-500">
                        <option value="0">Filtrar por sección</option>
                        @foreach ($sections as $key => $children)
                            <optgroup label="{{ $key }}">
                                @foreach ($children as $section)
                                    <option value="{{ $section->id }}">{{ $section->name }}</option>
                                @endforeach
                            </optgroup>
                        @endforeach
                    </select> --}}
                    <select wire:model="perPage" class="form-input rounded-md shadow-sm mt-1 block ml-4 text-sm text-gray-500">
                        <option value="10">10 por página</option>
                        <option value="25">25 por página</option>
                        <option value="50">50 por página</option>
                        <option value="100">100 por página</option>
                    </select>
                    @if($search != '')
                        <button wire:click="clearFilters" class="form-input rounded-md shadow-sm mt-1 block ml-4 text-sm text-gray-500 outline-none">X</button>
                    @endif
                </div>
                @if ($books->count())
                    <table class="min-w-full divide-y divide-gray-200 table-fixed">
                        <thead>
                            <tr>
                                <th class="w-1/4 px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Título</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Autoría</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Editorial</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Año</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Sección</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Disponible</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"></th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach ($books as $book)
                                <tr onclick="location.href='{{route('bookDetails', $book->id)}}'" class="cursor-pointer">

                                    <td class="px-6 py-4">
                                        <div class="flex items-center">
                                            @isset($book->profile_image)
                                                <div class="flex-shrink-0 h-10 w-10">
                                                        <img class="h-10 w-10" src="{{ $book->profileImageThumb() }}" alt="">
                                                </div>
                                                <div class="ml-4">
                                            @endisset
                                                    <div class="text-sm font-bold text-gray-900">
                                                        {{ $book->title }}
                                                    </div>
                                            @isset($book->profile_image)
                                                </div>
                                            @endisset
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 text-sm">{{ $book->author }}</td>
                                    <td class="px-6 py-4 text-sm">{{ $book->publisher }}</td>
                                    <td class="px-6 py-4 text-sm whitespace-nowrap">{{ $book->year }}</td>
                                    <td class="px-6 py-4 text-sm">{{ $book->name }}</td>
                                    <td class="px-6 py-4 text-sm whitespace-nowrap">
                                        @if($book->canBeLended())
                                            <svg class="h-6 w-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" fill="green">
                                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                                            </svg>
                                        @else
                                        <svg class="h-6 w-6 text-gray-500" fill="none" stroke="#FF0000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path></svg>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 text-right text-sm whitespace-nowrap">
                                        <a href="{{route('bookDetails', $book->id)}}" class="inline-flex items-center justify-center px-3 py-1 border border-transparent text-base font-sm rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
                                            Ver más
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="bg-white px-4 py-3 border-t border-gray-200 sm:px-6">
                        {{ $books->links() }}
                    </div>
                @else
                    <div class="px-6 py-4 text-sm whitespace-no-wrap" colspan="6">No hay resultados para la búsqueda <em>{{ $search }}</em> en la página {{ $page }} mostrando {{ $perPage }} resultados por página.</div>
                @endif
            </div>
        </div>
    </div>
</div>