{% extends "master.html" %}
{% load static %}

{% block content %}
<div class="container py-5 mt-5">
    <h1 class="text-center text-uppercase fw-bold mb-4">Templates for {{ category.name }}</h1>

    {% if templates %}
    <div class="row mt-4 g-4">
        {% for template in templates %}
        <div class="col-md-4">
            <div class="card template-card border-0 shadow-lg rounded-lg overflow-hidden mb-4">
                <div class="position-relative template-image-container">
                    <img src="{{ template.image.url }}" class="img-fluid w-100" alt="{{ template.name }}">
                    <div class="overlay d-flex align-items-center justify-content-center">
                        <a href="{% url 'adtemplate_detail' template.id %}" class="btn btn-primary shadow-sm rounded-pill px-4">View Details</a>
                    </div>
                </div>
                <div class="card-body text-center">
                    <h5 class="card-title fw-semibold">{{ template.name }}</h5>
                    {% comment %} <p class="text-muted">{{ template.description|truncatewords:15 }}</p> {% endcomment %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="alert alert-warning text-center mt-4" role="alert">
        No templates found in this category.
    </div>
    {% endif %}
</div>

<style>
    /* Hover effect for card */
    .template-card {
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }

    .template-card:hover {
        transform: scale(1.03);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    /* Image container styling */
    .template-image-container {
        position: relative;
        overflow: hidden;
        height: 250px;
        background-color: #f8f9fa; /* Light gray background */
    }

    .template-image-container img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Ensures full image visibility */
    }

    /* Overlay effect */
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    .template-image-container:hover .overlay {
        opacity: 1;
    }

    /* Button styling */
    .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
        transition: background 0.3s ease-in-out;
    }

    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #004b9a;
    }
</style>
{% endblock %}