<!-- КОМПОНЕНТЫ КОМПЛЕКТА - Shared include для создания и редактирования -->
{% load inventory_filters %}
<div class="card border-0 shadow-sm mb-3">
    <div class="card-body p-3">
        <h6 class="mb-3 text-muted"><i class="bi bi-boxes me-1"></i>Состав комплекта</h6>

        {{ kititem_formset.management_form }}

        <div id="kititem-forms">
            {% for kititem_form in kititem_formset %}
            <div class="card mb-2 kititem-form border" data-form-index="{{ forloop.counter0 }}"
                data-product-id="{% if kititem_form.instance.product %}{{ kititem_form.instance.product.id }}{% endif %}"
                data-product-price="{% if kititem_form.instance.product %}{{ kititem_form.instance.product.actual_price|default:0 }}{% else %}0{% endif %}">
                {{ kititem_form.id }}
                <div class="card-body p-2">
                    {% if kititem_form.non_field_errors %}
                    <div class="alert alert-danger alert-sm mb-2">
                        {% for error in kititem_form.non_field_errors %}{{ error }}{% endfor %}
                    </div>
                    {% endif %}

                    <div class="row g-2 align-items-end">
                        <!-- ТОВАР -->
                        <div class="col-md-3">
                            <label class="form-label small text-muted mb-1">Товар</label>
                            {{ kititem_form.product }}
                            {% if kititem_form.product.errors %}
                            <div class="text-danger small">{{ kititem_form.product.errors }}</div>
                            {% endif %}
                        </div>

                        <!-- ЕДИНИЦА ПРОДАЖИ -->
                        <div class="col-md-2">
                            <label class="form-label small text-muted mb-1">Единица продажи</label>
                            {{ kititem_form.sales_unit }}
                            {% if kititem_form.sales_unit.errors %}
                            <div class="text-danger small">{{ kititem_form.sales_unit.errors }}</div>
                            {% endif %}
                        </div>

                        <!-- РАЗДЕЛИТЕЛЬ ИЛИ -->
                        <div class="col-md-1 d-flex justify-content-center align-items-center">
                            <div class="kit-item-separator">
                                <span class="separator-text">ИЛИ</span>
                                <i class="bi bi-info-circle separator-help" data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    title="Вы можете выбрать что-то одно: либо товар, либо группу вариантов"></i>
                            </div>
                        </div>

                        <!-- ГРУППА ВАРИАНТОВ -->
                        <div class="col-md-3">
                            <label class="form-label small text-muted mb-1">Группа вариантов</label>
                            {{ kititem_form.variant_group }}
                            {% if kititem_form.variant_group.errors %}
                            <div class="text-danger small">{{ kititem_form.variant_group.errors }}</div>
                            {% endif %}
                        </div>

                        <!-- КОЛИЧЕСТВО -->
                        <div class="col-md-2">
                            <label class="form-label small text-muted mb-1">Кол-во</label>
                            {{ kititem_form.quantity|smart_quantity }}
                            {% if kititem_form.quantity.errors %}
                            <div class="text-danger small">{{ kititem_form.quantity.errors }}</div>
                            {% endif %}
                        </div>

                        <!-- УДАЛЕНИЕ -->
                        <div class="col-md-1 text-end">
                            {% if kititem_form.DELETE %}
                            <button type="button" class="btn btn-sm btn-link text-danger p-0"
                                onclick="this.nextElementSibling.checked = true; this.closest('.kititem-form').style.display='none'; if(typeof calculateFinalPrice === 'function') calculateFinalPrice();"
                                title="Удалить">
                                <i class="bi bi-x-lg"></i>
                            </button>
                            {{ kititem_form.DELETE }}
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- Кнопка добавления внизу списка -->
        <div class="mt-2">
            <button type="button" class="btn btn-sm btn-outline-success w-100" id="addKitItemBtn">
                <i class="bi bi-plus-circle"></i> Добавить товар
            </button>
        </div>
    </div>
</div>