{% extends 'base.html' %}

{% block title %}دسته‌های تجهیزات{% 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">
                <i class="bi bi-tags-fill"></i>
                دسته‌های تجهیزات
            </h3>

            <p class="text-muted mb-0">
                مدیریت و تنظیم دسته‌بندی تجهیزات IT
            </p>
        </div>

        <a href="{% url 'category_create' %}" class="btn btn-primary">
            <i class="bi bi-plus-lg"></i>
            افزودن دسته جدید
        </a>

    </div>


    <!-- کارت اصلی -->
    <div class="card shadow-sm border-0">

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

            <div class="d-flex justify-content-between align-items-center">

                <h5 class="mb-0 fw-bold">
                    فهرست دسته‌ها
                </h5>

                <span class="badge bg-primary">
                    تعداد: {{ categories|length }}
                </span>

            </div>

        </div>


        <div class="card-body p-0">

            {% if categories %}

            <div class="table-responsive">

                <table class="table table-hover align-middle mb-0">

                    <thead class="table-light">

                        <tr>
                            <th class="text-center">#</th>
                            <th>کد دسته</th>
                            <th>نام دسته</th>
                            <th>توضیحات</th>
                            <th class="text-center">تعداد تجهیزات</th>
                            <th class="text-center">وضعیت</th>
                            <th class="text-center">عملیات</th>
                        </tr>

                    </thead>


                    <tbody>

                        {% for category in categories %}

                        <tr>

                            <td class="text-center">
                                {{ forloop.counter }}
                            </td>


                            <td>
                                <span class="badge bg-secondary">
                                    {{ category.code }}
                                </span>
                            </td>


                            <td>
                                <a href="{% url 'category_detail' category.pk %}"
                                   class="text-decoration-none fw-bold">

                                    {{ category.name }}

                                </a>
                            </td>


                            <td>
    {% if category.description %}

        {{ category.description|truncatechars:80 }}

    {% else %}

        <span class="text-muted">
            بدون توضیحات
        </span>

    {% endif %}
</td>


<td class="text-center">

    <span class="badge bg-primary">
        {{ category.assets.count }}
    </span>

</td>

                            <td class="text-center">

                                {% if category.is_active %}

                                    <span class="badge bg-success">
                                        فعال
                                    </span>

                                {% else %}

                                    <span class="badge bg-secondary">
                                        غیرفعال
                                    </span>

                                {% endif %}

                            </td>


                            <td class="text-center">

                                <div class="btn-group" role="group">

    <a href="{% url 'category_detail' category.pk %}"
       class="btn btn-sm btn-outline-primary">

        <i class="bi bi-eye"></i>
        مشاهده

    </a>


    <a href="{% url 'category_update' category.pk %}"
       class="btn btn-sm btn-outline-warning">

        <i class="bi bi-pencil"></i>
        ویرایش

    </a>


    <a href="{% url 'category_delete' category.pk %}"
       class="btn btn-sm btn-outline-danger">

        <i class="bi bi-trash"></i>
        حذف

    </a>

</div>

                            </td>

                        </tr>

                        {% endfor %}

                    </tbody>

                </table>

            </div>

            {% else %}

            <!-- حالت بدون اطلاعات -->

            <div class="text-center py-5">

                <div class="mb-3">
                    <i class="bi bi-tags"
                       style="font-size: 50px; color: #adb5bd;"></i>
                </div>

                <h5 class="fw-bold">
                    هنوز هیچ دسته‌ای ثبت نشده است
                </h5>

                <p class="text-muted">
                    برای شروع، اولین دسته تجهیزات را ثبت کنید.
                </p>

                <a href="{% url 'category_create' %}"
                   class="btn btn-primary">

                    <i class="bi bi-plus-lg"></i>
                    افزودن دسته جدید

                </a>

            </div>

            {% endif %}

        </div>

    </div>

</div>

{% endblock %}