{% extends 'base.html' %}
{% block content%}

<div class="container-fluid px-4 pt-2">
<div class="card mb-4">
    <div class="card-header">
        <i class="fas fa-table me-1"></i>
        Book List
    </div>
    <div class="card-body">
        <table id="datatablesSimple">
            <thead >
                <tr>
                    <th>Image</th>
                    <th>Title</th>
                    <th>Category</th>
                    <th>Author</th>
                    <th>Date Publish</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Image</th>
                    <th>Title</th>
                    <th>Category</th>
                    <th>Author</th>
                    <th>Date Publish</th>
                    <th>Action</th>
                </tr>
            </tfoot>
            <tbody>
                {% for book in books %}
                    <tr>
                        <td>
                        {% if book.image %}
                            <img src="{{ book.image.url }}" width="100px" height="70px" alt="">
                        {% endif %}
                        </td>
                        <td>{{ book.title }}</td>
                        <td>{{ book.category.name }}</td>
                        <td>{{ book.author }}</td>
                        <td>{{ book.date_publish }}</td>
                        <td>
                            <a class="btn btn-success col-2 mx-2" href="detail/{{book.id}}" role="button">Detail</a>
                            <a class="btn btn-secondary col-2 mx-2" href="edit/{{book.id}}" role="button">Edit</a>
                            <a class="btn btn-danger col-2 mx-2" href="delete/{{book.id}}" role="button" onclick="return confirm('Are you sure you want to delete {{book.title}}?')">Delete</a>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <div>
            <a class="btn btn-primary col-1 mx-3" href="{% url 'book-new' %}" role="button">Add Book</a>
        </div>
    </div>
</div>  
</div>
{% endblock content%}