fix: sifting book to use reusable template

books/templates/book_create_form.html

-<form
-  class="modal fade"
-  id="book_modal_create"
-  tabindex="-1"
-  aria-labelledby="book_modal_label"
-  aria-hidden="true"
-  action="/dashboard/books/"
-  method="POST"
->
-  <div class="modal-dialog modal-dialog-centered">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h1 class="modal-title fs-5" id="exampleModalLabel">Input Data</h1>
-        <button
-          type="button"
-          class="btn-close"
-          data-bs-dismiss="modal"
-          aria-label="Close"
-        ></button>
-      </div>
-      <div class="modal-body">
-        {% csrf_token %} {% for field in form %}
-        <div class="form-outline form-white mb-3">{{ field }}</div>
-        {% endfor %}
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
-          Close
-        </button>
-        <button type="submit" class="btn btn-primary">Submit</button>
-      </div>
-    </div>
-  </div>
-</form>

books/templates/book_delete_form.html

-{% for book in books %}
-<form
-  class="modal fade"
-  id="book_delete_modal_{{ book.id }}"
-  tabindex="-1"
-  aria-labelledby="book_delete_label"
-  aria-hidden="true"
-  action="/dashboard/books/{{ book.id }}/delete/"
-  method="POST"
->
-  {% csrf_token %}
-  <div class="modal-dialog modal-dialog-centered">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h1 class="modal-title fs-5" id="exampleModalLabel">
-          Are you sure want to delete <b>{{ book.title }}</b>?
-        </h1>
-        <button
-          type="button"
-          class="btn-close"
-          data-bs-dismiss="modal"
-          aria-label="Close"
-        ></button>
-      </div>
-      <div class="modal-body">
-        Once data is deleted, it cannot be restored.
-        <input type="hidden" name="id" id="almacen_id" />
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
-          Cancel
-        </button>
-        <button type="submit" class="btn btn-danger">Continue</button>
-      </div>
-    </div>
-  </div>
-</form>
-{% endfor %}

books/templates/book_table_data.html

@@ -10,7 +10,7 @@
     </tr>
   </thead>
   <tbody>
-    {% if books %} {% for book in books %}
+    {% if object_list %} {% for book in object_list %}
     <tr>
       <td>{{ book.title }}</td>
       <td>{{ book.stock }}</td>
@@ -18,19 +18,12 @@
       <td>{{ book.created_at }}</td>
       <td>{{ book.updated_at }}</td>
       <td class="d-flex gap-2">
-        <a
-          class="btn btn-success"
-          href="/dashboard/books/{{ book.id }}/update/"
-        >
+        <a class="btn btn-success" href="/dashboard/books/{{ book.id }}/">
           <i class="bi bi-pencil-square"></i>
         </a>
-        <button
-          class="btn btn-danger"
-          data-bs-toggle="modal"
-          data-bs-target="#book_delete_modal_{{ book.id }}"
-        >
+        <a class="btn btn-danger" href="/dashboard/books/{{ book.id }}/delete/">
           <i class="bi bi-trash3-fill"></i>
-        </button>
+        </a>
       </td>
     </tr>
     {% endfor %} {% else %}

books/templates/book_update_form.html

-{% extends "layout.html" %} {% block dashboard %}
-<div style="max-width: 80vw" class="w-100 p-4">
-  <div class="d-flex flex-column gap-2 mb-4">
-    <form
-      id="book_update_modal_{{ book_id }}"
-      action="/dashboard/books/{{ book_id }}/update/"
-      method="POST"
-    >
-      {% csrf_token %}
-      <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h1 class="modal-title fs-5">Input Data</h1>
-          </div>
-          <div class="modal-body">
-            {% for field in form %}
-            <div class="form-outline form-white mb-3">{{ field }}</div>
-            {% endfor %}
-            <div class="d-flex gap-2">
-              <a href="/dashboard/books/" class="btn btn-secondary"> Cancel </a>
-              <button type="submit" class="btn btn-primary">Submit</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-</div>
-{% endblock dashboard %}

books/templates/book.html → books/templates/books.html

 {% extends "layout.html" %} {% block dashboard %}
 <div style="max-width: 80vw" class="w-100 p-4">
-  {% include "book_create_form.html" %}
   <div class="d-flex gap-2 pb-4">
     {% include "order_form.html" %}
-    <button
-      type="button"
-      class="btn btn-primary"
-      data-bs-toggle="modal"
-      data-bs-target="#book_modal_create"
-    >
+    <a type="button" class="btn btn-primary" href="/dashboard/books/add">
       <i class="bi bi-plus-circle"></i> Add Book
-    </button>
+    </a>
     {% include "search_form.html" %}
   </div>
-  {% include "book_table_data.html" %} {% include "book_delete_form.html" %}
+  {% include "book_table_data.html" %}
 </div>
 {% endblock dashboard %}