{% extends 'common/base.html' %}
{% load static %}
{% block title %}Update Category{% endblock %}
{% block content %}

<div class="container-fluid" id="container-wrapper">

    <!-- Page Title -->
    <div class="d-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Update Category</h1>
        <a href="{% url 'manage_categories' %}" class="btn btn-info">
            <i class="fas fa-list"></i> Category List
        </a>
    </div>

    <div class="row">

        <!-- ====================== -->
        <!--   CATEGORY EDIT FORM    -->
        <!-- ====================== -->
        <div class="col-lg-7">
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-primary text-white">
                    <h6 class="m-0 font-weight-bold">Update Category</h6>
                </div>
                <div class="card-body">

                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}

                        <div class="mb-3">
                            <label class="form-label">Category Name</label>
                            <input type="text" class="form-control" name="category_name" value="{{ category.name }}" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Rank</label>
                            <input type="number" class="form-control" name="ordering" placeholder="1, 2, 3" value="{{ category.ordering }}" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Status</label>
                            <select class="form-control" name="status" required>
                                <option value="1" {% if category.status %}selected{% endif %}>Active</option>
                                <option value="0" {% if not category.status %}selected{% endif %}>Inactive</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Category Image</label>
                            <input type="file" class="form-control" name="image">
                        </div>

                        <!-- load image -->
                        {% if category.image %}
                            <div class="mb-3">
                                <img src="{{ category.image.url }}" alt="{{ category.name }}" class="img-thumbnail" style="max-width: 200px;">
                            </div>
                        {% endif %}

                        <button type="submit" class="btn btn-primary w-100">Update Category</button>
                    </form>

                </div>
            </div>
        </div>
 

    </div>

</div>

{% endblock %}