{%extends 'base.html'%}
{% load widget_tweaks %}
{%load static%}
{%block content%}
{%include 'profile/header.html'%}
{%include 'profile/drawer.html'%}

<br />
<br />


<br />
<br />

<div class="container mt-5">
    <h2 class="text-center mb-4">ایجاد حلقه جدید</h2>
    <div class="card shadow-sm border-0 rounded">
        <div class="card-body p-5">
            <form method="post">
                {% csrf_token %}

                <!-- ردیف فیلدها -->
                <div class="row mb-4">
                    <!-- فیلد نام حلقه -->
                    <div class="col-md-4">
                        <label for="{{ form.name.id_for_label }}" class="form-label">نام حلقه</label>
                        {{ form.name|add_class:"form-control form-control-lg" }}
                    </div>

                    <!-- فیلد سرگروه -->
                   
                    <div class="col-md-6">
                        <label for="{{ form.person.id_for_label }}" class="form-label"> سرگروه</label>
                        {{ form.person|add_class:"form-control form-control-lg select2" }}
                    </div>

                    <!-- فیلد نوع حلقه -->
                    <div class="col-md-4">
                        <label for="{{ form.typee.id_for_label }}" class="form-label">نوع حلقه</label>
                        {{ form.typee|add_class:"form-control form-control-lg" }}
                    </div>
                </div>

                <!-- دکمه‌های ذخیره و بازگشت -->
                <div class="d-flex justify-content-between mt-4">
                    <button type="submit" class="btn btn-success btn-lg px-5"></button>
                    <a href="{% url 'ring_list' %}" class="btn btn-outline-secondary btn-lg px-5">بازگشت</a>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $('#id_person').select2({
            ajax: {
                url: "{% url 'search_persons' %}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term  // ارسال عبارت جستجو به سرور
                    };
                },
                processResults: function(data) {
                    return {
                        results: data  // داده‌های جستجو شده را به صورت نتایج باز می‌گرداند
                    };
                },
                cache: true
            },
            minimumInputLength: 1,  // حداقل تعداد کاراکتر برای شروع جستجو
            placeholder: "جستجو کنید...",
            allowClear: true,
            width: '100%',  // تنظیم عرض فیلد به 100% برای ریسپانسیو شدن
            containerCssClass: "form-control-lg form-control-sm",  // کلاس‌های ریسپانسیو برای فرم
            language: {
                noResults: function() {
                    return "درخواست مورد نظر وجود ندارد"; // پیام برای زمانی که جستجو نتایجی ندارد
                },
                inputTooShort: function() {
                    return "برای شروع جستجو، حداقل یک کاراکتر وارد کنید."; // پیامی برای جستجو با کاراکتر کمتر از حد مجاز
                }
            }
        });
    });
</script>

{% endblock %} 
