{% extends "base.html" %}
{% load static %}
{% block title %}Edit Category{% endblock %}
{% block extra_css %}{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2>Edit Category</h2>
    <form method="post" enctype="multipart/form-data" class="row g-3">
        {% csrf_token %}
        <div class="col-md-6">
            <label for="parent_id" class="form-label">Parent Category</label>
            <select name="parent_id" id="parent_id" class="form-select">
                <option value="">---------</option>
                {% for parent in parents %}
                    <option value="{{ parent.id }}" {% if category.parent and parent.id == category.parent.id %}selected{% endif %}>{{ parent.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-6">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" name="name" value="{{ category.name }}">
        </div>
        <div class="col-md-6">
            <label for="status" class="form-label">Status</label>
            <select class="form-select" id="status" name="status">
                <option value="active" {% if category.status == 'active' %}selected{% endif %}>Active</option>
                <option value="inactive" {% if category.status == 'inactive' %}selected{% endif %}>Inactive</option>
            </select>
        </div>

        <div class="col-12">
            <label for="description" class="form-label">Description</label>
            <textarea class="form-control" id="description" name="description" rows="3">{{ category.description|safe }}</textarea>
        </div>

        <div class="col-12">
            <label for="image" class="form-label">Image</label>
            {% if category.image %}
                <img src="{{ category.image.url }}" width="120" class="mb-2"><br>
            {% endif %}
            <input type="file" class="form-control" id="image" name="image">
        </div>
        <div class="col-12">
            <button type="submit" class="btn btn-primary">Update Category</button>
            <a href="{% url 'category-management' %}" class="btn btn-secondary">Back</a>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
{% endblock %}