<% if(books.length > 0) { %> 
    <h1 class="text-2xl mb-8 font-medium text-slate-600">Find Books</h1> 

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-0 lg:gap-4">
        <div class="col-span-3 grid grid-cols-2 md:grid-cols-3 gap-4 order-2 lg:order-1">
            <% books.forEach( book => { %>
        
                <%- include('../partials/bookCard.ejs', {
                    id: book.id,
                    image: book.coverImagePath,
                    title: book.title
                }) %> 
        
            <% } ) %> 
        </div>
        <div class="col-span-1 mb-8 lg:mb-0 order-1 lg:order-2">
            <form 
                action="/books" 
                method="GET" 
                class="px-6 pt-6 lg:pt-8 pb-4 bg-slate-100 rounded-lg shadow-sm min-w-full items-end
                    block md:grid md:grid-cols-4 md:gap-4 lg:gap-0 lg:block">
                <div class="flex flex-col mb-4">
                    <label for="title" class="text-sm text-slate-500 font-medium mb-1">Find by Title</label>
                    <input 
                        id="title"
                        type="text" name="title" 
                        class="py-1 pl-3 pr-1 bg-white rounded-lg shadow-sm text-slate-500 outline-none focus:shadow-md" 
                        value="<%= searchOptions.title %> ">
                </div>
                <div class="flex flex-col mb-4">
                    <label for="publishedAfter" class="text-sm text-slate-500 font-medium mb-1">Published After</label>
                    <input 
                        id="publishedAfter"
                        type="date" 
                        name="publishedAfter" 
                        class="py-1 pl-3 pr-1 bg-white rounded-lg shadow-sm text-slate-500 outline-none focus:shadow-md" 
                        value="<%= searchOptions.publishedAfter %> ">
                </div>
                <div class="flex flex-col mb-4">
                    <label for="publishedBefore" class="text-sm text-slate-500 font-medium mb-1">Published Before</label>
                    <input 
                        id="publishedBefore"
                        type="date" 
                        name="publishedBefore" 
                        class="py-1 pl-3 pr-1 bg-white rounded-lg shadow-sm text-slate-500 outline-none focus:shadow-md" 
                        value="<%= searchOptions.publishedBefore %> ">
                </div>
                <div class="flex flex-col mb-4">
                    <button 
                        type="submit" 
                        class="p-2 min-w-full bg-sky-400 rounded-full text-white hover:bg-sky-500">Search</button>
                </div>
            </form>
        </div>
    </div>
<% } else { %>
    <h1 class="text-2xl mb-8 font-medium text-slate-600">
        No books found. <a href="/books/new" class="text-sky-500 hover:text-sky-200">Add a book</a>
    </h1> 
<% } %>

