{% extends 'base.html' %}
{% load partials %}

{% block content %}

<section class="flex justify-between">
    <h1 class="text-lg font-bold">Books</h1>

    <a href="{% url 'demo:book_create' %}"
       class="cursor-pointer py-2 px-4 bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white text-center text-base font-semibold focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg">
        New Book
    </a>
</section>


{% partialdef table inline=True %}
<div id="table">
    <div class="flex flex-col">
        <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
                <div class="overflow-x-auto">


                    {% if books_page.object_list %}
                    {% include "partials/table.html" with objects=books_page.object_list fields=fields
                    detail_view="demo:book_detail" delete_view="demo:book_delete" update_view="demo:book_update" %}
                    {% else %}
                    <p class="mt-8">There are no books. <a class="hover:underline cursor-pointer"
                                                           href="{% url 'demo:book_create' %}">Create one now?</a></p>
                    {% endif %}

                </div>
            </div>
        </div>
    </div>

    {% if books_page.paginator.num_pages > 1 %}
    {% include "partials/pagination.html" with page=books_page %}
    {% endif %}


</div>
{% endpartialdef %}
{% endblock content %}