{% extends "layout.html" %} {% block dashboard %}
<div style="max-width: 80vw" class="w-100 p-4">
  <div class="d-flex justify-content-between pb-4">
    <div class="d-flex gap-2 pb-4">
      <a class="btn btn-success" href="/books/{{ book.id }}/update">
        <i class="bi bi-pencil-square"></i> Edit
      </a>
      <a class="btn btn-danger" href="/books/{{ book.id }}/delete/">
        <i class="bi bi-trash3-fill"></i> Delete
      </a>
    </div>
  </div>
  {% if book.cover_image %}
  <div class="d-flex gap-5">
    <img
      class="object-fit-contain"
      height="360"
      src="{{ book.cover_image.url }}"
      alt="{{ book.title }}"
    />
    <div class="col">
      <h1 class="h2 row">{{ book.title }}</h1>
      
      <div class="row d-flex flex-collumn gap-2">
        <span class="row">Author: {{ book.author }}</span>
        <span class="row">Rating: {{ book.rating }}</span>
        <time class="row">Published Date: {{ book.publish_date }}</time>  
      <div/>

      <p class="fs-5 row text-secondary">{{ book.description }}</p>
      <p class="row badge text-bg-secondary">{% if book.category.name is None %}uncategories {% else %}{{book.category.name}}{% endif %}</p>
      <time datetime="{{ book.created_at }}" class="row fs-6"
        >Created at: {{ book.created_at }}</time
      >
      <time datetime="{{ book.updated_at }}" class="row fs-6"
        >Updated at: {{ book.updated_at }}</time
      >
    </div>
  </div>
  {% endif %}
</div>
{% endblock dashboard %}