{% extends 'base.html' %}

{% block content %}
<h1>📋 Управление {{ model_verbose }}</h1>

<div style="margin-bottom: 20px;">
    <a href="{% url 'crud_add' model_name %}" class="btn" style="background: #27ae60; color: white; padding: 8px 16px; text-decoration: none; border-radius: 5px;">
        + Добавить
    </a>
</div>

<div style="margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap;">
    <input type="text" id="search" placeholder="Поиск..." value="{{ search_query }}" 
           style="flex:2; padding: 8px; border: 1px solid #ddd; border-radius: 5px;">
    <select id="sort" style="padding: 8px; border: 1px solid #ddd; border-radius: 5px;">
        <option value="">Без сортировки</option>
        {% for field in sort_fields %}
            <option value="{{ field }}">{{ field }} ↑</option>
            <option value="-{{ field }}">{{ field }} ↓</option>
        {% endfor %}
    </select>
    <button id="resetBtn" style="padding: 8px 16px; background: #6c757d; color: white; border: none; border-radius: 5px; cursor: pointer;">
        Сбросить
    </button>
</div>

<table style="width: 100%; border-collapse: collapse;">
    <thead>
        <tr style="background: #D2F6E7;">
            {% for field in display_fields %}
                <th style="padding: 12px; text-align: left;">{{ field.verbose_name }}</th>
            {% endfor %}
            <th style="padding: 12px; text-align: center;">Действия</th>
        </tr>
    </thead>
    <tbody>
        {% for obj in object_list %}
        <tr style="border-bottom: 1px solid #ddd;">
            {% for field in display_fields %}
                <td style="padding: 10px;">
                    {% if field.type == 'image' and obj.image %}
                        <img src="{{ obj.image.url }}" width="50" height="50">
                    {% else %}
                        {{ obj|get_attr:field.name }}
                    {% endif %}
                </td>
            {% endfor %}
            <td style="padding: 10px; text-align: center;">
                <a href="{% url 'crud_edit' model_name obj.id %}" style="color: blue; text-decoration: none; margin-right: 15px;">✏️</a>
                <a href="{% url 'crud_delete' model_name obj.id %}" onclick="return confirm('Удалить?')" style="color: red; text-decoration: none;">🗑️</a>
            </td>
        </tr>
        {% empty %}
        <tr><td colspan="{{ display_fields|length|add:1 }}" style="padding: 40px; text-align: center;">Нет данных</td></tr>
        {% endfor %}
    </tbody>
</table>

<script>
let timeout;
function updateUrl() {
    const params = new URLSearchParams(window.location.search);
    const search = document.getElementById('search')?.value;
    if (search) params.set('search', search);
    else params.delete('search');
    const sort = document.getElementById('sort')?.value;
    if (sort) params.set('sort', sort);
    else params.delete('sort');
    params.set('page', '1');
    window.location.search = params.toString();
}
document.getElementById('search')?.addEventListener('input', () => { clearTimeout(timeout); timeout = setTimeout(updateUrl, 300); });
document.getElementById('sort')?.addEventListener('change', updateUrl);
document.getElementById('resetBtn')?.addEventListener('click', () => { window.location.href = window.location.pathname; });
</script>
{% endblock %}