{% 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="product-detail">
 
    {# ===== Шапка ===== #}
    <div class="page-header">
        <h1 class="page-title">{{ product.title }}</h1>
        <div class="product-meta-detail">
            <span class="page-subtitle">
                Категория:
                <a href="{% url 'products:product_list' %}?category={{ product.category.slug }}">
                    {{ product.category.name }}
                </a>
            </span>
            {% if product.configurations.all %}
                <span class="product-configs">{{ product.configurations.all|join:", " }}</span>
            {% endif %}
        </div>
    </div>
 
    <div class="content-card">
 
        {# ===== Изображение ===== #}
        {% if product.image %}
            <img src="{{ product.image.url }}" alt="{{ product.title }}"
                 class="product-detail-image" loading="lazy">
        {% endif %}
 
        {# ===== CKEditor-контент ===== #}
        <div class="product-description">
            {{ product.content|safe }}
        </div>
 
        {# ===== Цена + действия ===== #}
        <div class="product-price-block-detail">
            {% if user.is_authenticated %}
                <div class="price-authenticated">
                    <span class="product-price-large">Цена: {{ product.price|floatformat:0 }} ₽</span>
                    <div class="price-actions">
                        {# Кнопка для вызова модального окна заказа #}
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#orderModal">
                            Купить
                        </button>
                    </div>
                </div>
            {% else %}
                <div class="price-restricted-detail">
                    <p>Для просмотра цены и приобретения продукта необходимо авторизоваться.</p>
                    <div class="price-actions">
                        <a href="{% url 'login' %}?next={{ request.path }}" class="btn">Войти</a>
                    </div>
                </div>
            {% endif %}
        </div>
 
    </div>{# /.content-card #}
 
    <div class="product-back">
        <a href="{% url 'products:product_list' %}" class="btn btn-outline">← К списку продуктов</a>
    </div>
 
</div>{# /.product-detail #}

{# ===== Модальное окно заказа ===== #}
<div class="modal fade" id="orderModal" tabindex="-1" aria-labelledby="orderModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="post" action="{% url 'products:order_create' product.slug %}">
                {% csrf_token %}
                <div class="modal-header">
                    <h5 class="modal-title" id="orderModalLabel">Оформление заказа: {{ product.title }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                </div>
                <div class="modal-body">
                    {# Поля формы будут рендериться через переменную order_form #}
                    {{ order_form.as_p }}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                    <button type="submit" class="btn btn-primary">Отправить заказ</button>
                </div>
            </form>
        </div>
    </div>
</div>

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

{% block extra_js %}

{% endblock %}

{% endblock %}