{% extends 'base.html' %}

{% block title %}
    {% if category %}
        ویرایش دسته تجهیزات
    {% else %}
        افزودن دسته تجهیزات
    {% endif %}
{% endblock %}

{% block content %}

<div class="container-fluid">

    <!-- عنوان صفحه -->
    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>
            <h3 class="fw-bold mb-1">

                {% if category %}
                    <i class="bi bi-pencil-square"></i>
                    ویرایش دسته تجهیزات
                {% else %}
                    <i class="bi bi-plus-circle-fill"></i>
                    افزودن دسته تجهیزات
                {% endif %}

            </h3>

            <p class="text-muted mb-0">
                {% if category %}
                    ویرایش اطلاعات دسته تجهیزات
                {% else %}
                    ثبت یک دسته جدید برای تجهیزات IT
                {% endif %}
            </p>
        </div>

        <a href="{% url 'category_list' %}"
           class="btn btn-outline-secondary">

            <i class="bi bi-arrow-right"></i>
            برگشت

        </a>

    </div>


    <!-- فرم -->
    <div class="card shadow-sm border-0">

        <div class="card-header bg-white py-3">

            <h5 class="mb-0 fw-bold">
                <i class="bi bi-tags-fill"></i>
                اطلاعات دسته
            </h5>

        </div>


        <div class="card-body">

            {% if error %}

<div class="alert alert-danger d-flex align-items-center" role="alert">

    <i class="bi bi-exclamation-triangle-fill me-2"></i>

    <div>
        {{ error }}
    </div>

</div>

{% endif %}

            <form method="post">

                {% csrf_token %}


                <div class="row g-4">

                    <!-- نام دسته -->
                    <div class="col-md-6">

                        <label for="name" class="form-label fw-bold">
                            نام دسته
                            <span class="text-danger">*</span>
                        </label>

                        <input
                            type="text"
                            name="name"
                            id="name"
                            class="form-control"
                            placeholder="مثلاً Computer"
                            value="{% if category %}{{ category.name }}{% else %}{{ form_name }}{% endif %}"
                            required
                        >

                        <div class="form-text">
                            نام دسته تجهیزات را وارد کنید.
                        </div>

                    </div>


                    <!-- کد دسته -->
                    <div class="col-md-6">

                        <label for="code" class="form-label fw-bold">
                            کد دسته
                            <span class="text-danger">*</span>
                        </label>

                        <input
                            type="text"
                            name="code"
                            id="code"
                            class="form-control"
                            placeholder="مثلاً COMP"
                            value="{% if category %}{{ category.code }}{% else %}{{ form_code }}{% endif %}"
                            required
                        >

                        <div class="form-text">
                            کد باید یکتا باشد.
                        </div>

                    </div>


                    <!-- توضیحات -->
                    <div class="col-12">

                        <label for="description" class="form-label fw-bold">
                            توضیحات
                        </label>

                        <textarea
                            name="description"
                            id="description"
                            class="form-control"
                            rows="5"
                            placeholder="توضیحات مربوط به این دسته را وارد کنید..."
                        >{% if category %}{{ category.description }}{% else %}{{ form_description }}{% endif %}</textarea>

                    </div>


                    <!-- وضعیت -->
                    {% if category %}

                    <div class="col-md-6">

                        <label class="form-label fw-bold">
                            وضعیت دسته
                        </label>

                        <div class="form-check form-switch">

                            <input
                                class="form-check-input"
                                type="checkbox"
                                role="switch"
                                name="is_active"
                                id="is_active"
                                {% if category.is_active %}checked{% endif %}
                            >

                            <label
                                class="form-check-label"
                                for="is_active"
                            >
                                دسته فعال باشد
                            </label>

                        </div>

                    </div>

                    {% endif %}

                </div>


                <!-- دکمه‌ها -->
                <div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top">

                    <a href="{% url 'category_list' %}"
                       class="btn btn-outline-secondary">

                        <i class="bi bi-x-lg"></i>
                        انصراف

                    </a>


                    <button type="submit"
                            class="btn btn-primary">

                        {% if category %}

                            <i class="bi bi-check-lg"></i>
                            ذخیره تغییرات

                        {% else %}

                            <i class="bi bi-plus-lg"></i>
                            ثبت دسته

                        {% endif %}

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>

{% endblock %}