{% extends 'LayoutMain.html' %}
{% load static %}
{% block title %}Dashboard - Edit Category{% endblock %}

{% block content %}
<main id="main" class="main">

    <div class="pagetitle">
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'index' %}">Home</a></li>
                <li class="breadcrumb-item"><a href="{% url 'categories' %}">Categories</a></li>
                <li class="breadcrumb-item active">Edit Category</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section profile">
        <div class="content">
            <div class="usergroup card">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                    <span>Edit Category: {{ category.category_name }}</span>
                    <a href="{% url 'categories' %}" class="btn btn-light btn-sm">
                        <i class="fas fa-arrow-left"></i> Back to List
                    </a>
                </div>
                <div class="card-body mt-3">
                    <form method="post" novalidate>
                        {% csrf_token %}
                        
                        {% if form.errors %}
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    {% for field in form %}
                                        {% for error in field.errors %}
                                            <li>{{ error }}</li>
                                        {% endfor %}
                                    {% endfor %}
                                    {% for error in form.non_field_errors %}
                                        <li>{{ error }}</li>
                                    {% endfor %}
                                </ul>
                            </div>
                        {% endif %}

                        <div class="mb-3">
                            <label class="form-label fw-bold">{{ form.category_name.label }}</label>
                            {{ form.category_name }}
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold">{{ form.slug.label }}</label>
                            {{ form.slug }}
                            <small class="text-muted">Slug is automatically generated from the category name after saving.</small>
                        </div>

                        <div class="mt-4">
                            <button type="submit" class="btn btn-success">
                                <i class="fas fa-save"></i> Update Category
                            </button>
                            <a href="{% url 'categories' %}" class="btn btn-secondary ms-2">
                                <i class="fas fa-times"></i> Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

</main>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const titleInput = document.getElementById('id_category_name');
        const slugInput = document.getElementById('id_slug');
        
        if (titleInput && slugInput) {
            titleInput.addEventListener('input', function() {
                let slug = this.value.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)+/g, '');
                slugInput.value = slug ? slug + '-{{ category.id }}' : '';
            });
        }
    });
</script>
{% endblock %}