{% 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
      </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  border-bottom pb-3">
            <div class="col-md-4 col-xl-1">
              <h1 class="title m-0">Process</h1>
            </div>
            <div class="row col-md-4 col-xl-11 justify-content-end align-items-center">
              <div class="col-md-8 col-xl-2 mt-2 mt-md-0">
                <select class="form-select select-field p-2" id="process_status_filter" onchange="get_process_all()" aria-label="Default select example">
                  <option value="all">All</option>
                  <option value="T">True</option>
                  <option value="F">False</option>
                </select>
              </div>
              <div class="col-md-8 col-xl-5 mt-2 mt-md-0">
                <div class="search-input d-flex align-items-center gap-3">
                  <div class="form-control d-flex align-items-center p-0 rounded-3 overflow-hidden">
                    <button onclick="get_process_all()">
                      <img src="{% static 'images/svg/searchsvg.svg' %}" alt="" />
                    </button>
                    <input type="text" class="form-control rounded-start-0 border-0 px-2 p-0" id="search_process_name" placeholder="Search | Process Name On Enter"/>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="table-responsive table-responsive-xl mt-3" id="process_main_table_data">
            {% include "./process_table.html" %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}
{% block modal_area %}
{% include "admin_panel/update_process_model.html" %}
{% endblock %} {% block script %}
<script src="{% static 'js/process.js' %}"></script>

<script>
  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $("#imagePreview").css(
          "background-image",
          "url(" + e.target.result + ")"
        );
        $("#imagePreview").hide();
        $("#imagePreview").fadeIn(650);
      };
      reader.readAsDataURL(input.files[0]);
    }
  }
  $("#imageUpload").change(function () {
    readURL(this);
  });
</script>
{% endblock %}