{% extends 'programmer/base.html' %}
{% load static %}
{% load django_bootstrap5 %}

{% block extra_css %}
{# Единый файл для CKEditor-контента (общий с блогом) #}
<link rel="stylesheet" href="{% static 'products/css/ck_content.css' %}">
<link rel="stylesheet" href="{% static 'products/css/products.css' %}">
{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Продукты 1С</h1>
    <p class="page-subtitle">Готовые модули, расширения и программные продукты для платформы 1С</p>
</div>

{# ===== Фильтры ===== #}
<div class="filters-bar">
    <div class="filter-group">
        <span>Категория:</span>
        <a href="?{% if current_configuration %}configuration={{ current_configuration.slug }}{% endif %}"
           class="filter-btn {% if not current_category %}active{% endif %}">Все</a>
        {% for cat in categories %}
            <a href="?category={{ cat.slug }}{% if current_configuration %}&configuration={{ current_configuration.slug }}{% endif %}"
               class="filter-btn {% if current_category == cat %}active{% endif %}">{{ cat.name }}</a>
        {% endfor %}
    </div>
    <div class="filter-group">
        <span>Конфигурация:</span>
        <a href="?{% if current_category %}category={{ current_category.slug }}{% endif %}"
           class="filter-btn {% if not current_configuration %}active{% endif %}">Все</a>
        {% for conf in configurations %}
            <a href="?configuration={{ conf.slug }}{% if current_category %}&category={{ current_category.slug }}{% endif %}"
               class="filter-btn {% if current_configuration == conf %}active{% endif %}">{{ conf.name }}</a>
        {% endfor %}
    </div>
</div>

{# ===== Сетка продуктов ===== #}
<div class="products-grid">
    {% for product in products %}
        <div class="product-card" data-url="{{ product.get_absolute_url }}">
            {% if product.image %}
                <img src="{{ product.image.url }}" alt="{{ product.title }}" class="product-image" loading="lazy">
            {% else %}
                <div class="product-image-placeholder" aria-hidden="true"></div>
            {% endif %}

            <div class="product-info">
                <h3><a href="{{ product.get_absolute_url }}">{{ product.title }}</a></h3>

                <p class="product-short">{{ product.short_description|striptags|truncatewords:30 }}</p>

                <div class="product-meta">
                    <span class="product-category">{{ product.category.name }}</span>
                    {% if product.configurations.all %}
                        <span class="product-configs">{{ product.configurations.all|join:", " }}</span>
                    {% endif %}
                </div>

                <div class="product-price-block">
                    {% if user.is_authenticated %}
                        <span class="product-price">{{ product.price|floatformat:0 }} ₽</span>
                    {% else %}
                        <div class="price-restricted">
                            <span class="price-text">Цена доступна после авторизации</span>
                            <div class="price-actions">
                                <a href="{% url 'login' %}?next={{ request.path }}" class="btn btn-small">Войти</a>
                                <button type="button" 
                                        onclick="CallbackModal.open('{{ product.title|escapejs }}')" 
                                        class="btn btn-small btn-outline">
                                    Запросить цену
                                </button>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    {% empty %}
        <p class="no-results">Продуктов по выбранным фильтрам не найдено.</p>
    {% endfor %}
</div>

<script src="{% static 'programmer/js/floating-button.js' %}"></script>

{% include 'products/includes/pagination.html' %}
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const cards = document.querySelectorAll('.product-card');
        cards.forEach(card => {
            const url = card.dataset.url;
            if (!url) return;

            card.addEventListener('click', function(e) {
                // Если клик был по ссылке, кнопке или любому элементу с data-no-link
                const target = e.target.closest('a, button, .no-link');
                if (target) return;

                window.location.href = url;
            });
        });
    });
</script>
{% endblock %}