{% load static %}
<style>
  :root{
    --bp-primary:#01478f;
    --bp-bg:#0e1b2b;
    --bp-icon:#eaf1fb;
    --bp-icon-dim:#b9c7d8;
  }

  /* ==== SLIM ICON BAR ==== */
  .bp-slimbar{
    position:fixed; left:0; top:0; height:100vh; width:56px;
    background:linear-gradient(180deg, var(--bp-primary), #0f63b4 55%, #1380db);
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    display:flex; flex-direction:column; align-items:center;
    z-index:1030; transition: transform .2s ease;
  }
  .bp-slimbar.hidden{ transform: translateX(-70px); }

  /* brand */
  .bp-slim-brand{
    width:100%; height:56px; display:grid; place-items:center;
    border-bottom:1px solid rgba(255,255,255,.12);
    text-decoration:none !important;
    flex-shrink:0;
  }
  .bp-slim-brand .logo{
    width:28px; height:28px; display:grid; place-items:center;
    border-radius:8px; background:rgba(255,255,255,.14); color:#fff;
  }

  /* nav stack */
  .bp-slim-nav{
    flex:1 1 auto; width:100%;
    padding:6px 0; overflow-y:auto; overflow-x:hidden;
  }
  .bp-slim-nav::-webkit-scrollbar{ width:0; }

  .bp-slim-item{
    width:100%; display:flex; justify-content:center;
    margin:4px 0;
  }
  .bp-slim-link{
    width:36px; height:36px; border-radius:10px;
    display:grid; place-items:center; color:var(--bp-icon);
    text-decoration:none !important;
    transition: box-shadow .15s ease, background .15s ease, transform .04s ease;
    background:transparent;
  }
  .bp-slim-link:hover{
    background:rgba(255,255,255,.14);
    box-shadow:0 6px 14px rgba(0,0,0,.18);
  }
  .bp-slim-item.active .bp-slim-link{
    background:rgba(255,255,255,.22); color:#fff;
    box-shadow:0 6px 14px rgba(0,0,0,.2);
  }
  .bp-slim-link i{ font-size:16px; }

  /* separator */
  .bp-slim-sep{
    width:28px; height:1px;
    background:rgba(255,255,255,.18);
    margin:6px auto;
  }

  /* bottom controls */
  .bp-slim-bottom{
    width:100%; padding:6px 0 10px;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    border-top:1px solid rgba(255,255,255,.12);
    flex-shrink:0;
  }
  .bp-mini-btn, .bp-hide-btn{
    width:28px; height:28px; border:0; border-radius:50%;
    display:grid; place-items:center; cursor:pointer;
    background:#ffffff; color:var(--bp-primary);
    box-shadow:0 6px 16px rgba(0,0,0,.25); outline:none;
  }
  .bp-hide-btn{ background:#0b5db0; color:#fff; }
  .bp-mini-btn:active, .bp-hide-btn:active{ transform:scale(.98); }
  .bp-slim-link.logout:hover{ background:rgba(220,53,69,.18); }

  /* Floating reveal button */
  .bp-reveal-btn{
    position: fixed; left: 8px; bottom: 14px;
    width: 28px; height: 28px; border-radius: 50%;
    display: none; place-items: center;
    border: 0; outline: 0;
    background: #0b5db0; color: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
    z-index: 1040; cursor: pointer;
  }
  .bp-reveal-btn:active{ transform: scale(.98); }
  body.has-slimbar.slim-hidden .bp-reveal-btn{ display: grid; }

  /* Content offset */
  body.has-slimbar:not(.slim-hidden):not(.no-slimbar) #content-wrapper{
    margin-left:56px; transition: margin-left .2s ease;
  }
  body.has-slimbar.slim-hidden #content-wrapper,
  body.has-slimbar.no-slimbar  #content-wrapper{ margin-left:0; }
  @media (max-width: 991.98px){
    body.has-slimbar #content-wrapper{ margin-left:0; }
  }

  /* Hover label badge */
  #bpHoverBadge{
    position: fixed;
    background: rgba(1,71,143,.96); color:#fff;
    padding:6px 10px; border-radius:10px;
    font-size:.82rem; letter-spacing:.2px;
    box-shadow:0 10px 22px rgba(0,0,0,.18);
    opacity:0; pointer-events:none;
    transition: opacity .12s ease, transform .12s ease;
    transform: translateY(-50%) scale(.98);
    z-index:1200; white-space:nowrap;
  }
  #bpHoverBadge.show{ opacity:1; transform: translateY(-50%) scale(1); }
  #bpHoverBadge::after{
    content:""; position:absolute; top:50%; width:0; height:0; transform:translateY(-50%);
    border:6px solid transparent;
  }
  #bpHoverBadge.right::after{ left:-12px; border-right-color: rgba(1,71,143,.96); }
  #bpHoverBadge.left::after{  right:-12px; border-left-color:  rgba(1,71,143,.96); }
  @media (max-width: 991.98px){ #bpHoverBadge{ display:none; } }
</style>


<nav id="bpSlimbar" class="bp-slimbar" aria-label="BPOS Navigation">

  {# Brand / Home link #}
  <a href="{% url 'pos:index' %}" class="bp-slim-brand" title="Home">
    <div class="logo"><i class="fas fa-gem"></i></div>
  </a>

  {# ── Dynamic nav items from context ── #}
  <div class="bp-slim-nav">

    {# Dashboard is always first #}
    <div class="bp-slim-item {% if active_icon == 'dashboard' %}active{% endif %}">
      <a class="bp-slim-link" href="{% url 'pos:index' %}" data-label="Dashboard" title="Dashboard">
        <i class="fas fa-home"></i>
      </a>
    </div>

    {# Sidebar items from nav_config #}
    {% for item in sidebar_menu %}
      <div class="bp-slim-item {% if item.active_key in active_icon %}active{% endif %}">
        <a class="bp-slim-link"
           href="{{ item.url }}"
           data-label="{{ item.label }}"
           title="{{ item.label }}">
          <i class="{{ item.icon }}"></i>
        </a>
      </div>
    {% endfor %}

    <div class="bp-slim-sep"></div>

    {# Logout #}
    <div class="bp-slim-item">
      <a class="bp-slim-link logout"
         href="#"
         data-toggle="modal"
         data-target="#logoutModal"
         data-label="Logout"
         title="Logout">
        <i class="fas fa-sign-out-alt"></i>
      </a>
    </div>

  </div>{# end bp-slim-nav #}

  {# Bottom controls #}
  <div class="bp-slim-bottom">
    <button id="bpHideBtn" class="bp-hide-btn" type="button" title="Hide sidebar">
      <i class="fas fa-angle-left"></i>
    </button>
  </div>

</nav>

{# Floating reveal button (shown when sidebar hidden) #}
<button id="bpRevealBtn" class="bp-reveal-btn" type="button" aria-label="Show sidebar">
  <i class="fas fa-angle-right"></i>
</button>

{# Hover label badge #}
<div id="bpHoverBadge" aria-hidden="true"></div>


<script>
(function(){
  var sb        = document.getElementById('bpSlimbar');
  var hideBtn   = document.getElementById('bpHideBtn');
  var revealBtn = document.getElementById('bpRevealBtn');
  var badge     = document.getElementById('bpHoverBadge');
  var hbTimer   = null;

  function setIcons(hidden){
    hideBtn.innerHTML = hidden
      ? '<i class="fas fa-angle-right"></i>'
      : '<i class="fas fa-angle-left"></i>';
    hideBtn.title = hidden ? 'Show sidebar' : 'Hide sidebar';
  }
  function hideSidebar(persist){
    sb.classList.add('hidden');
    document.body.classList.add('slim-hidden');
    setIcons(true);
    if(persist) try{ localStorage.setItem('bp_slim_hidden','1'); }catch(e){}
  }
  function showSidebar(persist){
    sb.classList.remove('hidden');
    document.body.classList.remove('slim-hidden');
    setIcons(false);
    if(persist) try{ localStorage.setItem('bp_slim_hidden','0'); }catch(e){}
  }

  /* Responsive defaults */
  var mq = window.matchMedia('(max-width: 991.98px)');
  function applyResponsive(e){
    if(e.matches){
      hideSidebar(false);
    } else {
      var hidden = (function(){ try{ return localStorage.getItem('bp_slim_hidden') === '1'; }catch(e){ return false; }})();
      hidden ? hideSidebar(false) : showSidebar(false);
    }
  }
  applyResponsive(mq);
  if(mq.addEventListener) mq.addEventListener('change', applyResponsive);
  else if(mq.addListener)  mq.addListener(applyResponsive);

  hideBtn.addEventListener('click', function(){
    var hidden = sb.classList.toggle('hidden');
    document.body.classList.toggle('slim-hidden', hidden);
    setIcons(hidden);
    try{ localStorage.setItem('bp_slim_hidden', hidden ? '1':'0'); }catch(e){}
  });

  revealBtn.addEventListener('click', function(){
    showSidebar(true);
  });

  /* Hover badge */
  function placeBadge(el, txt){
    if(!badge || !el || !txt) return;
    badge.textContent = txt;
    var r   = el.getBoundingClientRect();
    var gap = 10;
    var top  = r.top + r.height / 2;
    var left = r.right + gap;
    badge.style.top  = top + 'px';
    badge.style.left = left + 'px';
    badge.classList.remove('left','right');
    badge.classList.add('right','show');
    var bw = badge.offsetWidth;
    if(left + bw + 8 > window.innerWidth){
      left = r.left - bw - gap;
      badge.style.left = left + 'px';
      badge.classList.remove('right');
      badge.classList.add('left');
    }
  }
  function hideBadge(){
    clearTimeout(hbTimer);
    hbTimer = setTimeout(function(){ badge.classList.remove('show'); }, 90);
  }
  document.querySelectorAll('#bpSlimbar .bp-slim-link').forEach(function(a){
    a.addEventListener('mouseenter', function(){
      clearTimeout(hbTimer);
      placeBadge(a, a.getAttribute('data-label') || a.getAttribute('title') || '');
    });
    a.addEventListener('focus',      function(){
      clearTimeout(hbTimer);
      placeBadge(a, a.getAttribute('data-label') || a.getAttribute('title') || '');
    });
    a.addEventListener('mouseleave', hideBadge);
    a.addEventListener('blur',       hideBadge);
  });

})();
</script>