{% 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 Loan List
        </div>
        <div class="card-body">
            <table id="datatablesSimple">
                <thead>
                    <tr>
                        <th>Book Title</th>
                        <th>Member Name</th>
                        <th>Loan Date</th>
                        <th>Due Date</th>
                        <th>Return Date</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Book Title</th>
                        <th>Member Name</th>
                        <th>Loan Date</th>
                        <th>Due Date</th>
                        <th>Return Date</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </tfoot>
                <tbody>
                    {% for book_loan in book_loan %}
                        <tr>
                            <td>{{ book_loan.book.title }}</td>
                            <td>{{ book_loan.member.name }}</td>
                            <td>{{ book_loan.loan_date }}</td>
                            <td>{{ book_loan.due_date }}</td>
                            <td>{{ book_loan.return_date|default:"Not Returned" }}</td>
                            <td>{% if book_loan.is_returned %}Returned{% else %}Not Returned{% endif %}</td>
                            <td>
                                <a class="btn btn-secondary col-3 mx-2" href="{% url 'book_loan_edit' id=book_loan.id %}" role="button">Edit</a>
                                <a class="btn btn-danger col-3 mx-2" href="delete/{{book_loan.id}}" role="button" onclick="return confirm('Are you sure you want to delete?')">Delete</a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
                
            <div>
                <a class="btn btn-primary col-2 mx-3" href="{% url 'book_loan_new' %}" role="button">Add Book Loan</a> 
            </div>
        </div>
    </div>  
</div>

{% endblock content%}