{% comment %} <div class="modal fade" id="update_question_model" tabindex="-1" aria-labelledby="update_question_modelLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header modal-header-main mx-4 mx-md-5">
        <h5 class="modal-title">Update Question</h5>
      </div>
      <div class="modal-body px-4">
          <div class="col-12 my-3">
            {% csrf_token %}
            <label for="Question" class="form-label">Question</label>
            <input type="text" class="form-control" id="update_question" placeholder="Enter Process Name" value="{{data.title}}" />
          </div>
          <div class="col-12 my-3">
            <label for="Description" class="form-label">Description</label>
            <textarea class="form-control" placeholder="Description" id="update_description" style="height: 100px">{{data.description}}</textarea>
          </div>
          <div class="col-12 my-3">
            <p class="fw-700">Status</p>
            <div class="form-switch userTable">
                <input class="form-check-input mt-0" id="update_question_status" type="checkbox" {% if data.status %}checked{% endif %} />
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="d-flex align-items-center gap-3 m-0">
              <button type="button" class="cancel-btn px-4" data-bs-dismiss="modal">Cancel</button>
              <a type="button" class="save-btn px-4 text-decoration-none" onclick="update_question({{data.id}})" >Save</a>
          </div>
      </div>
    </div>
    </div>
  </div>
</div> {% endcomment %}
{% extends "admin_panel/base.html" %} {% load static %} {% block header %}
<div class="tabs-list border-bottom">
    <nav>
        <div class="nav nav-underline" id="nav-tab" role="tablist">
            <button class="nav-link active" id="nav-application-tab" data-bs-toggle="tab"
                data-bs-target="#nav-application" type="button" role="tab" aria-controls="nav-application"
                aria-selected="true">
                Process form
            </button>
        </div>
    </nav>
</div>
<div class="table-row">
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-application" role="tabpanel"
            aria-labelledby="nav-application-tab" tabindex="0">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-4 col-xl-7">
                            <div class="d-flex align-items-center gap-3">
                                <a type="submit" class="save-btn p-2 w-auto" href="/process-form/{{process_id}}">
                                    <img src="{% static 'images/svg/back.svg' %}" width="20px" />
                                </a>
                                {% csrf_token %}
                                <h1 class="title mb-0">Question Add</h1>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div class="row">
                            <div class="col-12 table-row card-list">
                                <div class="card card-m-0">
                                    <div class="card-body p-3">
                                        <h6 class="fw-700 mb-3">Question</h6>
                                        <div class="mb-4">
                                            <input type="text" id="question" class="form-control p-2" placeholder="Enter Your Question">
                                        </div>
                                        <div class="mb-2">
                                            <h6 class="fw-700 mb-0">Field</h6>
                                        </div>

                                        <div class="mb-4 d-flex align-items-center gap-2">
                                            <select class="form-select select-field p-2" id="field" onchange="open_model_for_option(this)" aria-label="Default select example">
                                                <option value="" selected>Select Your Field</option>
                                                {% for Field in felids  %}
                                                    <option value="{{Field.id}}">{{Field.name}}</option>
                                                {% endfor %}
                                            </select>

                                            <!-- Button trigger modal -->
                                            <button id="option_btn" type="button" class="bg-transparent border-0 p-0 d-none"
                                                data-bs-toggle="modal" data-bs-target="#option_model">
                                                <img src="{% static 'images/svg/list.svg' %}" width="55px" />
                                            </button>

                                        </div>
                                        <h6 class="fw-700">Description</h6>
                                        <div class="mb-4">
                                            <div class="form-floating mt-3">
                                                <textarea class="form-control" placeholder="Description"
                                                    id="question_description" style="height: 100px"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end mt-3">
                            <div class="mt-4 d-flex gap-3">
                                <button type="button" class="save-btn px-5" onclick="add_process_form_question({{process_id}})">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="option_model" tabindex="-1" aria-labelledby="option_modelLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fw-700" id="option_modelLabel">No Of Select</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h6 class="fw-700">No Of Select</h6>
                <div class="mb-4">
                    <input type="text" class="form-control p-2" placeholder="Enter Your No Of Select" onkeydown="create_select_option_tag(this)">
                </div>
                <div class="row row-cols-1 row-cols-lg-2 g-3" id="no_of_dropdown_div">
                    
                </div>
            </div>
            <div class="modal-footer">
                <div class="d-flex align-items-center gap-3 m-0">
                    <button type="button" class="cancel-btn px-4" data-bs-dismiss="modal">Cancel</button>
                    <a type="button" class="save-btn px-4 text-decoration-none" onclick="option_create()" >Save</a>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}


{% block script %}
    <script src="{% static 'js/process.js' %}"></script>
{% endblock %}