{% extends "base.html" %}

{% block content %}

    <section class="flex justify-between">

        <h1 class="text-lg font-bold">Book - {{book}} </h1>

        <a href="{% url 'demo:book_list' %}" class="text-blue-600 hover:underline hover:text-blue-500">
            All Books
        </a>
    </section>

    <ul class="py-5">
        
            <li>
                <span class="font-bold">ID:</span> {{book.id}}
            </li>
        
            <li>
                <span class="font-bold">title:</span> {{book.title}}
            </li>
        
            <li>
                <span class="font-bold">author:</span> {{book.author}}
            </li>
        
            <li>
                <span class="font-bold">published date:</span> {{book.published_date}}
            </li>
        
            <li>
                <span class="font-bold">isbn:</span> {{book.isbn}}
            </li>
        
            <li>
                <span class="font-bold">description:</span> {{book.description}}
            </li>
        
    </ul>


    <a class="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"
       href="{% url 'demo:book_update' book.pk %}">Edit</a>


{% endblock content %}