{% extends 'master.html' %}
{% load static %}
{% block content %}
<div class="container mt-5">
    <h2 class="text-white mb-4 text-center">Search Results for "{{ query }}"</h2>

    {% if results %}
    <div class="row">
        <h2 class="text-center text-Primary">Search Results</h2>
        {% for template in results %}
        <div class="col-md-4 mb-4">
            <div class="card shadow-sm border-0 position-relative template-card">
                <div class="image-container position-relative">
                    <img src="{{ template.image.url }}" class="card-img-top" alt="{{ template.name }}">
                    <a href="{% url 'adtemplate_detail' template.id %}" class="btn btn-secondary position-absolute top-50 start-50 translate-middle fade-button">View Details</a>
                </div>
                <div class="card-body text-white text-center">
                    <h5 class="card-title">{{ template.name }}</h5>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <!-- No Results Found Section -->
    <div class="text-center mt-5 mb-5">
        <img src="{% static 'img/no-results.avif' %}" alt="No Results Found" class="img-fluid" style="max-width: 250px; opacity: 0.8;">
        <h3 class="text-secondary mt-4">No results found</h3>
        <p class="text-dark">We couldn't find anything matching "<strong>{{ query }}</strong>". Try searching with different keywords.</p>
        <a href="{% url 'adtemplate_list' %}" class="btn btn-outline-primary mt-3">Browse All Templates</a>
    </div>
    {% endif %}
</div>

<style>
    .template-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 10px;
        overflow: hidden;
        transition: transform 0.3s ease-in-out;
        height: 100%;
    }

    .template-card:hover {
        transform: translateY(-5px);
    }

    .image-container {
        width: 100%;
        height: 200px; /* Fixed height for consistent card size */
        overflow: hidden;
    }

    .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .fade-button {
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        padding: 10px 20px;
    }

    .image-container:hover .fade-button {
        opacity: 1;
    }
</style>

{% endblock %}