   <%- header %>
   <!-- pre-rendered navbar inserted -->
   <main class="dashboard-main">
     <%- navbar %>
     <!-- pre-rendered navbar inserted -->
 
<style>
  #categoryForm input{
    padding-left: 10px;
  }
</style>
<style>
  /* Custom Tab Styling */
  .custom-tabs {
    border-bottom: 1px solid #e2e8f0;
  }
  
  .custom-tabs .nav-link {
    color: #64748b;
    font-weight: 500;
    border: none;
    padding: 0.75rem 1.5rem;
    margin-right: 0.5rem;
    border-radius: 0.375rem 0.375rem 0 0;
    transition: all 0.2s ease;
    background: transparent;
    position: relative;
  }
  
  .custom-tabs .nav-link:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
  }
  
  .custom-tabs .nav-link.active {
    color: #3b82f6;
    background: transparent;
    font-weight: 600;
  }
  
  .custom-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #3b82f6;
  }
  
  /* Scrollbar styling for tabs */
  .scrollable-tabs {
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
  }
  
  .scrollable-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  
  /* Tab content styling */
  .tab-content {
    padding: 1.5rem 0;
  }
  
  /* Responsive adjustments */
  @media (max-width: 640px) {
    .custom-tabs .nav-link {
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
    }
  }
</style>

 

  <div class="container flex-1 pt-20 w-full my-4">
    <%- include('../../partials/utils/title.ejs', {title: "Edit Category Manager"}) %>

    <% 
      const breadcrumbs = [
        { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
        { label: "Category Manager", href: "/admin/category-manager" },
        { label: " Edit Category Manager" }
      ];
    %>
    <%- include('../../partials/utils/breadcrumb', { breadcrumbs }) %>

    <div class="mt-4">
            <div class=" bg-white shadow-md rounded-lg" style="padding: 15px;">

        <div class="w-full  mx-auto p-6">

          <!-- Enhanced Bootstrap Tabs -->
          <div class="scrollable-tabs">
            <ul class="nav custom-tabs flex-nowrap" id="categoryTabs" role="tablist">
              <li class="nav-item flex-shrink-0" role="presentation">
                <button class="nav-link active" 
                        id="edit-tab" 
                        data-bs-toggle="tab" 
                        data-bs-target="#edit" 
                        type="button" 
                        role="tab" 
                        aria-controls="edit" 
                        aria-selected="true">
                  Edit Category
                </button>
              </li>
              <li class="nav-item flex-shrink-0" role="presentation">
                <button class="nav-link" 
                        id="peak-tab" 
                        data-bs-toggle="tab" 
                        data-bs-target="#peak" 
                        type="button" 
                        role="tab" 
                        aria-controls="peak" 
                        aria-selected="false">
                  Peak Hours
                </button>
              </li>
        
            </ul>
          </div>

          <!-- Tab Contents -->
          <div class="tab-content" id="categoryTabsContent">
            <div class="tab-pane fade show active" id="edit" role="tabpanel" aria-labelledby="edit-tab">
              <%- include('./edit.ejs') %>
            </div>
            <div class="tab-pane fade" id="peak" role="tabpanel" aria-labelledby="peak-tab">
              <%- include('./peak.ejs') %>
            </div>
       
          </div>

        </div>
      </div>
    </div>
  </div>
</main>

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

<script>
  $(document).ready(function () {
    // Show loader on any AJAX request start
    $(document).ajaxStart(function () {
      $("#loader").show();
    });

    // Hide loader when all AJAX requests finish
    $(document).ajaxStop(function () {
      $("#loader").hide();
    });
  });
</script>