{% extends 'video_help/admin/base.html' %}

{% block title %}Categories - Video Help Admin{% endblock %}
{% block page_title %}Manage Categories{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="fas fa-folder me-2"></i>All Categories</span>
        <a href="{% url 'video_help:category_add' %}" class="btn btn-primary btn-sm">
            <i class="fas fa-plus me-1"></i> Add Category
        </a>
    </div>
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th style="width: 40px;"></th>
                    <th>Name</th>
                    <th>Slug</th>
                    <th>Description</th>
                    <th>Videos</th>
                    <th style="width: 100px;">Status</th>
                    <th style="width: 150px;">Actions</th>
                </tr>
            </thead>
            <tbody id="sortable-categories">
                {% for category in categories %}
                <tr data-id="{{ category.id }}">
                    <td>
                        <span class="sortable-handle">
                            <i class="fas fa-grip-vertical"></i>
                        </span>
                    </td>
                    <td>
                        {% if category.icon %}
                            <i class="{{ category.icon }} me-2 text-primary"></i>
                        {% else %}
                            <i class="fas fa-folder me-2 text-muted"></i>
                        {% endif %}
                        <strong>{{ category.name }}</strong>
                    </td>
                    <td><code>{{ category.slug }}</code></td>
                    <td>
                        {% if category.description %}
                            <span class="text-muted">{{ category.description|truncatewords:10 }}</span>
                        {% else %}
                            <span class="text-muted">-</span>
                        {% endif %}
                    </td>
                    <td>
                        <span class="badge bg-primary">{{ category.active_videos_count }}</span>
                        <small class="text-muted">/ {{ category.total_videos_count }}</small>
                    </td>
                    <td>
                        <label class="toggle-switch">
                            <input type="checkbox" 
                                   {% if category.is_active %}checked{% endif %}
                                   onchange="toggleStatus('category', {{ category.id }}, this)">
                            <span class="toggle-slider"></span>
                        </label>
                    </td>
                    <td>
                        <a href="{% url 'video_help:category_edit' category.id %}" 
                           class="btn btn-sm btn-outline-primary btn-action" 
                           title="Edit">
                            <i class="fas fa-edit"></i>
                        </a>
                        <a href="{% url 'video_help:video_list' %}?category={{ category.id }}" 
                           class="btn btn-sm btn-outline-info btn-action" 
                           title="View Videos">
                            <i class="fas fa-video"></i>
                        </a>
                        <a href="{% url 'video_help:category_delete' category.id %}" 
                           class="btn btn-sm btn-outline-danger btn-action" 
                           title="Delete">
                            <i class="fas fa-trash"></i>
                        </a>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="7" class="text-center py-5">
                        <div class="text-muted">
                            <i class="fas fa-folder-open fa-3x mb-3 d-block"></i>
                            No categories found.<br>
                            <a href="{% url 'video_help:category_add' %}" class="btn btn-primary mt-3">
                                <i class="fas fa-plus me-1"></i> Create Your First Category
                            </a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Sortable for drag & drop ordering
    {% if categories %}
    const sortable = new Sortable(document.getElementById('sortable-categories'), {
        animation: 150,
        handle: '.sortable-handle',
        ghostClass: 'sortable-ghost',
        onEnd: function(evt) {
            const rows = document.querySelectorAll('#sortable-categories tr');
            const order = [];
            rows.forEach((row, index) => {
                order.push({
                    id: parseInt(row.dataset.id),
                    order: index + 1
                });
            });
            
            fetch('{% url "video_help:update_category_order" %}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrftoken
                },
                body: JSON.stringify({ order: order })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast('Order updated successfully', 'success');
                }
            });
        }
    });
    {% endif %}
</script>
{% endblock %}