{% extends "admin/base_site.html" %}
{% load static %}

{% block content %}
<div style="max-width: 800px; margin: 40px auto; padding: 20px;">
    <h1 style="margin-bottom: 20px;">{{ title }}</h1>
    
    <div style="background: #f8f9fa; padding: 20px; border-radius: 5px; margin-bottom: 20px;">
        <h3 style="margin-top: 0;">محصولات انتخاب شده:</h3>
        <ul style="list-style: none; padding: 0;">
            {% for product in products %}
                <li style="padding: 8px; border-bottom: 1px solid #dee2e6;">
                    <strong>{{ product.name }}</strong>
                    {% if product.category %}
                        <span style="color: #6c757d;"> - دسته فعلی: {{ product.category.name }}</span>
                    {% else %}
                        <span style="color: #dc3545;"> - بدون دسته‌بندی</span>
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
        <p style="margin-top: 15px; font-weight: bold;">
            تعداد کل: {{ products|length }} محصول
        </p>
    </div>

    <form method="post" style="background: white; padding: 20px; border: 1px solid #dee2e6; border-radius: 5px;">
        {% csrf_token %}
        
        <div style="margin-bottom: 20px;">
            <label for="{{ form.subcategory.id_for_label }}" style="display: block; margin-bottom: 8px; font-weight: bold;">
                {{ form.subcategory.label }}
            </label>
            {{ form.subcategory }}
            {% if form.subcategory.help_text %}
                <p style="color: #6c757d; font-size: 0.9em; margin-top: 5px;">
                    {{ form.subcategory.help_text }}
                </p>
            {% endif %}
            {% if form.subcategory.errors %}
                <div style="color: #dc3545; margin-top: 5px;">
                    {{ form.subcategory.errors }}
                </div>
            {% endif %}
        </div>

        <input type="hidden" name="action" value="bulk_update_subcategory_action">
        {% for id in selected_ids %}
            <input type="hidden" name="_selected_action" value="{{ id }}">
        {% endfor %}

        <div style="margin-top: 30px; display: flex; gap: 10px;">
            <button type="submit" name="apply" 
                    style="background: #28a745; color: white; border: none; padding: 10px 20px; 
                           border-radius: 5px; cursor: pointer; font-size: 14px;">
                اعمال تغییرات
            </button>
            <a href="{% url 'admin:product_productmodel_changelist' %}" 
               style="background: #6c757d; color: white; border: none; padding: 10px 20px; 
                      border-radius: 5px; text-decoration: none; display: inline-block; font-size: 14px;">
                انصراف
            </a>
        </div>
    </form>
</div>

<style>
    select {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        font-size: 14px;
    }
    
    select:focus {
        outline: none;
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    
    button:hover {
        opacity: 0.9;
    }
</style>
{% endblock %}