From fa3c2126e5c330d45787840e4243b0326224c5ae Mon Sep 17 00:00:00 2001
From: Horilla <teamhorilla@gmail.com>
Date: Fri, 2 Feb 2024 19:44:04 +0530
Subject: [PATCH] [UPDT] RECRUITMENT: Skill zone form updates

---
 recruitment/models.py                         |  2 +-
 .../templates/candidate/candidate_card.html   | 10 +++
 .../templates/candidate/candidate_list.html   | 71 +++++++------------
 .../templates/candidate/candidate_view.html   | 17 ++++-
 recruitment/templates/candidate/filters.html  |  4 ++
 .../templates/skill_zone/skill_zone_card.html | 39 +++++-----
 .../skill_zone/skill_zone_create.html         | 41 ++++-------
 .../templates/skill_zone/skill_zone_list.html | 52 ++++----------
 .../templates/skill_zone/skill_zone_nav.html  | 11 ---
 .../skill_zone/skill_zone_update.html         | 39 +++-------
 .../templates/skill_zone/skill_zone_view.html | 39 ++++++----
 .../skill_zone_cand/skill_zone_cand_card.html | 26 -------
 .../skill_zone_cand/skill_zone_cand_form.html | 48 +++++--------
 .../skill_zone_cand/to_skill_zone_form.html   | 53 ++------------
 14 files changed, 160 insertions(+), 292 deletions(-)

diff --git a/recruitment/models.py b/recruitment/models.py
index 98895ad34..a5c4bb9c5 100644
--- a/recruitment/models.py
+++ b/recruitment/models.py
@@ -589,11 +589,11 @@ class SkillZoneCandidate(models.Model):
     # )
 
     reason = models.CharField(max_length=200, verbose_name=_("Reason"))
-    is_active = models.BooleanField(default=True, verbose_name=_("Is Active"))
     added_on = models.DateField(
         default=django.utils.timezone.now,
         editable=False,
     )
+    is_active = models.BooleanField(default=True, verbose_name=_("Is Active"))
     objects = HorillaCompanyManager(related_company_field="skill_zone__company_id")
 
     class Meta:
diff --git a/recruitment/templates/candidate/candidate_card.html b/recruitment/templates/candidate/candidate_card.html
index dfd08ddc4..603391200 100644
--- a/recruitment/templates/candidate/candidate_card.html
+++ b/recruitment/templates/candidate/candidate_card.html
@@ -57,6 +57,16 @@
         </button>
         <div class="oh-dropdown__menu oh-dropdown__menu--dark-border oh-dropdown__menu--right" x-show="show" @click.outside="show = false" style="display: none;">
           <ul class="oh-dropdown__items">
+            {% if perms.recruitment.add_skillzonecandidate %}
+            <li class="oh-dropdown__item">
+              <a 
+                data-toggle="oh-modal-toggle"
+                data-target="#createModal"
+                hx-get="{% url 'to-skill-zone' cand.id %}"
+                hx-target="#createTarget"
+              >{% trans "Add to Skill Zone" %}</a>
+            </li>
+            {% endif %}
             {% if perms.recruitment.change_candidate %}
             <li class="oh-dropdown__item">
               <a href="{% url 'rec-candidate-update' cand.id %}" class="oh-dropdown__link">{% trans "Edit Profile" %}</a>
diff --git a/recruitment/templates/candidate/candidate_list.html b/recruitment/templates/candidate/candidate_list.html
index 18476faab..07f9d4de8 100644
--- a/recruitment/templates/candidate/candidate_list.html
+++ b/recruitment/templates/candidate/candidate_list.html
@@ -1,5 +1,6 @@
 {% load basefilters %}
 {% load i18n %}{% load static %} {% load recruitmentfilters %}
+
 {% if messages %}
 <div class="oh-wrapper">
   {% for message in messages %}
@@ -41,12 +42,12 @@
         <div class="oh-sticky-table__th">{% trans "Recruitment" %}</div>
         <div class="oh-sticky-table__th">{% trans "Job Position" %}</div>
         <div class="oh-sticky-table__th">{% trans "Resume" %}</div>
-        <div class="oh-sticky-table__th">{% trans "Convert" %}</div>
-        <div class="oh-sticky-table__th">{% trans "Actions" %}</div>
+        <div class="oh-sticky-table__th">{% trans "Options" %}</div>
+        <div class="oh-sticky-table__th"  style="width: 190px;">{% trans "Actions" %}</div>
       </div>
     </div>
     {% for cand in data %}
-    <div class="oh-sticky-table__tbody ui-sortable " style="{% if cand.email in emp_list %} background: #0080002e; {% endif %}">
+    <div class="oh-sticky-table__tbody ui-sortable {% if cand.email in emp_list %} to-employee {% endif %}">
       <div class="oh-sticky-table__tr ui-sortable-handle">
         <div class="oh-sticky-table__sd {% if cand.canceled %} row-status--red
         {% elif cand.hired %} row-status--yellow  
@@ -98,43 +99,31 @@
           class="oh-sticky-table__td">{{cand.job_position_id}}</a>
         <a style="color: inherit;text-decoration: none;" class="oh-sticky-table__td" href="/media/{{cand.resume}}"
           target="_blank" rel="noopener noreferrer"><span class="oh-btn oh-btn--info"> {% trans "Resume" %}</span></a>
-        {% comment %} <a href="#" style="color: inherit;text-decoration: none;" class="oh-sticky-table__td">
-          {% if perms.recruitment.view_history %}
-          <button hx-get="{% url 'candidate-history' cand.id %}" hx-target='#section'
-            class="oh-btn oh-btn--info">history</button>
-          {% endif %}
-        </a> {% endcomment %}
-        {% if perms.recruitment.change_candidate %}
+        <div class="oh-sticky-table__td">
+          {% if perms.recruitment.change_candidate %}
           <div class="oh-btn-group">
             {% if cand.email in emp_list %}
-              <div action="#" style="color: inherit;text-decoration: none;" class="oh-sticky-table__td"
-              >
-              <button type='submit' class="oh-btn w-100"  title='{% trans "To employee " %}' style="opacity: 30%;">
-                <img style="height:28px;width:200%;" src="{% static 'images/ui/employee.png' %}" alt="Icon">
-              </button>                
-            </div>
-            {% else %}
-              <form action="{% url 'candidate-conversion' cand.id %}" style="color: inherit;text-decoration: none;" class="oh-sticky-table__td"
+            <button class="oh-btn oh-btn--light-bkg w-50"  title='{% trans "Converted " %}' style="opacity: 30%;">
+              <ion-icon name="person-circle-outline"></ion-icon>            </button>                
+          {% else %}
+            <a href="{% url 'candidate-conversion' cand.id %}"
               onsubmit="return confirm('{% trans "Are you sure you want to convert this candidate into an employee?" %}')"
-              >
-              {% csrf_token %}
-                <button type='submit' class="oh-btn w-100"  title='{% trans "To employee " %}'>
-                  <img style="height:28px;width:200%" src="{% static 'images/ui/employee.png' %}" alt="Icon">
-                </button>
-                </form>
-            {% endif %}
-            <button class="oh-btn w-100" title="{% trans 'To Skill zone' %}"
-              data-toggle="oh-modal-toggle"
-              data-target="#editCandModal" 
-              hx-get="{% url 'to-skill-zone' cand.id %}"
-              hx-target="#editCandTarget"
+              class="oh-btn oh-btn--light-bkg w-50"
+              title='{% trans "To employee " %}'
             >
-              <img style="height:28px;width:60%" src="{% static 'images/ui/directory.png' %}" alt="Icon">
-            </button>
+              <ion-icon name="person-circle-outline"></ion-icon>            </a>
+          {% endif %}
+            <button class="oh-btn oh-btn--light-bkg w-50" title="{% trans 'To Skill zone' %}"
+              data-toggle="oh-modal-toggle"
+              data-target="#createModal"
+              hx-get="{% url 'to-skill-zone' cand.id %}"
+              hx-target="#createTarget"
+            >
+            <ion-icon name="heart-circle-outline"></ion-icon>            
+          </button>
           </div>
         {% endif %}
-        
-
+        </div>
         <div href="#" style="color: inherit;text-decoration: none;" class="oh-sticky-table__td">
           <div class="oh-btn-group">
             {% if perms.recruitment.change_candidate %}
@@ -220,18 +209,8 @@
   </nav>
 </div>
 
-<div
-    class="oh-modal"
-    id="editCandModal"
-    role="dialog"
-    aria-labelledby="editDialogModal"
-    aria-hidden="true"
->
-    <div class="oh-modal__dialog">
-        <div class="oh-modal__dialog-header" id="editCandTarget">
-            
-    </div>
-</div>
+
+
 
 <script src="{% static '/candidate/bulk.js' %}"></script>
 
diff --git a/recruitment/templates/candidate/candidate_view.html b/recruitment/templates/candidate/candidate_view.html
index b73e6f28f..596cd5581 100644
--- a/recruitment/templates/candidate/candidate_view.html
+++ b/recruitment/templates/candidate/candidate_view.html
@@ -2,8 +2,13 @@
 {% block content %}
 {% load static %}
 {% load i18n %}
-
 <style>
+  .to-employee{
+    background: #f1ffd5;
+  }
+  .to-employee:hover{
+    background-color: #f1ffd5 !important;
+  }
   .oh-rate:not(:checked)>label:hover, .oh-rate:not(:checked)>label:hover~label{
     color: #ccc
   }
@@ -37,6 +42,16 @@
   </div>
 </div>
 
+<div class="oh-modal" id="createModal" role="dialog" aria-hidden="true">
+  <div class="oh-modal__dialog" style="max-width: 550px">
+      <div class="oh-modal__dialog-header">
+      <button type="button" class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
+      </div>
+
+      <div class="oh-modal__dialog-body" id="createTarget"></div>
+  </div>
+</div>
+
 <script>
   $(document).ready(function () {
     $("#candidate-search").keyup(function (e) { 
diff --git a/recruitment/templates/candidate/filters.html b/recruitment/templates/candidate/filters.html
index b0887a0f0..5ab895398 100644
--- a/recruitment/templates/candidate/filters.html
+++ b/recruitment/templates/candidate/filters.html
@@ -110,6 +110,10 @@
             <label class="oh-label">{% trans 'End Date' %}</label>
             {{ f.form.end_date }}
           </div>
+          <div class="oh-input-group">
+            <label class="oh-label">{% trans 'Skill Zone' %}</label>
+            {{ f.form.skillzonecandidate_set__skill_zone_id }}
+          </div>
         </div>
       </div>
     </div>
diff --git a/recruitment/templates/skill_zone/skill_zone_card.html b/recruitment/templates/skill_zone/skill_zone_card.html
index 1d3b8514d..f1e72e9ed 100644
--- a/recruitment/templates/skill_zone/skill_zone_card.html
+++ b/recruitment/templates/skill_zone/skill_zone_card.html
@@ -15,7 +15,13 @@
             </div>
         </div>
         <div class="oh-kanban-card__details">
-            <span class="oh-kanban-card__title">{{skill_zone}}</span>
+          
+            <span class="oh-kanban-card__title d-flex">
+              {{skill_zone}}
+              <span class="oh-badge oh-badge--secondary oh-badge--small oh-badge--round ms-2 mr-2"  title="{{skill_zone.skillzonecandidate_set.all|length}} Candidates" title="4 Stages" onclick="event.stopPropagation()">
+                {{skill_zone.skillzonecandidate_set.all|length}}
+              </span>
+            </span>
         </div>
         <div class="oh-kanban-card__dots">
             <div class="oh-dropdown" x-data="{show: false}" onclick="event.stopPropagation()">
@@ -31,14 +37,26 @@
                 @click.outside="show = false"
                 >
                 <ul class="oh-dropdown__items">
+                    {% if perms.add_skillzonecandidate %}
+                    <li class="oh-dropdown__item">
+                        <a onclick="event.stopPropagation();"
+                          hx-get="{% url 'skill-zone-cand-create' skill_zone.id %}"
+                          hx-target="#editCandTarget"
+                          data-toggle="oh-modal-toggle"
+                          data-target="#editCandModal"
+                        >{% trans "Add Candidate" %}</a>
+                    </li>
+                    {% endif %}
+                    {% if perms.change_skillzone %}
                     <li class="oh-dropdown__item">
                         <a onclick="event.stopPropagation();"
                           hx-get="{% url 'skill-zone-update' skill_zone.id %}"
-                          hx-target="#editTarget"
+                          hx-target="#createTarget"
                           data-toggle="oh-modal-toggle"
-                          data-target="#editModal1"
+                          data-target="#createModal"
                         >{% trans "Edit" %}</a>
                     </li>
+                    {% endif %}
                     {% if skill_zone.is_active %}
                       <li class="oh-dropdown__item">
                         <a 
@@ -110,18 +128,3 @@
       </ul>
     </nav>
 </div> 
-
-<div
-class="oh-modal"
-id="editModal1"
-role="dialog"
-aria-labelledby="editDialogModal"
-aria-hidden="true"
->
-<div class="oh-modal__dialog">
-    <div class="oh-modal__dialog-header">
-
-    </div>
-    <div class="oh-modal__dialog-body" id="editTarget"></div>
-</div>
-</div>
\ No newline at end of file
diff --git a/recruitment/templates/skill_zone/skill_zone_create.html b/recruitment/templates/skill_zone/skill_zone_create.html
index 55d6656bd..ccb609a88 100644
--- a/recruitment/templates/skill_zone/skill_zone_create.html
+++ b/recruitment/templates/skill_zone/skill_zone_create.html
@@ -1,32 +1,19 @@
 {% load i18n %}
 {% if form.errors %}
-<!-- form errors  -->
-    <div class="oh-wrapper">
-        <div class="oh-alert-container">
-            {% for error in form.non_field_errors %}
-            <div class="oh-alert oh-alert--animated oh-alert--danger">
-                {{ error }}
-            </div>
-            {% endfor %}
-        </div>
+  <!-- form errors -->
+  <div class="oh-wrapper">
+    <div class="oh-alert-container">
+      {% for error in form.non_field_errors %}
+        <div class="oh-alert oh-alert--animated oh-alert--danger">{{ error }}</div>
+      {% endfor %}
     </div>
+  </div>
 {% endif %}
+<form hx-post="{% url 'skill-zone-create' %}" id="skillform" hx-encoding="multipart/form-data">
+  {% csrf_token %}
+  {{ form.as_p }}
+</form>
 
-<div class="oh-modal__dialog-header">
-    <h2 class="oh-modal__dialog-title" id="createTitle">
-        {% trans "Create Skill Zone" %}
-    </h2>
-    <button class="oh-modal__close" aria-label="Close">
-        <ion-icon name="close-outline"></ion-icon>
-    </button>
-</div>
-<div class="oh-modal__dialog-body" >
-    <form  hx-post="{% url 'skill-zone-create' %}"  
-        hx-encoding="multipart/form-data">
-        {% csrf_token %}
-        {{form.as_p}}
-        <div class="oh-modal__dialog-footer">
-            <input class="oh-btn oh-btn--secondary oh-btn--shadow" type="submit" value='{% trans "Save" %}'>
-        </div>   
-    </form>
-</div> 
+<script>
+    $("#skillform .col-md-6").toggleClass("col-md-6");
+</script>
\ No newline at end of file
diff --git a/recruitment/templates/skill_zone/skill_zone_list.html b/recruitment/templates/skill_zone/skill_zone_list.html
index d953aaf16..c0a77765f 100644
--- a/recruitment/templates/skill_zone/skill_zone_list.html
+++ b/recruitment/templates/skill_zone/skill_zone_list.html
@@ -17,12 +17,23 @@
                         </div>
                     </span>
                     <div class="oh-btn-group">
+                        <a    class="oh-btn oh-btn--secondary oh-btn--shadow"
+                            onclick="event.stopPropagation();"
+
+                            data-toggle="oh-modal-toggle"
+                            data-target="#editCandModal"
+                            hx-get="{% url 'skill-zone-cand-create' skill_zone.id %}"
+                            hx-target="#editCandTarget"
+                        >
+                              <ion-icon name="add-outline" class="me-1"></ion-icon>
+                              {% trans "Add" %}
+                            </a>
                         <a
                           onclick="event.stopPropagation();"
                           hx-get="{% url 'skill-zone-update' skill_zone.id %}"
-                          hx-target="#editTarget"
+                          hx-target="#createTarget"
                           data-toggle="oh-modal-toggle"
-                          data-target="#editModal"
+                          data-target="#createModal"
                           class="oh-btn oh-btn--light-bkg w-100"
                           title="{% trans 'Edit' %}"
                           ><ion-icon name="create-outline"></ion-icon
@@ -74,19 +85,6 @@
                 </div>
                 <div class="oh-accordion-meta__body d-none">
                     <div class="oh-sticky-table oh-sticky-table--no-overflow mb-5">
-                        
-                        <div class="oh-btn-group ml-2" style="margin-left:90%">
-                            <a
-                              class="oh-btn oh-btn--secondary oh-btn--shadow"
-                              data-toggle="oh-modal-toggle"
-                              data-target="#editCandModal"
-                              hx-get="{% url 'skill-zone-cand-create' skill_zone.id %}"
-                              hx-target="#editCandTarget"
-                            >
-                              <ion-icon name="add-outline" class="me-1"></ion-icon>
-                              {% trans "Add" %}
-                            </a>
-                        </div>
                         <!-- start of sticky table -->
                         <div class="oh-sticky-table">
                             <div class="oh-sticky-table__table ">
@@ -270,27 +268,3 @@
 </div> 
 
 
-<div
-class="oh-modal"
-id="editModal"
-role="dialog"
-aria-labelledby="editDialogModal"
-aria-hidden="true"
->
-<div class="oh-modal__dialog">
-
-    <div class="oh-modal__dialog-body" id="editTarget"></div>
-</div>
-</div>
-
-<div
-    class="oh-modal"
-    id="editCandModal"
-    role="dialog"
-    aria-labelledby="editDialogModal"
-    aria-hidden="true"
->
-    <div class="oh-modal__dialog">
-        <div class="oh-modal__dialog-header" id="editCandTarget"></div>  
-    </div>
-</div>
\ No newline at end of file
diff --git a/recruitment/templates/skill_zone/skill_zone_nav.html b/recruitment/templates/skill_zone/skill_zone_nav.html
index bd33ad28b..bf284ba16 100644
--- a/recruitment/templates/skill_zone/skill_zone_nav.html
+++ b/recruitment/templates/skill_zone/skill_zone_nav.html
@@ -144,14 +144,3 @@
       </div>
     </div>
   </section>
-
-  <div
-    class="oh-modal"
-    id="createModal"
-    role="dialog"
-    aria-labelledby="createDialogModal"
-    aria-hidden="true"
-  >
-	<div class="oh-modal__dialog" id="createTarget">
-	</div>
-</div>
\ No newline at end of file
diff --git a/recruitment/templates/skill_zone/skill_zone_update.html b/recruitment/templates/skill_zone/skill_zone_update.html
index 937837817..632caec4d 100644
--- a/recruitment/templates/skill_zone/skill_zone_update.html
+++ b/recruitment/templates/skill_zone/skill_zone_update.html
@@ -1,32 +1,9 @@
 {% load i18n %}
-{% if form.errors %}
-<!-- form errors  -->
-    <div class="oh-wrapper">
-        <div class="oh-alert-container">
-            {% for error in form.non_field_errors %}
-            <div class="oh-alert oh-alert--animated oh-alert--danger">
-                {{ error }}
-            </div>
-            {% endfor %}
-        </div>
-    </div>
-{% endif %}
-
-<div class="oh-modal__dialog-header">
-    <h2 class="oh-modal__dialog-title" id="editTitle">
-        {% trans "Update Skill Zone" %}
-    </h2>
-    <button class="oh-modal__close" aria-label="Close">
-        <ion-icon name="close-outline"></ion-icon>
-    </button>
-</div>
-<div class="oh-modal__dialog-body" >
-    <form  hx-post="{% url 'skill-zone-update' sz_id %}"  
-        hx-encoding="multipart/form-data" >
-        {% csrf_token %}
-        {{form.as_p}}
-        <div class="oh-modal__dialog-footer">
-            <input class="oh-btn oh-btn--secondary oh-btn--shadow" type="submit" value='{% trans "Save" %}'>
-        </div>   
-    </form>
-</div> 
+<form id="skillform"  hx-post="{% url 'skill-zone-update' sz_id %}"  
+    hx-encoding="multipart/form-data" >
+    {% csrf_token %}
+    {{form.as_p}}
+</form>
+<script>
+    $("#skillform .col-md-6").toggleClass("col-md-6");
+</script>
\ No newline at end of file
diff --git a/recruitment/templates/skill_zone/skill_zone_view.html b/recruitment/templates/skill_zone/skill_zone_view.html
index 2fd0be586..73576606b 100644
--- a/recruitment/templates/skill_zone/skill_zone_view.html
+++ b/recruitment/templates/skill_zone/skill_zone_view.html
@@ -4,25 +4,34 @@
 
 <div class="oh-wrapper">
     {% include 'skill_zone/skill_zone_nav.html' %}
-    {% comment %} {% if skill_zones %} {% endcomment %}
         <div id="skill_zone_container">
-            {% if request.GET.view == 'list' %}
-                {% include "skill_zone/skill_zone_list.html" %}
-            {% else %}
-                {% include "skill_zone/skill_zone_card.html" %}
+          {% if request.GET.get.view == 'card' %}
+            {% include "skill_zone/skill_zone_card.html" %}
+          {% else %}
+            {% include "skill_zone/skill_zone_list.html" %}
             {% endif %}
         </div>
-    {% comment %} {% else %}
-        <div>
-            <div style="height: 310px; display:flex;align-items: center;justify-content: center;" >
-                <div style="" class="">
-                    <img style="display: block;width: 70px;margin: 10px auto ;" src="{% static 'images/ui/cv.png' %}" class="" alt=""/>
-                    <h3 style="font-size:16px" class="oh-404__subtitle">{% trans "You have no Skill Zone." %}</h3>
-                </div>
-            </div>
-        </div>
-    {% endif %} {% endcomment %}
 </div>
+
+<div class="oh-modal" id="editCandModal" role="dialog" aria-hidden="true">
+    <div class="oh-modal__dialog" style="max-width: 550px">
+        <div class="oh-modal__dialog-header">
+        <button type="button" class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
+        </div>
+        <div class="oh-modal__dialog-body" id="editCandTarget"></div>
+    </div>
+</div>
+<div class="oh-modal" id="createModal" role="dialog" aria-hidden="true">
+    <div class="oh-modal__dialog" style="max-width: 550px">
+        <div class="oh-modal__dialog-header">
+        <button type="button" class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
+        </div>
+
+        <div class="oh-modal__dialog-body" id="createTarget"></div>
+    </div>
+</div>
+  
+  
 {% endblock %}
 
 
diff --git a/recruitment/templates/skill_zone_cand/skill_zone_cand_card.html b/recruitment/templates/skill_zone_cand/skill_zone_cand_card.html
index 274fe61f9..12e73f653 100644
--- a/recruitment/templates/skill_zone_cand/skill_zone_cand_card.html
+++ b/recruitment/templates/skill_zone_cand/skill_zone_cand_card.html
@@ -137,29 +137,3 @@
         </div>
         <!-- end of pagination  -->
     </div>
-{% comment %} </div> {% endcomment %}
-
-{% comment %} <div
-class="oh-modal"
-id="createModal"
-role="dialog"
-aria-labelledby="createDialogModal"
-aria-hidden="true"
->
-<div class="oh-modal__dialog" id="createTarget">
-</div>
-</div> {% endcomment %}
-
-<div
-    class="oh-modal"
-    id="editCandModal"
-    role="dialog"
-    aria-labelledby="editDialogModal"
-    aria-hidden="true"
->
-    <div class="oh-modal__dialog">
-        <div class="oh-modal__dialog-header" id="editCandTarget">
-            
-    </div>
-</div>
-{% comment %} {% endblock %} {% endcomment %}
\ No newline at end of file
diff --git a/recruitment/templates/skill_zone_cand/skill_zone_cand_form.html b/recruitment/templates/skill_zone_cand/skill_zone_cand_form.html
index bb25f7ab6..8c8afabf8 100644
--- a/recruitment/templates/skill_zone_cand/skill_zone_cand_form.html
+++ b/recruitment/templates/skill_zone_cand/skill_zone_cand_form.html
@@ -1,33 +1,19 @@
 {% load i18n %}
+<form  
+    id="skillform"
+    {% if sz_id %}
+        hx-post="{% url 'skill-zone-cand-create' sz_id %}" 
+    {% elif cand_id %}
+        hx-post="{% url 'to-skill-zone' cand_id %}" 
+    {% else %}
+        hx-post="{% url 'skill-zone-cand-edit' sz_cand_id %}"
+    {% endif %}
+    hx-target="#editCandTarget"
+    hx-encoding="multipart/form-data">
+    {% csrf_token %}
+    {{form.as_p}} 
+</form>
 
-<div class="oh-modal__dialog-header">
-
-    <h2 class="oh-modal__dialog-title" id="createTitle">
-        {% if sz_id or cand_id %}
-            {% trans "Add Candidate" %}
-        {% else %}
-            {% trans "Edit Candidate" %}
-        {% endif %}
-    </h2>
-    <button class="oh-modal__close" aria-label="Close">
-        <ion-icon name="close-outline"></ion-icon>
-    </button>
-</div>
-<div class="oh-modal__dialog-body" >
-    <form  
-        {% if sz_id %}
-            hx-post="{% url 'skill-zone-cand-create' sz_id %}" 
-        {% elif cand_id %}
-            hx-post="{% url 'to-skill-zone' cand_id %}" 
-        {% else %}
-            hx-post="{% url 'skill-zone-cand-edit' sz_cand_id %}"
-        {% endif %}
-        hx-target="#editCandTarget"
-        hx-encoding="multipart/form-data">
-        {% csrf_token %}
-        {{form.as_p}}
-        <div class="oh-modal__dialog-footer">
-            <input class="oh-btn oh-btn--secondary oh-btn--shadow" type="submit" value='{% trans "Save" %}'>
-        </div>   
-    </form>
-</div> 
+<script>
+    $("#skillform .col-md-6").toggleClass("col-md-6");
+</script>
\ No newline at end of file
diff --git a/recruitment/templates/skill_zone_cand/to_skill_zone_form.html b/recruitment/templates/skill_zone_cand/to_skill_zone_form.html
index a3ebb3e74..1c1446d6a 100644
--- a/recruitment/templates/skill_zone_cand/to_skill_zone_form.html
+++ b/recruitment/templates/skill_zone_cand/to_skill_zone_form.html
@@ -1,51 +1,12 @@
 {% load i18n %}
-
-<div class="oh-modal__dialog-header">
-
-    <h2 class="oh-modal__dialog-title" id="createTitle">
-            {% trans "Add Candidate" %}
-    </h2>
-    <button class="oh-modal__close" aria-label="Close">
-        <ion-icon name="close-outline"></ion-icon>
-    </button>
-</div>
-<div class="oh-modal__dialog-body" >
     <form  
         hx-post="{% url 'to-skill-zone' cand_id %}" 
-        hx-target="#editCandTarget"
+        hx-target="#createTarget"
         hx-encoding="multipart/form-data"
-    >
-        {% csrf_token %}
-        
-        {% if form.non_field_errors %}
-        <span class="error">{{ form.non_field_errors }}</span>
-        {% endif %}
-        <div class="col-12 col-sm-12 col-md-6 col-lg-12">
-            {{form.candidate_id}}
-            <div class="oh-input__group">
-              <label class="oh-input__label" for="keyType">{% trans "Skill zones" %}</label>
-              {{form.skill_zone_ids}}
-              {{form.skill_zone_ids.errors}}
-            </div>
-        </div> 
-        <div class="col-12 col-sm-12 col-md-6 col-lg-12">
-            <div class="oh-input__group">
-              <label class="oh-input__label" for="keyType">{% trans "Reason" %}</label>
-              {{form.reason}}
-              {{form.reason.errors}}
-            </div>
-        </div> 
-        <div class="col-12 col-sm-12 col-md-6 col-lg-12">
-            <div class="oh-input__group">
-              <label class="oh-input__label" for="keyType">{% trans "Is active" %}</label>
-              {{form.is_active}}
-              {{form.is_active.errors}}
-            </div>
-        </div> 
-
-            {% comment %} {{form.as_p}} {% endcomment %}
-        <div class="oh-modal__dialog-footer">
-            <input class="oh-btn oh-btn--secondary oh-btn--shadow" type="submit" value='{% trans "Save" %}'>
-        </div>   
+        id="skillform"
+    >        
+        {{form.as_p}}
     </form>
-</div> 
+    <script>
+        $("#skillform .col-md-6").toggleClass("col-md-6");
+    </script>
\ No newline at end of file