{% 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>
            <h2 class="fw-bold">
                ⚙️ انواع فعالیت‌های تخنیکی
            </h2>

            <p class="text-muted mb-0">
                مدیریت انواع فعالیت‌های تخنیکی
            </p>
        </div>

        <div class="d-flex gap-2">

            <a href="{% url 'activity_type_create' %}"
               class="btn btn-primary">
                ➕ افزودن نوع فعالیت
            </a>

            <a href="{% url 'activity_list' %}"
               class="btn btn-outline-secondary">
                ↩️ برگشت به فعالیت‌ها
            </a>

        </div>

    </div>


    <!-- جدول انواع فعالیت -->
    <div class="card shadow-sm">

        <div class="card-header bg-primary text-white">

            <h5 class="mb-0">
                فهرست انواع فعالیت
            </h5>

        </div>


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

            <div class="table-responsive">

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

                    <thead class="table-light">

                        <tr>

                            <th class="text-center">
                                شماره
                            </th>

                            <th>
                                نوع فعالیت
                            </th>

                            <th>
                                توضیحات
                            </th>

                            <th class="text-center">
                                وضعیت
                            </th>

                            <th class="text-center">
                                عملیات
                            </th>

                        </tr>

                    </thead>


                    <tbody>

                        {% for activity_type in activity_types %}

                        <tr>

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


                            <td class="fw-bold">
                                {{ activity_type.name }}
                            </td>


                            <td>
                                {% if activity_type.description %}
                                    {{ activity_type.description }}
                                {% else %}
                                    <span class="text-muted">
                                        -
                                    </span>
                                {% endif %}
                            </td>


                            <td class="text-center">

                                {% if activity_type.is_active %}

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

                                {% else %}

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

                                {% endif %}

                            </td>


                            <td class="text-center">

                                <a href="{% url 'activity_type_update' activity_type.pk %}"
                                   class="btn btn-sm btn-warning">
                                    ✏️ ویرایش
                                </a>

                            </td>

                        </tr>

                        {% empty %}

                        <tr>

                            <td colspan="5"
                                class="text-center py-4 text-muted">

                                هیچ نوع فعالیتی ثبت نشده است.

                            </td>

                        </tr>

                        {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

{% endblock %}