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

{% block scripts %}
    <script src="{% static 'books/detail_book.js' %}" defer></script>
{% endblock scripts %}

{% block title %}book detail{% endblock title %}


{% block content %}
{% include 'components/header.html' with title=object.title.title description=object.title.publisher.name is_go_back=True %}

<div class="flex justify-center">
    <div>
        <div class="text-center mb-3">
            {% if object.is_available %}
                <a href="{% url 'rentals:new' object.id %}" class="p-3 bg-sky-500 hover:bg-sky-600 rounded-lg text-white">rent</a>
                {% if object.status %}
                    {{object.status}}
                {% else %}
                    never rented
                {% endif %}
            {% else %}
                not available
            {% endif %}
        </div>
        <img src="{{object.qr_code.url}}" alt="{{object.isbn}}" class="w-52 h-52 rounded-lg" >
        <div class="mt-7 text-center">
            {% if not object.is_available %}
                <a href="{% url 'rentals:update' object.id object.rental_id %}" class="bg-yellow-500 hover:bg-yellow-600 text-white dark:text-slate-900 rounded p-3">change status</a>
            {% endif %}
            <a href="{% url 'rentals:detail' object.id %}" class="bg-rose-500 hover:bg-rose-600 rounded p-3 text-white">history</a>
        </div>
    </div>  
</div>

<div class="flex justify-center">
    <div class="mt-10 p-3 rounded-lg relative bg-slate-200 dark:bg-slate-600 border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 drop-shadow-md w-1/2">
        <div id="book-id-box">{{object.id}}</div>
        <div class="dark:text-white absolute right-3 top-3" id="copy-btn-box">
            <i class="fa-regular fa-copy fa-xl cursor-pointer"></i>
        </div>
</div>


{% endblock content %}