From 0d1a9d9aa80856c65aae0f4e638e87cb7d69e705 Mon Sep 17 00:00:00 2001
From: Horilla <teamhorilla@gmail.com>
Date: Tue, 13 Feb 2024 13:53:15 +0530
Subject: [PATCH] [UPDT] RECRUITMENT: Candidate view with empty page

---
 .../templates/candidate/candidate_card.html   | 235 ++++++-----
 .../templates/candidate/candidate_list.html   | 385 ++++++++++--------
 2 files changed, 330 insertions(+), 290 deletions(-)

diff --git a/recruitment/templates/candidate/candidate_card.html b/recruitment/templates/candidate/candidate_card.html
index 603391200..3b0235dc6 100644
--- a/recruitment/templates/candidate/candidate_card.html
+++ b/recruitment/templates/candidate/candidate_card.html
@@ -1,5 +1,6 @@
 {% load i18n %}
 {% load basefilters %}
+{% load static %}
 {{candidates}}
 
 <style>
@@ -30,123 +31,139 @@
 
 {% include 'filter_tags.html' %}
 
-<div class="oh-layout--grid-3">
-  {% for cand in data %}
-  <div {% if cand.recruitment_id.closed %} style="background: #8080800f;" {% endif %}  class="oh-kanban-card candidate {% if cand.canceled == True %} row-status--red {% elif cand.hired == True %} row-status--yellow {% endif %}" style="color: inherit;text-decoration: none;">
-    <a href="{% url 'candidate-view-individual' cand.id %}" style="color: inherit;text-decoration: none; display: flex;">
-    <div class="oh-kanban-card__avatar">
-        <div class="oh-kanban-card__profile-container">
-          <img
-            src="{{cand.get_avatar}}"
-            class="oh-kanban-card__profile-image"
-            alt="Username"
-            />
-        </div>
-    </div>
-    
-    <div class="oh-kanban-card__details">
-      <span class="oh-kanban-card__title">{{cand.name}}</span>
-      <span class="oh-kanban-card__subtitle">{{cand.email}}</span><br>
-      <span class="oh-kanban-card__subtitle">{{cand.job_position_id}}</span>
-    </div>
-  </a>
-    <div class="oh-kanban-card__dots">
-      <div class="oh-dropdown" x-data="{show: false}">
-        <button class="oh-btn oh-btn--transparent text-muted p-3" @click="show = !show" title={% trans "Actions" %}>
-          <ion-icon name="ellipsis-vertical-sharp" title="{% trans 'Options' %}" role="img" class="md hydrated" aria-label="ellipsis vertical sharp"></ion-icon>
-        </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>
-            </li>
-            {% endif %}
-            {% if perms.recruitment.delete_candidate %}
-            {% if cand.is_active  %}
-            <li class="oh-dropdown__item">
-              <a href="{% url 'rec-candidate-archive' cand.id %}" onclick="return confirm('{% trans "Do you want to archive this candidate?" %}')" class="oh-dropdown__link">{% trans "Archive" %}</a>
-            </li>
-            {% else %}
-            <li class="oh-dropdown__item">
-              <a href="{% url 'rec-candidate-archive' cand.id %}" onclick="return confirm('{% trans "Do you want to un-archive this candidate?" %}')" class="oh-dropdown__link">{% trans "Un-Archive" %}</a>
-            </li>
-            {% endif %}
-            {% endif %}
-            {% if perms.recruitment.delete_candidate %}
-            <li class="oh-dropdown__item">
-              <form action="{% url 'rec-candidate-delete' cand.id %}" onsubmit="return confirm('{% trans "Do you want to delete this candidate?" %}')" method="post">
-                {% csrf_token %}
-                <button  class="oh-dropdown__link oh-dropdown__link--danger  ">{% trans "Delete" %}</button>
-              </form>
+{% if data %}
+  <!-- start of sticky table -->
+  <div class="oh-layout--grid-3">
+    {% for cand in data %}
+    <div {% if cand.recruitment_id.closed %} style="background: #8080800f;" {% endif %}  class="oh-kanban-card candidate {% if cand.canceled == True %} row-status--red {% elif cand.hired == True %} row-status--yellow {% endif %}" style="color: inherit;text-decoration: none;">
+      <a href="{% url 'candidate-view-individual' cand.id %}" style="color: inherit;text-decoration: none; display: flex;">
+      <div class="oh-kanban-card__avatar">
+          <div class="oh-kanban-card__profile-container">
+            <img
+              src="{{cand.get_avatar}}"
+              class="oh-kanban-card__profile-image"
+              alt="Username"
+              />
+          </div>
+      </div>
+      
+      <div class="oh-kanban-card__details">
+        <span class="oh-kanban-card__title">{{cand.name}}</span>
+        <span class="oh-kanban-card__subtitle">{{cand.email}}</span><br>
+        <span class="oh-kanban-card__subtitle">{{cand.job_position_id}}</span>
+      </div>
+    </a>
+      <div class="oh-kanban-card__dots">
+        <div class="oh-dropdown" x-data="{show: false}">
+          <button class="oh-btn oh-btn--transparent text-muted p-3" @click="show = !show" title={% trans "Actions" %}>
+            <ion-icon name="ellipsis-vertical-sharp" title="{% trans 'Options' %}" role="img" class="md hydrated" aria-label="ellipsis vertical sharp"></ion-icon>
+          </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>
+              </li>
+              {% endif %}
+              {% if perms.recruitment.delete_candidate %}
+              {% if cand.is_active  %}
+              <li class="oh-dropdown__item">
+                <a href="{% url 'rec-candidate-archive' cand.id %}" onclick="return confirm('{% trans "Do you want to archive this candidate?" %}')" class="oh-dropdown__link">{% trans "Archive" %}</a>
+              </li>
+              {% else %}
+              <li class="oh-dropdown__item">
+                <a href="{% url 'rec-candidate-archive' cand.id %}" onclick="return confirm('{% trans "Do you want to un-archive this candidate?" %}')" class="oh-dropdown__link">{% trans "Un-Archive" %}</a>
+              </li>
+              {% endif %}
+              {% endif %}
+              {% if perms.recruitment.delete_candidate %}
+              <li class="oh-dropdown__item">
+                <form action="{% url 'rec-candidate-delete' cand.id %}" onsubmit="return confirm('{% trans "Do you want to delete this candidate?" %}')" method="post">
+                  {% csrf_token %}
+                  <button  class="oh-dropdown__link oh-dropdown__link--danger  ">{% trans "Delete" %}</button>
+                </form>
 
-            </li>
-            {% endif %}
-          </ul>
+              </li>
+              {% endif %}
+            </ul>
+          </div>
         </div>
       </div>
     </div>
+    {% endfor %}
   </div>
-  {% endfor %}
-</div>
+  <!-- end of sticky table -->
 
-
-
-
-<div class="oh-pagination">
-  <span
-    class="oh-pagination__page"
-    data-toggle="modal"
-    data-target="#addEmployeeModal"
+  <!-- start of pagination -->
+  <div class="oh-pagination">
+    <span
+      class="oh-pagination__page"
+      data-toggle="modal"
+      data-target="#addEmployeeModal"
+      >
+      {% trans "Page" %} {{ data.number }} {% trans "of" %} {{ data.paginator.num_pages }}.
+      </span
     >
-    {% trans "Page" %} {{ data.number }} {% trans "of" %} {{ data.paginator.num_pages }}.
-    </span
-  >
-  <nav class="oh-pagination__nav">
-    <div class="oh-pagination__input-container me-3">
-      <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
+    <nav class="oh-pagination__nav">
+      <div class="oh-pagination__input-container me-3">
+        <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
 
-      <input
-        type="number"
-        name="page"
-        class="oh-pagination__input"
-        value="{{data.number}}"
-        hx-get="{% url 'search-candidate' %}?{{pd}}&view=card"
-        hx-target="#section"
-        min="1"
-      />
-      <span class="oh-pagination__label">{% trans "of" %} {{data.paginator.num_pages}}</span>
-    </div>
+        <input
+          type="number"
+          name="page"
+          class="oh-pagination__input"
+          value="{{data.number}}"
+          hx-get="{% url 'search-candidate' %}?{{pd}}&view=card"
+          hx-target="#section"
+          min="1"
+        />
+        <span class="oh-pagination__label">{% trans "of" %} {{data.paginator.num_pages}}</span>
+      </div>
 
-    <ul class="oh-pagination__items">
-      {% if data.has_previous %}
-      <li class="oh-pagination__item oh-pagination__item--wide">
-        <a hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page=1&view=card" class="oh-pagination__link">{% trans "First" %}</a>
-      </li>
-      <li class="oh-pagination__item oh-pagination__item--wide">
-        <a hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page={{ data.previous_page_number }}&view=card" class="oh-pagination__link">{% trans "Previous" %}</a>
-      </li>
-      {% endif %}
-      {% if data.has_next %}
-      <li class="oh-pagination__item oh-pagination__item--wide">
-        <a hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page={{ data.next_page_number }}&view=card" class="oh-pagination__link">{% trans "Next" %}</a>
-      </li>
-      <li class="oh-pagination__item oh-pagination__item--wide">
-        <a hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page={{ data.paginator.num_pages }}&view=card" class="oh-pagination__link">{% trans "Last" %}</a>
-      </li>
-      {% endif %}
+      <ul class="oh-pagination__items">
+        {% if data.has_previous %}
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page=1&view=card" class="oh-pagination__link">{% trans "First" %}</a>
+        </li>
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page={{ data.previous_page_number }}&view=card" class="oh-pagination__link">{% trans "Previous" %}</a>
+        </li>
+        {% endif %}
+        {% if data.has_next %}
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page={{ data.next_page_number }}&view=card" class="oh-pagination__link">{% trans "Next" %}</a>
+        </li>
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page={{ data.paginator.num_pages }}&view=card" class="oh-pagination__link">{% trans "Last" %}</a>
+        </li>
+        {% endif %}
 
-    </ul>
-  </nav>
-</div>
+      </ul>
+    </nav>
+  </div>
+  <!-- end of pagination -->
+{% else %}
+  <!-- start of empty page -->
+  <div class="oh-404">
+    <img
+      style="width: 150px; height: 150px"
+      src="{% static 'images/ui/no-results.png' %}"
+      class="oh-404__image mb-4"
+    />
+    <h5 class="oh-404__subtitle">
+      {% trans "No search result found!" %}
+    </h5>
+  </div>
+  <!-- end of empty page -->
+{% endif %}
 
diff --git a/recruitment/templates/candidate/candidate_list.html b/recruitment/templates/candidate/candidate_list.html
index 8e49e69be..629d95753 100644
--- a/recruitment/templates/candidate/candidate_list.html
+++ b/recruitment/templates/candidate/candidate_list.html
@@ -14,6 +14,8 @@
 {% endif %}
 {% include 'filter_tags.html' %}
 
+<!-- start of quick filters -->
+
 <div class="oh-checkpoint-badge text-success mb-2" id="selectAllInstances" style="cursor: pointer;">
   {% trans "Select All Candidates" %}
 </div>
@@ -25,204 +27,225 @@
 </div>
 <div class="oh-checkpoint-badge text-danger mb-2" id="selectedCandidate" >
 </div>
+<!-- start of quick filters -->
 
-<div class="oh-sticky-table">
-  <div class="oh-sticky-table__table oh-table--sortable">
-    <div class="oh-sticky-table__thead">
-      <div class="oh-sticky-table__tr">
-        <div class="oh-sticky-table__th" style="width:10px;">
-          <div class="centered-div">
-            <input type="checkbox" class="oh-input oh-input__checkbox all-candidate" title="Select All"  id = "allCandidate"/>
+{% if data %}
+  <!-- start of sticky table -->
+  <div class="oh-sticky-table">
+    <div class="oh-sticky-table__table oh-table--sortable">
+      <div class="oh-sticky-table__thead">
+        <div class="oh-sticky-table__tr">
+          <div class="oh-sticky-table__th" style="width:10px;">
+            <div class="centered-div">
+              <input type="checkbox" class="oh-input oh-input__checkbox all-candidate" title="Select All"  id = "allCandidate"/>
+            </div>
           </div>
+          <div class="oh-sticky-table__th {% if request.sort_option.order == '-name' %}arrow-up {% elif request.sort_option.order == 'name' %}arrow-down {% else %} arrow-up-down {% endif %}"  hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&orderby=name&view=list">{% trans "Candidates" %}</div>
+          <div class="oh-sticky-table__th">{% trans "Email" %}</div>
+          <div class="oh-sticky-table__th">{% trans "Phone" %}</div>
+          <div class="oh-sticky-table__th">{% trans "Rating" %}</div>
+          <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 "Options" %}</div>
+          <div class="oh-sticky-table__th"  style="width: 190px;">{% trans "Actions" %}</div>
         </div>
-        <div class="oh-sticky-table__th {% if request.sort_option.order == '-name' %}arrow-up {% elif request.sort_option.order == 'name' %}arrow-down {% else %} arrow-up-down {% endif %}"  hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&orderby=name&view=list">{% trans "Candidates" %}</div>
-        <div class="oh-sticky-table__th">{% trans "Email" %}</div>
-        <div class="oh-sticky-table__th">{% trans "Phone" %}</div>
-        <div class="oh-sticky-table__th">{% trans "Rating" %}</div>
-        <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 "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 {% 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  
-        {% else %} row-status--purple
-        {% endif %}">
-          <div class="centered-div">
-            <input
-              type="checkbox"
-              id="{{cand.id}}"
-              onchange="highlightRow($(this))"
-              class="oh-input candidate-checkbox oh-input__checkbox all-candidate-row"
-            />
+      {% for cand in data %}
+      <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  
+          {% else %} row-status--purple
+          {% endif %}">
+            <div class="centered-div">
+              <input
+                type="checkbox"
+                id="{{cand.id}}"
+                onchange="highlightRow($(this))"
+                class="oh-input candidate-checkbox oh-input__checkbox all-candidate-row"
+              />
+            </div>
           </div>
-        </div>
-        <div class="oh-sticky-table__td candidate {% if cand.hired %}hired-cand{% endif %}">
-          <div class="d-flex">
-            <a href="{% url 'candidate-view-individual' cand.id %}" style="color: inherit;text-decoration: none;" 
-            class="oh-profile oh-profile--md">
-              <div class="oh-profile__avatar mr-1">
-                <img src="{{cand.get_avatar}}"
-                class="oh-profile__image"
-                alt="Username" />
-              </div>
-              <span class="oh-profile__name oh-text--dark">{{cand}}</span>
-            </a>
-          </div>
-        </div>
-
-        <a href="{% url 'candidate-view-individual' cand.id %}" style="color: inherit;text-decoration: none;" class="oh-sticky-table__td ">{{cand.email}}</a>
-        <a href="{% url 'candidate-view-individual' cand.id %}" style="color: inherit;text-decoration: none;" class="oh-sticky-table__td">{{cand.mobile}}</a>
-        <a href="{% url 'candidate-view-individual' cand.id %}" style="color: inherit;text-decoration: none;" class="oh-sticky-table__td">
-          {% with request.user.employee_get.candidate_rating.all as candidate_ratings  %}
-            <form >
-              <div class="d-block mb-0">                           
-                <div class="oh-rate" onmouseenter="event.stopPropagation()">
-                  {% for i in "54321" %}
-                  <input type="radio" id="star{{i}}{{cand.id}}" name="rating" class="rating-radio" value="{{i}}" disabled {% if cand.candidate_rating.all|avg_rating:cand == i %} checked {% endif %} />
-                  <label for="star{{i}}{{cand.id}}" >5 {% trans "Stars" %}</label>
-                  {% endfor %}
+          <div class="oh-sticky-table__td candidate {% if cand.hired %}hired-cand{% endif %}">
+            <div class="d-flex">
+              <a href="{% url 'candidate-view-individual' cand.id %}" style="color: inherit;text-decoration: none;" 
+              class="oh-profile oh-profile--md">
+                <div class="oh-profile__avatar mr-1">
+                  <img src="{{cand.get_avatar}}"
+                  class="oh-profile__image"
+                  alt="Username" />
                 </div>
-                <span id="rating-radio-error"></span>
-              </div>
-            </form>
-          {% endwith %}
-        </a>
-        <a href="{% url 'candidate-view-individual' cand.id %}" style="color: inherit;text-decoration: none;"
-          class="oh-sticky-table__td">{{cand.recruitment_id}}</a>
-        <a href="{% url 'candidate-view-individual' cand.id %}" style="color: inherit;text-decoration: none;"
-          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>
-        <div class="oh-sticky-table__td">
-          {% if perms.recruitment.change_candidate %}
-          <div class="oh-btn-group">
-            {% if cand.email in emp_list %}
-            <button class="oh-btn oh-btn--light-bkg w-50"  title='{% trans "Converted " %}' style="opacity: 30%; padding:0.8rem 1rem">
-              <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?" %}')"
-              class="oh-btn oh-btn--light-bkg w-50"
-              title='{% trans "To employee " %}'
-              style="padding:0.8rem 1rem"
-            >
-              <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"
-              style="padding:0.8rem 1rem"
-            >
-            <ion-icon name="heart-circle-outline"></ion-icon>            
-          </button>
-          <button
-            type="button"
-            hx-get='{% url "send-mail" cand.id %}'
-            title="{% trans "Send Mail" %}"
-            hx-target="#mail-content"
-            hx-swap="innerHTML"
-            class="oh-btn oh-btn--light-bkg w-50"
-            data-toggle="oh-modal-toggle"
-            data-target="#sendMailModal"
-            style="padding:0.8rem 1rem"
-          >
-            <ion-icon name="mail-open-outline"></ion-icon>
-          </button>
+                <span class="oh-profile__name oh-text--dark">{{cand}}</span>
+              </a>
+            </div>
           </div>
-        {% endif %}
-        </div>
-        <div href="#" style="color: inherit;text-decoration: none;" class="oh-sticky-table__td">
-          <div class="oh-btn-group">
+
+          <a href="{% url 'candidate-view-individual' cand.id %}" style="color: inherit;text-decoration: none;" class="oh-sticky-table__td ">{{cand.email}}</a>
+          <a href="{% url 'candidate-view-individual' cand.id %}" style="color: inherit;text-decoration: none;" class="oh-sticky-table__td">{{cand.mobile}}</a>
+          <a href="{% url 'candidate-view-individual' cand.id %}" style="color: inherit;text-decoration: none;" class="oh-sticky-table__td">
+            {% with request.user.employee_get.candidate_rating.all as candidate_ratings  %}
+              <form >
+                <div class="d-block mb-0">                           
+                  <div class="oh-rate" onmouseenter="event.stopPropagation()">
+                    {% for i in "54321" %}
+                    <input type="radio" id="star{{i}}{{cand.id}}" name="rating" class="rating-radio" value="{{i}}" disabled {% if cand.candidate_rating.all|avg_rating:cand == i %} checked {% endif %} />
+                    <label for="star{{i}}{{cand.id}}" >5 {% trans "Stars" %}</label>
+                    {% endfor %}
+                  </div>
+                  <span id="rating-radio-error"></span>
+                </div>
+              </form>
+            {% endwith %}
+          </a>
+          <a href="{% url 'candidate-view-individual' cand.id %}" style="color: inherit;text-decoration: none;"
+            class="oh-sticky-table__td">{{cand.recruitment_id}}</a>
+          <a href="{% url 'candidate-view-individual' cand.id %}" style="color: inherit;text-decoration: none;"
+            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>
+          <div class="oh-sticky-table__td">
             {% if perms.recruitment.change_candidate %}
-            <a href="{% url 'rec-candidate-update' cand.id %}" hx-target='#updateFormContainer' hx-swap='innerHTML'
-              class="oh-btn oh-btn--light-bkg w-50" title="Edit"><ion-icon name="create-outline"></ion-icon></a>
-            {% endif %}
-            {% if perms.recruitment.delete_candidate %}
-            {% if cand.is_active %}
-            <form action="{% url 'rec-candidate-archive' cand.id  %}" title="Archive" onsubmit="return confirm('{% trans "Do you want to archive this candidate?" %}')" method='post'
-              class="w-50">
-            {% csrf_token %}
-            <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
-              ><ion-icon name="archive" title="Archive"></ion-icon></button>
-            </form>
+            <div class="oh-btn-group">
+              {% if cand.email in emp_list %}
+              <button class="oh-btn oh-btn--light-bkg w-50"  title='{% trans "Converted " %}' style="opacity: 30%; padding:0.8rem 1rem">
+                <ion-icon name="person-circle-outline"></ion-icon>            </button>                
             {% else %}
-            
-            <form action="{% url 'rec-candidate-archive' cand.id  %}"  title="Un Archive" onsubmit="return confirm('{% trans "Do you want to un-archive this candidate?" %}')" method='post'
-              class="w-50">
-              {% csrf_token %}
-              <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
-                ><ion-icon name="archive"></ion-icon></button>
-            </form>
-            {% endif %}
-            {% endif %}
-            {% if perms.recruitment.delete_candidate %}
-            <form action="{% url 'rec-candidate-delete' cand.id  %}" onsubmit="return confirm('{% trans "Do you want to delete this candidate?" %}')" method='post'
-              onsubmit="Are you sure want to delete this candidate?" class="w-50">
-              {% csrf_token %}
-              <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
-                title="Remove"><ion-icon name="trash-outline"></ion-icon></button>
-            </form>
+              <a href="{% url 'candidate-conversion' cand.id %}"
+                onsubmit="return confirm('{% trans "Are you sure you want to convert this candidate into an employee?" %}')"
+                class="oh-btn oh-btn--light-bkg w-50"
+                title='{% trans "To employee " %}'
+                style="padding:0.8rem 1rem"
+              >
+                <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"
+                style="padding:0.8rem 1rem"
+              >
+              <ion-icon name="heart-circle-outline"></ion-icon>            
+            </button>
+            <button
+              type="button"
+              hx-get='{% url "send-mail" cand.id %}'
+              title="{% trans "Send Mail" %}"
+              hx-target="#mail-content"
+              hx-swap="innerHTML"
+              class="oh-btn oh-btn--light-bkg w-50"
+              data-toggle="oh-modal-toggle"
+              data-target="#sendMailModal"
+              style="padding:0.8rem 1rem"
+            >
+              <ion-icon name="mail-open-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 %}
+              <a href="{% url 'rec-candidate-update' cand.id %}" hx-target='#updateFormContainer' hx-swap='innerHTML'
+                class="oh-btn oh-btn--light-bkg w-50" title="Edit"><ion-icon name="create-outline"></ion-icon></a>
+              {% endif %}
+              {% if perms.recruitment.delete_candidate %}
+              {% if cand.is_active %}
+              <form action="{% url 'rec-candidate-archive' cand.id  %}" title="Archive" onsubmit="return confirm('{% trans "Do you want to archive this candidate?" %}')" method='post'
+                class="w-50">
+              {% csrf_token %}
+              <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                ><ion-icon name="archive" title="Archive"></ion-icon></button>
+              </form>
+              {% else %}
+              
+              <form action="{% url 'rec-candidate-archive' cand.id  %}"  title="Un Archive" onsubmit="return confirm('{% trans "Do you want to un-archive this candidate?" %}')" method='post'
+                class="w-50">
+                {% csrf_token %}
+                <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                  ><ion-icon name="archive"></ion-icon></button>
+              </form>
+              {% endif %}
+              {% endif %}
+              {% if perms.recruitment.delete_candidate %}
+              <form action="{% url 'rec-candidate-delete' cand.id  %}" onsubmit="return confirm('{% trans "Do you want to delete this candidate?" %}')" method='post'
+                onsubmit="Are you sure want to delete this candidate?" class="w-50">
+                {% csrf_token %}
+                <button type='submit' class="oh-btn oh-btn--danger-outline oh-btn--light-bkg w-100"
+                  title="Remove"><ion-icon name="trash-outline"></ion-icon></button>
+              </form>
+              {% endif %}
+            </div>
+          </div>
+
+          </a>
         </div>
 
-        </a>
+      </div>
+      {% endfor %}
+    </div>
+
+  </div>
+  <!-- end of sticky table -->
+
+  <!-- start of pagination -->
+  <div class="oh-pagination">
+    <span class="oh-pagination__page" data-toggle="modal" data-target="#addEmployeeModal">
+      {% trans "Page" %} {{ data.number }} {% trans "of" %} {{ data.paginator.num_pages }}.
+    </span>
+    <nav class="oh-pagination__nav">
+      <div class="oh-pagination__input-container me-3">
+        <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
+
+        <input type="number" name="page" class="oh-pagination__input" value="{{data.number}}"
+          hx-get="{% url 'search-candidate' %}?{{pd}}&view=list" hx-target="#section" min="1" />
+        <span class="oh-pagination__label">{% trans "of" %} {{data.paginator.num_pages}}</span>
       </div>
 
-    </div>
-    {% endfor %}
+      <ul class="oh-pagination__items">
+        {% if data.has_previous %}
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page=1&view=list"
+            class="oh-pagination__link" onclick=tickCandidateCheckboxes()>{% trans "First" %}</a>
+        </li>
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a hx-target='#section'
+            hx-get="{% url 'search-candidate' %}?{{pd}}&page={{ data.previous_page_number }}&view=list"
+            class="oh-pagination__link" onclick=tickCandidateCheckboxes()>{% trans "Previous" %}</a>
+        </li>
+        {% endif %}
+        {% if data.has_next %}
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page={{ data.next_page_number }}&view=list"
+            class="oh-pagination__link" onclick=tickCandidateCheckboxes()>{% trans "Next" %}</a>
+        </li>
+        <li class="oh-pagination__item oh-pagination__item--wide">
+          <a hx-target='#section'
+            hx-get="{% url 'search-candidate' %}?{{pd}}&page={{ data.paginator.num_pages }}&view=list"
+            class="oh-pagination__link" onclick=tickCandidateCheckboxes()>{% trans "Last" %}</a>
+        </li>
+        {% endif %}
+
+      </ul>
+    </nav>
   </div>
+  <!-- end of pagination -->
 
-</div>
-
-<div class="oh-pagination">
-  <span class="oh-pagination__page" data-toggle="modal" data-target="#addEmployeeModal">
-    {% trans "Page" %} {{ data.number }} {% trans "of" %} {{ data.paginator.num_pages }}.
-  </span>
-  <nav class="oh-pagination__nav">
-    <div class="oh-pagination__input-container me-3">
-      <span class="oh-pagination__label me-1">{% trans "Page" %}</span>
-
-      <input type="number" name="page" class="oh-pagination__input" value="{{data.number}}"
-        hx-get="{% url 'search-candidate' %}?{{pd}}&view=list" hx-target="#section" min="1" />
-      <span class="oh-pagination__label">{% trans "of" %} {{data.paginator.num_pages}}</span>
-    </div>
-
-    <ul class="oh-pagination__items">
-      {% if data.has_previous %}
-      <li class="oh-pagination__item oh-pagination__item--wide">
-        <a hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page=1&view=list"
-          class="oh-pagination__link" onclick=tickCandidateCheckboxes()>{% trans "First" %}</a>
-      </li>
-      <li class="oh-pagination__item oh-pagination__item--wide">
-        <a hx-target='#section'
-          hx-get="{% url 'search-candidate' %}?{{pd}}&page={{ data.previous_page_number }}&view=list"
-          class="oh-pagination__link" onclick=tickCandidateCheckboxes()>{% trans "Previous" %}</a>
-      </li>
-      {% endif %}
-      {% if data.has_next %}
-      <li class="oh-pagination__item oh-pagination__item--wide">
-        <a hx-target='#section' hx-get="{% url 'search-candidate' %}?{{pd}}&page={{ data.next_page_number }}&view=list"
-          class="oh-pagination__link" onclick=tickCandidateCheckboxes()>{% trans "Next" %}</a>
-      </li>
-      <li class="oh-pagination__item oh-pagination__item--wide">
-        <a hx-target='#section'
-          hx-get="{% url 'search-candidate' %}?{{pd}}&page={{ data.paginator.num_pages }}&view=list"
-          class="oh-pagination__link" onclick=tickCandidateCheckboxes()>{% trans "Last" %}</a>
-      </li>
-      {% endif %}
-
-    </ul>
-  </nav>
-</div>
+{% else %}
+  <!-- start of empty page -->
+  <div class="oh-404">
+    <img
+      style="width: 150px; height: 150px"
+      src="{% static 'images/ui/no-results.png' %}"
+      class="oh-404__image mb-4"
+    />
+    <h5 class="oh-404__subtitle">
+      {% trans "No search result found!" %}
+    </h5>
+  </div>
+  <!-- end of empty page -->
+{% endif %}
 
 <div class="oh-modal" id="sendMailModal" role="dialog" aria-labelledby="sendMailModal" aria-hidden="true">
   <div class="oh-modal__dialog">