{% extends 'master.html' %}
{% load static %}
{% block content %}

<!-- Hero Section -->
<div class="container-xxl bg-primary hero-header">
    <div class="container px-lg-5">
        <div class="row g-5 align-items-end">
            <div class="col-lg-6 text-center text-lg-start">
                <h1 class="text-white mb-4 animated slideInDown fw-bold">"Smart Ads, Simplified"</h1>
                <p class="text-white pb-3 animated slideInDown lead">
                    Effortlessly create, schedule, and track ads with our intuitive platform. Creativity meets precision for campaigns that stand out.
                </p>
                <a href="#" class="btn btn-secondary text-white py-sm-3 px-sm-5 rounded-pill me-3 animated slideInLeft fw-semibold">
                    Explore
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Explore Ad Categories Section (Slider) -->
<div class="container mt-5 mb-5">
    <h2 class="text-center fw-bold mb-4">Explore Ad Categories</h2>
    <div id="categoryCarousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            {% for category in categories %}
                {% if forloop.counter0|divisibleby:3 %}
                <div class="carousel-item {% if forloop.first %}active{% endif %}">
                    <div class="row justify-content-center">
                {% endif %}
                        <div class="col-sm-6 col-md-4">
                            <div class="category-card">
                                <img src="{{ category.image.url }}" class="img-fluid rounded" alt="Category Image">
                                <div class="category-overlay">
                                    <a href="{% url 'category_detail' category.id %}" class="btn btn-light btn-sm fw-bold">View Templates</a>
                                </div>
                            </div>
                        </div>
                {% if forloop.counter|divisibleby:3 or forloop.last %}
                    </div>
                </div>
                {% endif %}
            {% empty %}
                <p class="text-center text-muted">No categories available.</p>
            {% endfor %}
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#categoryCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#categoryCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
        </button>
    </div>
</div>

<!-- Explore Ad Templates Section -->
<div class="container mt-5 mb-5">
    <h2 class="text-center fw-bold mb-4">Explore Ad Templates</h2>
    <div class="row mt-4 g-4">
        {% for template in templates %}
            <div class="col-sm-6 col-md-4">
                <div class="template-card shadow-sm">
                    <a href="{% url 'adtemplate_detail' template.id %}" class="d-block text-decoration-none">
                        <div class="template-img-container">
                            <img src="{{ template.image.url }}" class="img-fluid rounded" alt="Ad Template">
                        </div>
                        <div class="template-info text-center p-3">
                            <h5 class="fw-semibold text-dark">{{ template.name }}</h5>
                        </div>
                    </a>
                </div>
            </div>
        {% empty %}
            <p class="text-center text-muted">No templates available.</p>
        {% endfor %}
    </div>
    
</div>

<!-- Custom Styles -->
<style>
/* General Styles */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fa;
    color: #333;
}

/* Category Cards */
.category-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
    background: #fff;
    padding: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.category-card img {
    width: 100%;
    height: 200px;
    object-fit: contain; /* Ensure full image visibility */
    border-radius: 12px;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.category-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 12px;
}

.category-card:hover .category-overlay {
    opacity: 1;
}

.category-overlay a {
    padding: 8px 16px;
    font-weight: 600;
}

/* Template Cards */
.template-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.template-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}

.template-img-container {
    overflow: hidden;
    border-bottom: 1px solid #ddd;
}

.template-img-container img {
    width: 100%;
    height: 200px; /* Maintain uniform size */
    object-fit: contain; /* Prevent cropping */
    transition: transform 0.3s ease-in-out;
    background-color: #f8f9fa; /* Optional background */
}

.template-card:hover .template-img-container img {
    transform: scale(1.05);
}

.template-info {
    padding: 15px;
    min-height: 70px; /* Ensure consistent height */
}

.template-info h5 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

/* Carousel Controls */
.carousel-control-prev, .carousel-control-next {
    width: 6%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 10px;
    transition: background-color 0.3s ease-in-out;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-header h1 {
        font-size: 2rem;
    }

    .hero-header p {
        font-size: 1rem;
    }

    .carousel-control-prev, .carousel-control-next {
        width: 10%;
    }
}
</style>

{% endblock %}