{% extends 'base.html' %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
      <div class="col-md-6 mt-5">
        <div class="card">
          <div class="card-header bg-primary text-white">Detail Book</div>
          <div class="card-body">
            <form>
              <div class="mb-3">
                <label for="id_title" class="form-label">Book Title</label>
                <input readonly type="text" name="title" id="id_title" value="{{ book.title }}" class="form-control" required>
              </div>
              <div class="mb-3">
                <label for="id_category">Category:</label>
                <input readonly type="text" name="category" id="id_title" value="{{ book.category.name }}" class="form-control" required>
              </div>
              <div class="mb-3">
                <label for="id_author" class="form-label">Author</label>
                <input readonly type="text" name="author" id="id_author" value="{{ book.author }}" class="form-control" required>
              </div>
              <div class="mb-3">
                <label for="id_publisher" class="form-label">Publisher</label>
                <input readonly type="text" name="publisher" id="id_publisher" value="{{ book.publisher }}" class="form-control" required>
              </div>
              <div class="mb-3">
                <label for="id_date_publish">Date Publish:</label>
                <input readonly type="number" name="date_publish" id="id_date_publish" value="{{ book.date_publish }}" class="form-control" required>
              </div>
              <div class="mb-3">
                <p>Image</p>
                <img src="{{ book.image.url }}" width="200px" height="150px" alt="">
              </div>
              <div class="mb-3">
                <label for="id_isbn" class="form-label">ISBN</label>
                <input readonly type="text" name="isbn" id="id_isbn" value="{{ book.isbn }}" class="form-control" required>
              </div>
              <a class="btn btn-primary col-2 mx-2" href="{% url 'book-edit' book.pk %}"" role="button">Edit</a>
              <a class="btn btn-danger col-2 mx-2" href="{% url 'book-delete' book.pk %}"" role="button">Delete</a>
              <a class="btn btn-warning col-2 mx-2" href="{% url 'book-list' %}"" role="button">Back</a>
            </form>
          </div>
        </div>
      </div>
    </div>
</div>

{% endblock %}