{% extends "base.html" %}
{% block content %}
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
    <h2>📚 Books Library</h2>
    {% if current_user.can_manage_books() %}
    <a href="{{ url_for('add_book') }}" class="btn btn-success">+ Add New Book</a>
    {% endif %}
</div>

<div class="card">
    <form method="GET" style="display: grid; grid-template-columns: 1fr 200px 200px auto; gap: 1rem;">
        <input type="text" name="q" placeholder="Search by title, author, or ISBN..." value="{{ query }}">
        <select name="category">
            <option value="">All Categories</option>
            {% for cat in categories %}
            <option value="{{ cat }}" {% if cat == selected_category %}selected{% endif %}>{{ cat }}</option>
            {% endfor %}
        </select>
        <select name="available">
            <option value="">All Books</option>
            <option value="true" {% if available_only %}selected{% endif %}>Available Only</option>
        </select>
        <button type="submit" class="btn">Search</button>
    </form>
</div>

<div class="card">
    <table>
        <tr>
            <th>Book ID</th>
            <th>Title</th>
            <th>Author</th>
            <th>Category</th>
            <th>Shelf No</th>
            <th>Total</th>
            <th>Available</th>
            <th>Status</th>
            {% if current_user.can_manage_books() %}
            <th>Actions</th>
            {% endif %}
        </tr>
        {% for book in books %}
        <tr>
            <td>{{ book.book_id }}</td>
            <td><strong>{{ book.title }}</strong></td>
            <td>{{ book.author }}</td>
            <td>{{ book.category }}</td>
            <td>🗂️ {{ book.shelf_no }}</td>
            <td>{{ book.total_copies }}</td>
            <td>{{ book.available_copies }}</td>
            <td>
                {% if book.is_available() %}
                <span style="color: #27ae60;">✓ Available</span>
                {% else %}
                <span style="color: #e74c3c;">✗ Not Available</span>
                {% endif %}
            </td>
            {% if current_user.can_manage_books() %}
            <td>
                <a href="{{ url_for('edit_book', book_id=book.book_id) }}" class="btn" style="padding: 0.5rem 1rem;">Edit</a>
                <form method="POST" action="{{ url_for('delete_book', book_id=book.book_id) }}" style="display: inline;">
                    <button type="submit" class="btn btn-danger" style="padding: 0.5rem 1rem;" onclick="return confirm('Delete this book?')">Delete</button>
                </form>
            </td>
            {% endif %}
        </tr>
        {% else %}
        <tr><td colspan="9" style="text-align: center;">No books found</td></tr>
        {% endfor %}
    </table>
</div>
{% endblock %}