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

<div class="container mt-5" style="margin-top: 120px !important;">
    <h2 class="text-center fw-bold mb-4">Ad Templates</h2>

    <!-- Filter Form -->
    <form method="GET" class="mb-4">
        <div class="row justify-content-center">
            <!-- Category Filter -->
            <div class="col-md-4">
                <select name="category" class="form-select" onchange="this.form.submit()">
                    <option value="">All Categories</option>
                    {% for category in categories %}
                        <option value="{{ category.id }}" {% if category.id|stringformat:"s" == selected_category %}selected{% endif %}>
                            {{ category.name }}
                        </option>
                    {% endfor %}
                </select>
            </div>

            <!-- Ad Type Filter -->
            <div class="col-md-4">
                <select name="ad_type" class="form-select" onchange="this.form.submit()">
                    <option value="">All Ad Types</option>
                    {% for ad_type in ad_types %}
                        <option value="{{ ad_type.id }}" {% if ad_type.id|stringformat:"s" == selected_ad_type %}selected{% endif %}>
                            {{ ad_type.name }}
                        </option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </form>

    {% if templates %}
        <div class="row g-4">
            {% for template in templates %}
                <div class="col-md-4 col-lg-3">
                    <div class="template-card shadow-sm">
                        <a href="{% url 'adtemplate_detail' template.id %}" class="text-decoration-none">
                            <div class="template-img-container">
                                <img src="{{ template.image.url }}" class="img-fluid rounded" alt="{{ template.name }}">
                            </div>
                            <div class="template-info text-center p-3">
                                <h5 class="fw-semibold text-dark">{{ template.name }}</h5>
                                <p class="text-muted small">{{ template.category.name }} | {{ template.ad_type.name }}</p>
                            </div>
                        </a>
                    </div>
                </div>
            {% endfor %}
        </div>

        <!-- Pagination -->
        <div class="d-flex justify-content-center mt-4">
            <nav aria-label="Page navigation">
                <ul class="pagination pagination-custom">
                    {% if templates.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?category={{ selected_category }}&ad_type={{ selected_ad_type }}&page=1">&laquo; First</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?category={{ selected_category }}&ad_type={{ selected_ad_type }}&page={{ templates.previous_page_number }}">Previous</a>
                        </li>
                    {% endif %}

                    <li class="page-item active">
                        <span class="page-link">Page {{ templates.number }} of {{ templates.paginator.num_pages }}</span>
                    </li>

                    {% if templates.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?category={{ selected_category }}&ad_type={{ selected_ad_type }}&page={{ templates.next_page_number }}">Next</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?category={{ selected_category }}&ad_type={{ selected_ad_type }}&page={{ templates.paginator.num_pages }}">Last &raquo;</a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
    {% else %}
        <p class="text-center text-muted">No ad templates available.</p>
    {% endif %}
</div>


<!-- Custom Styles -->
<style>
/* 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: 180px;
    object-fit: contain;
    transition: transform 0.3s ease-in-out;
}

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

.template-info {
    padding: 15px;
}

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

.template-info p {
    font-size: 0.9rem;
    color: #666;
}

@media (max-width: 768px) {
    .template-info h5 {
        font-size: 1rem;
    }
}
</style>

{% endblock %}