offline-db/templates/search_results.html

{% extends 'base.html' %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="mb-8 flex flex-col md:flex-row justify-between items-center gap-4">
        <h1 class="text-3xl font-bold text-white">
            {% if query %}
                Results for "{{ query }}"
            {% elif selected_genre %}
                Genre: {{ selected_genre }}
            {% else %}
                All Anime
            {% endif %}
        </h1>

        <form role="search" aria-label="Search Results Filters" action="{% url 'search' %}" method="get" class="flex gap-2">
            <input type="text" name="q" aria-label="Search query" value="{{ query|default:'' }}" placeholder="Search..." class="bg-gray-800 text-white px-4 py-2 rounded-lg border border-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand focus:border-brand">
            <select name="genre" aria-label="Filter by genre" class="bg-gray-800 text-white px-4 py-2 rounded-lg border border-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand focus:border-brand">
                <option value="">All Genres</option>
                {% for genre in genres %}
                    <option value="{{ genre.name }}" {% if selected_genre == genre.name %}selected{% endif %}>{{ genre.name }}</option>
                {% endfor %}
            </select>
            <button type="submit" aria-label="Apply filters" class="bg-brand text-white px-6 py-2 rounded-lg hover:bg-opacity-80 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-brand">Filter</button>
        </form>
    </div>

    {% if results %}
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
            {% for anime in results %}
                <a href="{% url 'anime_detail' anime.id %}" class="group block relative rounded-xl overflow-hidden bg-gray-800 hover:shadow-2xl transition transform hover:-translate-y-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-darkbg focus-visible:ring-brand">
                    <div class="aspect-w-2 aspect-h-3 bg-gray-700">
                        {% if anime.cover_image %}
                            <img src="{{ anime.cover_image }}" alt="{{ anime.title }}" class="object-cover w-full h-full">
                        {% else %}
                            <div class="w-full h-full flex items-center justify-center text-gray-500">No Image</div>
                        {% endif %}
                    </div>
                    <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90"></div>
                    <div class="absolute bottom-0 p-4 w-full">
                        <h3 class="font-bold text-white text-lg truncate group-hover:text-brand transition">{{ anime.title }}</h3>
                        <p class="text-xs text-gray-400 mt-1 truncate">
                            {% for g in anime.genres.all %}
                                {{ g.name }}{% if not forloop.last %}, {% endif %}
                            {% endfor %}
                        </p>
                    </div>
                </a>
            {% endfor %}
        </div>
    {% else %}
        <div class="text-center py-20 bg-gray-800 rounded-xl border border-dashed border-gray-700">
            <h3 class="text-xl font-bold text-gray-400">No results found</h3>
            <p class="text-gray-500 mt-2">Try adjusting your search or filters.</p>
        </div>
    {% endif %}
</div>
{% endblock %}