{% extends 'base.html' %}
{% load static %}

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

{% block content %}
<div class="container mt-5">
    <div class="text-center mb-5">
        <h1 class="display-4">Public Library Catalog</h1>
        <p class="lead">Browse our collection of available books.</p>
    </div>

    <div class="table-responsive">
        <table class="table table-striped table-hover">
            <thead class="table-dark">
                <tr>
                    <th scope="col">Title</th>
                    <th scope="col">Author</th>
                    <th scope="col">ISBN</th>
                    <th scope="col">Available Copies</th>
                </tr>
            </thead>
            <tbody>
                {% for book in books %}
                <tr>
                    <td>{{ book.title }}</td>
                    <td>{{ book.author }}</td>
                    <td>{{ book.isbn }}</td>
                    <td>{{ book.available_copies }} / {{ book.total_copies }}</td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="4" class="text-center">No books available at the moment.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}
