{% extends 'base.html' %}


{% block title %}{{ q }}{% endblock %}

{% block content %}


<!-- Content Sections -->
<div class="py-24 bg-gray-900 min-h-screen">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Search Movies -->
        <section class="mb-16" data-aos="fade-up">
            <h2 class="text-2xl font-bold mb-6 flex items-center">
                <i data-feather="search" class="mr-2 text-red-500"></i>Resultado da pesquisa: {{ q }}
            </h2>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
                {% for movie in movies %}
                    <a href="{% url 'detail_movie_page' movie.uuid %}" class="content-card">
                        <div class="relative rounded-lg overflow-hidden">
                            <img src="{{ movie.image_card.url }}" alt="{{ movie.title }}" class="w-full h-64 object-cover">
                            <div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-50 transition-all duration-300 flex items-center justify-center">
                                <i data-feather="play-circle" class="text-white text-4xl opacity-0 hover:opacity-100 transition-opacity duration-300"></i>
                            </div>
                        </div>
                        <h3 class="mt-2 font-medium">{{ movie.title }}</h3>
                    </a>
                {% empty %}
                    <p class="text-gray-500">Nenhum filme encontrado.</p>
                {% endfor %}
            </div>
        </section>
    </div>
</div>
{% endblock %}