   <%- header %>
   <!-- pre-rendered navbar inserted -->
   <main class="dashboard-main">
     <%- navbar %>
     <!-- pre-rendered navbar inserted -->

     <style>
       /* Choices.js Styles */
       .choices__item {
         background-color: #d3d5d7;
         color: black;
         border-radius: 3px;
         padding: 5px 10px;
         margin: 3px;
         display: flex;
         align-items: center;
       }

       .choices__item__remove {
         margin-left: 8px;
         color: white;
         font-size: 12px;
         cursor: pointer;
       }

       .choices {
         position: relative;
         overflow: visible !important;
         /* ensure dropdown can escape */
       }

       .choices__list--dropdown {
         z-index: 9999;
         /* bring it above other UI */
       }

       .table-responsive,
       .card {
         overflow: visible !important;
       }

       /* Selected item tag (chips) */
       .choices__list--multiple .choices__item {
         background-color: #6366f1 !important;
         /* Indigo */
         border: 1px solid #6366f1 !important;
         color: #fff !important;
       }

       /* Dropdown option on hover */
       .choices__list--dropdown .choices__item--selectable.is-highlighted {
         background-color: #6366f1 !important;
         color: #fff !important;
       }


       .choices__input {
         padding: 10px;
       }
     </style>

     <style>
       /* Mobile-specific styles for the select multiple */
       @media (max-width: 767.98px) {
         .choices-multiple .choices__inner {
           min-height: 36px;
           padding: 3px 5px;
         }

         .choices-multiple .choices__list--multiple .choices__item {
           margin-bottom: 2px;
           padding: 2px 5px;
           font-size: 0.75rem;
         }

         .choices-multiple .choices__list--dropdown .choices__item {
           padding: 5px 10px;
           font-size: 0.85rem;
         }
       }

       /* Make sure cards don't stretch too wide on larger mobile devices */
       @media (max-width: 991.98px) {
         .card {
           max-width: 100%;
           margin-left: auto;
           margin-right: auto;
         }
       }
     </style>
     <style>
       /* Custom styles */
       .choices-multiple {
         min-height: 44px;
       }

       .choices-multiple .choices__list--multiple .choices__item {
         background-color: #6366f1;
         border-color: #6366f1;
         font-size: 0.825rem;
         padding: 2px 8px;
       }

       .table tbody tr:hover {
         background-color: rgba(99, 102, 241, 0.05);
       }

       @media (max-width: 767.98px) {
         .table-responsive {
           border: 0;
         }

         .table thead {
           display: none;
         }

         .table tr {
           display: block;
           margin-bottom: 1.5rem;
           border: 1px solid #dee2e6 !important;
           border-radius: 0.5rem;
           overflow: hidden;
         }

         .table td {
           display: block;
           text-align: right;
           padding-left: 50% !important;
           position: relative;
           border-bottom: 1px solid #dee2e6;
         }

         .table td::before {
           content: attr(data-label);
           position: absolute;
           left: 1rem;
           width: calc(50% - 1rem);
           padding-right: 1rem;
           text-align: left;
           font-weight: 500;
           color: #6c757d;
         }

         .table td:first-child {
           border-top: 0;
         }

         .table td:last-child {
           border-bottom: 0;
         }

         /* Add data-label attributes dynamically or via JavaScript */
       }
     </style>



     <div class="container flex-1 pt-20 w-full my-4">

       <%- include('../../partials/utils/title.ejs', {title: "Add Downward Category"}) %>

       <% 
    const breadcrumbs = [
      { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
       { label: "Add Downward Category" }
    ];
  %>

       <%- include('../../partials/utils/breadcrumb', { breadcrumbs }) %>



       <div class="card basic-data-table" style="margin-top: 20px;">
         <div style="display: flex; justify-content: space-between; align-items: center;">


           <div class="card-header">
             <h5 class="card-title mb-0">Vehicle Categories Management</h5>
             <p class="text-muted mb-0 small">Configure pricing and compatibility between vehicle types</p>
           </div>
           <button id="deleteSelected" class="text-white py-2 mr-2 rounded">
             Clear
           </button>

         </div>
         <!-- Responsive Table -->
         <div style="padding-inline: 20px; overflow-x: auto; margin-top: 20px;">
           <div class="table-responsive bordered-table">
             <div class="bg-white shadow-sm rounded-lg overflow-hidden">

               <div class="p-2 p-md-4 mt-2 mt-md-4">
                 <form id="categoryForm">
                   <!-- Desktop Table View (hidden on mobile) -->
                   <div class="d-none d-md-block">
                     <div class="table-responsive">
                       <table class="table table-striped table-bordered">
                         <thead class="bg-light">
                           <tr>
                             <th class="py-3 ps-4">ID</th>
                             <th class="py-3">Vehicle Category</th>
                             <th class="py-3 pe-4">Compatible With</th>
                           </tr>
                         </thead>
                         <tbody>
                           <% category.forEach(cat => { %>
                           <tr class="border-top">
                             <td class="ps-4"><span class="badge bg-secondary"><%= cat.category_id %></span></td>
                             <td>
                               <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center gap-3">
                                 <% if (cat.cat_map_icon) { %>
                                 <div class="flex-shrink-0 bg-light p-2 rounded" style="width: 80px; height: 80px;">
                                   <img src="<%= cat.cat_icon_path ? CATEGORY_BASE_URL + cat.cat_icon_path : '/car.jpg' %>" alt="Category Icon" onerror="this.onerror=null; this.src='/car.jpg';" class="w-100 h-100 object-fit-contain">
                                 </div>
                                 <% } %>
                                 <div class="flex-grow-1">
                                   <h6 class="mb-2 text-md fw-semibold"><%= cat.cat_name %></h6>

                                   <div class="row g-2 g-md-3">

                                     <!-- Min Fare -->
                                     <div class="col-6 col-md-4">
                                       <div class="d-flex align-items-center text-nowrap">
                                         <span class="text-primary me-2">
                                           <i class="bi bi-cash-coin"></i>
                                         </span>
                                         <small class="text-muted">Min Fare:</small>
                                         <small class="ms-1 fw-medium"><%= cat.cat_minimum_fare %></small>
                                       </div>
                                     </div>

                                     <!-- Fare Per KM -->
                                     <div class="col-6 col-md-4">
                                       <div class="d-flex align-items-center text-nowrap">
                                         <span class="text-success me-2">
                                           <i class="bi bi-rulers"></i>
                                         </span>
                                         <small class="text-muted">Fare/KM:</small>
                                         <small class="ms-1 fw-medium"><%= cat.cat_fare_per_km %></small>
                                       </div>
                                     </div>

                                     <!-- Fare Per Min -->
                                     <div class="col-6 col-md-4">
                                       <div class="d-flex align-items-center text-nowrap">
                                         <span class="text-info me-2">
                                           <i class="bi bi-clock"></i>
                                         </span>
                                         <small class="text-muted">Fare/Min:</small>
                                         <small class="ms-1 fw-medium"><%= cat.cat_fare_per_min %></small>
                                       </div>
                                     </div>

                                     <!-- Max Size -->
                                     <div class="col-6 col-md-4">
                                       <div class="d-flex align-items-center text-nowrap">
                                         <span class="text-warning me-2">
                                           <i class="bi bi-people-fill"></i>
                                         </span>
                                         <small class="text-muted">Max Size:</small>
                                         <small class="ms-1 fw-medium"><%= cat.cat_max_size %></small>
                                       </div>
                                     </div>

                                     <!-- Base Price -->
                                     <div class="col-6 col-md-4">
                                       <div class="d-flex align-items-center text-nowrap">
                                         <span class="text-danger me-2">
                                           <i class="bi bi-wallet2"></i>
                                         </span>
                                         <small class="text-muted">Base Price:</small>
                                         <small class="ms-1 fw-medium"><%= cat.cat_base_price %></small>
                                       </div>
                                     </div>



                                   </div>

                                 </div>
                               </div>
                             </td>
                             <td class="pe-4">
                               <div class="position-relative" style="min-width: 200px;">
                                 <select name="compatibleWith[<%= cat.category_id %>][]" class="form-select choices-multiple" multiple="multiple" data-placeholder="Select compatible vehicles">
                                   <% 
                      const compatible = dc.find(item => item.from_cat_id === cat.category_id);
                      const selectedIds = compatible ? compatible.to_cat_ids : [];
                    %>

                                   <% category.forEach(option => { %>
                                   <% if (option.category_id !== cat.category_id) { %>
                                   <option value="<%= option.category_id %>" <%= selectedIds.includes(String(option.category_id)) ? 'selected' : '' %>>
                                     <%= option.cat_name %>
                                   </option>
                                   <% } %>
                                   <% }) %>
                                 </select>
                               </div>
                             </td>
                           </tr>
                           <% }) %>
                         </tbody>
                       </table>
                     </div>
                   </div>

                   <!-- Mobile Card View (hidden on desktop) -->
                   <div class="d-md-none">
                     <% category.forEach(cat => { %>
                     <div class="card mb-3 shadow-sm">
                       <div class="card-body">
                         <!-- ID and Compatible With (top row) -->
                         <div class="category-card p-3 mb-4 rounded-3 shadow-sm border">
                           <!-- Header with ID and Actions -->
                           <!-- <div class="d-flex justify-content-between align-items-center mb-3">
                          <span class="badge bg-primary rounded-pill">ID: <%= cat.category_id %></span>
                          <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="categoryActions" data-bs-toggle="dropdown" aria-expanded="false">
                              <i class="bi bi-three-dots-vertical"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="categoryActions">
                              <li><a class="dropdown-item" href="#">Edit</a></li>
                              <li><a class="dropdown-item" href="#">Duplicate</a></li>
                              <li>
                                <hr class="dropdown-divider">
                              </li>
                              <li><a class="dropdown-item text-danger" href="#">Delete</a></li>
                            </ul>
                          </div>
                        </div> -->

                           <!-- Main Content -->
                           <div class="d-flex flex-column flex-md-row gap-3">
                             <!-- Left Column - Category Info -->
                             <div class="flex-grow-1">
                               <!-- Category Image and Name -->
                               <div class="d-flex align-items-center gap-3 mb-3">
                                 <% if (cat.cat_map_icon) { %>
                                 <div class="category-icon bg-light p-2 rounded-3" style="width: 70px; height: 70px;">
                                   <img src="<%= CATEGORY_BASE_URL %><%= cat.cat_icon_path %>" alt="<%= cat.cat_name %>" class="w-100 h-100 object-fit-contain" loading="lazy">
                                 </div>
                                 <% } %>
                                 <div>
                                   <h5 class="mb-0 fw-bold text-truncate" style="max-width: 200px;"><%= cat.cat_name %></h5>
                                   <small class="text-muted">Vehicle Category</small>
                                 </div>
                               </div>

                               <!-- Pricing Details Grid -->
                               <div class="row g-3">
                                 <div class="col-6 col-md-4">
                                   <div class="pricing-item p-2 rounded-2 bg-light">
                                     <div class="d-flex align-items-center gap-2">
                                       <span class="text-primary">
                                         <svg class="bi" width="16" height="16" fill="currentColor">
                                           <use xlink:href="#icon-min-fare" />
                                         </svg>
                                       </span>
                                       <div>
                                         <small class="text-muted d-block">Min Fare</small>
                                         <span class="fw-bold"><%= cat.cat_minimum_fare %></span>
                                       </div>
                                     </div>
                                   </div>
                                 </div>

                                 <div class="col-6 col-md-4">
                                   <div class="pricing-item p-2 rounded-2 bg-light">
                                     <div class="d-flex align-items-center gap-2">
                                       <span class="text-success">
                                         <svg class="bi" width="16" height="16" fill="currentColor">
                                           <use xlink:href="#icon-fare-per-km" />
                                         </svg>
                                       </span>
                                       <div>
                                         <small class="text-muted d-block">Per KM</small>
                                         <span class="fw-bold"><%= cat.cat_fare_per_km %></span>
                                       </div>
                                     </div>
                                   </div>
                                 </div>

                                 <div class="col-6 col-md-4">
                                   <div class="pricing-item p-2 rounded-2 bg-light">
                                     <div class="d-flex align-items-center gap-2">
                                       <span class="text-info">
                                         <svg class="bi" width="16" height="16" fill="currentColor">
                                           <use xlink:href="#icon-fare-per-min" />
                                         </svg>
                                       </span>
                                       <div>
                                         <small class="text-muted d-block">Per Min</small>
                                         <span class="fw-bold"><%= cat.cat_fare_per_min %></span>
                                       </div>
                                     </div>
                                   </div>
                                 </div>

                                 <div class="col-6 col-md-4">
                                   <div class="pricing-item p-2 rounded-2 bg-light">
                                     <div class="d-flex align-items-center gap-2">
                                       <span class="text-warning">
                                         <svg class="bi" width="16" height="16" fill="currentColor">
                                           <use xlink:href="#icon-max-size" />
                                         </svg>
                                       </span>
                                       <div>
                                         <small class="text-muted d-block">Max Size</small>
                                         <span class="fw-bold"><%= cat.cat_max_size %></span>
                                       </div>
                                     </div>
                                   </div>
                                 </div>

                                 <div class="col-6 col-md-4">
                                   <div class="pricing-item p-2 rounded-2 bg-light">
                                     <div class="d-flex align-items-center gap-2">
                                       <span class="text-danger">
                                         <svg class="bi" width="16" height="16" fill="currentColor">
                                           <use xlink:href="#icon-base-price" />
                                         </svg>
                                       </span>
                                       <div>
                                         <small class="text-muted d-block">Base Price</small>
                                         <span class="fw-bold"><%= cat.cat_base_price %></span>
                                       </div>
                                     </div>
                                   </div>
                                 </div>

                                 <div class="col-6 col-md-4">
                                   <div class="pricing-item p-2 rounded-2 bg-light">
                                     <div class="d-flex align-items-center gap-2">
                                       <span class="text-indigo">
                                         <svg class="bi" width="16" height="16" fill="currentColor">
                                           <use xlink:href="#icon-fare-per-hour" />
                                         </svg>
                                       </span>
                                       <div>
                                         <small class="text-muted d-block">Per Hour</small>
                                         <span class="fw-bold"><%= cat.cat_fare_per_hour %></span>
                                       </div>
                                     </div>
                                   </div>
                                 </div>
                               </div>
                             </div>

                             <!-- Right Column - Compatibility Selector -->
                             <div class="compatibility-selector" style="min-width: 180px;">
                               <label for="compatibleWith<%= cat.category_id %>" class="form-label small fw-semibold mb-1">
                                 Compatible With
                               </label>
                               <select id="compatibleWith<%= cat.category_id %>" name="compatibleWith[<%= cat.category_id %>][]" class="form-select choices-multiple" multiple="multiple" data-placeholder="Select categories...">
                                 <% 
          const compatibleMobile = dc.find(item => item.from_cat_id === cat.category_id);
          const selectedIdsMobile = compatibleMobile ? compatibleMobile.to_cat_ids : [];
        %>
                                 <% category.forEach(option => { %>
                                 <% if (option.category_id !== cat.category_id) { %>
                                 <option value="<%= option.category_id %>" <%= selectedIdsMobile.includes(String(option.category_id)) ? 'selected' : '' %> data-icon="<%= CATEGORY_BASE_URL %><%= option.cat_icon_path %>">
                                   <%= option.cat_name %>
                                 </option>
                                 <% } %>
                                 <% }) %>
                               </select>
                               <div class="form-text small mt-1">
                                 <i class="bi bi-info-circle me-1"></i> Select multiple categories
                               </div>
                             </div>
                           </div>
                         </div>

                         <style>
                           .category-card {
                             transition: all 0.2s ease;
                             background-color: #fff;
                           }

                           .category-card:hover {
                             box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
                             transform: translateY(-2px);
                           }

                           .category-icon {
                             display: flex;
                             align-items: center;
                             justify-content: center;
                             border: 1px solid rgba(0, 0, 0, 0.1);
                           }

                           .pricing-item {
                             transition: all 0.2s ease;
                             height: 100%;
                           }

                           .pricing-item:hover {
                             background-color: rgba(0, 0, 0, 0.03) !important;
                             transform: translateY(-2px);
                           }

                           .compatibility-selector {
                             border-left: 1px dashed #dee2e6;
                             padding-left: 1rem;
                           }

                           @media (max-width: 767.98px) {
                             .compatibility-selector {
                               border-left: none;
                               border-top: 1px dashed #dee2e6;
                               padding-left: 0;
                               padding-top: 1rem;
                               margin-top: 1rem;
                             }
                           }

                           .choices__list--dropdown {
                             z-index: 9999 !important;
                             /* bring dropdown on top */
                           }
                         </style>




                       </div>
                     </div>
                     <% }) %>
                   </div>

                   <!-- Submit Button -->
                   <!-- Sticky Save Button -->
                   <!-- Sticky Save Button -->
                   <div class="sticky-save-btn d-flex justify-content-end align-items-center">
                     <button type="submit" class="btn btn-primary btn-lg px-5 py-2">
                       Save  
                     </button>
                   </div>

                   <style>
                     .sticky-save-btn {
                       position: fixed;
                       /* fixed to viewport bottom */
                       bottom: 20px;
                       /* distance from bottom */
                       right: 10px;
                       transform: translateX(-50%);
                       z-index: 1000;
                       background: white;
                       /* button itself has color */
                       padding: 0;
                       /* remove extra padding from container */
                     }

                     .sticky-save-btn .btn-primary {
                       /* background: linear-gradient(90deg, #4e73df, #224abe); */
                       border: none;
                       border-radius: 50px;
                       /* rounded for modern look */
                       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
                       font-weight: 600;
                       transition: transform 0.2s, box-shadow 0.2s;
                     }

                     .sticky-save-btn .btn-primary:hover {
                       transform: translateY(-2px);
                       box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
                     }
                   </style>



                 </form>
               </div>


             </div>

           </div>
         </div>


         <div class="pagination">
           <div id="pagination"></div>
         </div>

       </div>

   </main>





   <!-- SVG Icons (put this once in your layout) -->
   <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
     <symbol id="icon-min-fare" viewBox="0 0 24 24">
       <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4 16V8a4 4 0 014-4h8a4 4 0 014 4v8a4 4 0 01-4 4H8a4 4 0 01-4-4z" />
     </symbol>
     <symbol id="icon-fare-per-km" viewBox="0 0 24 24">
       <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M9 20l-5.447-2.724A2 2 0 013 15.382V8.618a2 2 0 01.553-1.382L9 4" />
     </symbol>
     <symbol id="icon-fare-per-min" viewBox="0 0 24 24">
       <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 6v6l4 2" />
     </symbol>
     <symbol id="icon-max-size" viewBox="0 0 24 24">
       <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-3-3h-4l-1-5h-6l-1 5H5a3 3 0 00-3 3v2h5" />
     </symbol>
     <symbol id="icon-base-price" viewBox="0 0 24 24">
       <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 4v8m0 0h-3m3 0h3" />
     </symbol>
     <symbol id="icon-fare-per-hour" viewBox="0 0 24 24">
       <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3" />
     </symbol>
     <symbol id="icon-save" viewBox="0 0 24 24">
       <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
     </symbol>
   </svg>

   </div>
   </div>

   <script>
     // Initialize select elements with Choices.js or similar library
     document.addEventListener('DOMContentLoaded', function() {
       // Initialize multiple select elements
       const selects = document.querySelectorAll('.choices-multiple');
       selects.forEach(select => {
         new Choices(select, {
           removeItemButton: true,
           searchEnabled: true,
           shouldSort: false,
           duplicateItemsAllowed: false,
           placeholderValue: select.dataset.placeholder || 'Select options',
           position: 'auto' // 👈 always render dropdown below input

         });
       });

       // Make table responsive by adding data-labels on mobile
       function setupResponsiveTable() {
         if (window.innerWidth < 768) {
           const headers = ['ID', 'Vehicle Category', 'Compatible With'];
           document.querySelectorAll('tbody tr').forEach(row => {
             const cells = row.querySelectorAll('td');
             cells.forEach((cell, index) => {
               cell.setAttribute('data-label', headers[index]);
             });
           });
         }
       }

       setupResponsiveTable();
       window.addEventListener('resize', setupResponsiveTable);
     });
   </script>
   <script>
     $('#categoryForm').on('submit', function(e) {
       e.preventDefault();

       let finalData = [];

       // loop each row to get correct 'from_cat_id' and selected 'to_cat_id'
       $('tbody tr').each(function() {
         const selectEl = $(this).find('select[name^="compatibleWith"]');
         const nameAttr = selectEl.attr('name');
         if (!nameAttr) return; // skip if no select

         const fromCatId = nameAttr.match(/\[(\d+)\]/)?.[1]; // extract ID from name="compatibleWith[30][]"
         const selectedOptions = selectEl.val(); // array of selected category IDs

         if (selectedOptions && selectedOptions.length > 0) {
           finalData.push({
             from_cat_id: fromCatId,
             to_cat_id: selectedOptions.join('|')
           });
         }
       });

       if (finalData.length < 1) {
         Swal.fire({
           icon: 'warning',
           title: 'Oops!',
           text: 'Please select at least one compatible category.',
         });
         return;
       }

       // 📨 API call
       $.ajax({
         url: '/admin/dcCategory',
         method: 'POST',
         contentType: 'application/json',
         data: JSON.stringify({
           mappings: finalData
         }),
         success: function(response) {
           Swal.fire({
             icon: 'success',
             title: 'Saved',
             text: 'Category mappings saved!',
             timer: 2000,
             showConfirmButton: false
           });
         },
         error: function(xhr) {
           let errorMsg = 'Something went wrong!';
           if (xhr.responseJSON && xhr.responseJSON.message) {
             errorMsg = xhr.responseJSON.message;
           } else if (xhr.responseText) {
             try {
               const parsed = JSON.parse(xhr.responseText);
               if (parsed.message) errorMsg = parsed.message;
             } catch (e) {
               errorMsg = xhr.responseText;
             }
           }
           Swal.fire('Error!', errorMsg, 'error');
         }
       });
     });
   </script>

   <script>
     document.getElementById("deleteSelected").addEventListener("click", function() {
       Swal.fire({
         title: "Are you sure?",
         text: "This will delete all downward compatibility mappings.",
         icon: "warning",
         showCancelButton: true,
         confirmButtonColor: "#d33",
         cancelButtonColor: "#3085d6",
         confirmButtonText: "Yes, delete all!"
       }).then((result) => {
         if (result.isConfirmed) {
           fetch("/admin/clear-dc", {
               method: "POST",
               headers: {
                 "Content-Type": "application/json"
               },
               body: JSON.stringify({})
             })
             .then(res => res.json())
             .then(data => {
               if (data.success) {
                 Swal.fire({
                   icon: "success",
                   title: "Deleted!",
                   text: data.message,
                   timer: 2000,
                   showConfirmButton: false
                 }).then(() => {
                   window.location.reload();
                 });
               } else {
                 Swal.fire({
                   icon: "success",
                   title: "Deleted!",
                   text: data.message,
                   timer: 2000,
                   showConfirmButton: false
                 }).then(() => {
                   window.location.reload();
                 });
               }
             })
             .catch(err => {
               console.error("Error:", err);
               Swal.fire({
                 icon: "error",
                 title: "Oops...",
                 text: "An error occurred while clearing mappings."
               });
             });
         }
       });
     });
   </script>



   <%- footer %>

   <script src="/js/demo-protection.js"></script>
