{% extends 'base.html' %}

{% block content %}
<div class="explore-books-container">
    <h1>Explore Books</h1>
    <div class="books-grid">
        {% for book in books %}
        <a href="{% url 'book_detail' book.id %}" class="book-card">
            <img src="{{book.cover_image.url}}" alt="{{book.title}}" class="book-cover">
            <h3 class="book-title">{{book.title}}</h3>
            <p class="book-author">{{book.author}}</p>
        </a>
        {% empty %}
        <p>No books to display.</p>
        {% endfor %}
    </div>
</div>
{% endblock %}