{% extends 'base.html' %}

{% block title %}
  Transactions - {{ project_name }}
{% endblock title %}

{% block content %}
<div class="container mt-5">
    <div class="d-flex justify-content-between align-items-center mb-5">
        <div class="text-center flex-grow-1">
            <h1 class="display-4">Transaction Log</h1>
            <p class="lead">History of all book issues and returns.</p>
        </div>
        <a href="{% url 'index' %}" class="btn btn-primary">Back to Catalog</a>
    </div>

    <div class="table-responsive">
        <table class="table table-striped table-hover">
            <thead class="table-dark">
                <tr>
                    <th scope="col">Book Title</th>
                    <th scope="col">Borrower Name</th>
                    <th scope="col">Issue Date</th>
                    <th scope="col">Return Date</th>
                    <th scope="col">Status</th>
                    <th scope="col">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for transaction in transactions %}
                <tr>
                    <td>{{ transaction.book.title }}</td>
                    <td>{{ transaction.borrower_name }}</td>
                    <td>{{ transaction.issue_date|date:"Y-m-d H:i" }}</td>
                    <td>{{ transaction.return_date|date:"Y-m-d H:i"|default:"--" }}</td>
                    <td>
                        {% if transaction.is_returned %}
                            <span class="badge bg-success">Returned</span>
                        {% else %}
                            <span class="badge bg-warning text-dark">Issued</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if not transaction.is_returned %}
                            <a href="{% url 'return_book' transaction.id %}" class="btn btn-info btn-sm">Return</a>
                        {% endif %}
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="6" class="text-center">No transactions found.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock content %}
