{# --- Sidebar content (Bootstrap 5) --- #}
<div class="d-flex flex-column pt-4 pb-3 overflow-auto h-100">

  {# Logo + title #}
  <div class="px-3 d-flex align-items-center flex-shrink-0">
    <div class="d-flex align-items-center">
      <div class="d-flex align-items-center justify-content-center bg-primary rounded-3" style="width:32px;height:32px;">
        <i class="fas fa-stream text-white fs-6"></i>
      </div>
      <h2 class="ms-3 h5 fw-semibold text-dark mb-0">Stream Processor</h2>
    </div>
  </div>

  {# NAV #}
  <nav class="mt-4 flex-grow-1 px-2">
    <!-- Dashboard -->
    <a href="{% url 'monitoring:dashboard' %}"
       class="sp-nav-item d-flex align-items-center px-2 py-2 rounded-2 text-decoration-none {% if request.resolver_match.url_name == 'dashboard' %}sp-active{% else %}sp-inactive{% endif %}">
      <i class="fas fa-tachometer-alt me-3 fs-6"></i>
      <span class="small fw-semibold">Dashboard</span>
    </a>

    <!-- Streams section -->
    <div class="mt-3">
      <div class="d-flex align-items-center px-2 py-2 text-uppercase fw-semibold text-muted small">
        <i class="fas fa-video me-2"></i> Streams
      </div>

      <a href="{% url 'streams:channel_list' %}"
         class="sp-nav-item d-flex align-items-center px-4 py-2 rounded-2 text-decoration-none {% if request.resolver_match.url_name|slice:':7' == 'channel' %}sp-active{% else %}sp-inactive{% endif %}">
        <i class="fas fa-list me-3"></i>
        <span class="small fw-semibold">Channels</span>
      </a>

      <a href="{% url 'streams:session_list' %}"
         class="sp-nav-item d-flex align-items-center px-4 py-2 rounded-2 text-decoration-none {% if request.resolver_match.url_name|slice:':7' == 'session' %}sp-active{% else %}sp-inactive{% endif %}">
        <i class="fas fa-play-circle me-3"></i>
        <span class="small fw-semibold">Sessions</span>
      </a>

      <a href="{% url 'streams:config_list' %}"
         class="sp-nav-item d-flex align-items-center px-4 py-2 rounded-2 text-decoration-none {% if request.resolver_match.url_name|slice:':6' == 'config' %}sp-active{% else %}sp-inactive{% endif %}">
        <i class="fas fa-cogs me-3"></i>
        <span class="small fw-semibold">Configurations</span>
      </a>
    </div>

    <!-- Detection section -->
    <div class="mt-3">
      <div class="d-flex align-items-center px-2 py-2 text-uppercase fw-semibold text-muted small">
        <i class="fas fa-music me-2"></i> Detection
      </div>

      <a href="{% url 'jingles:template_list' %}"
         class="sp-nav-item d-flex align-items-center px-4 py-2 rounded-2 text-decoration-none {% if request.resolver_match.url_name|slice:':8' == 'template' %}sp-active{% else %}sp-inactive{% endif %}">
        <i class="fas fa-images me-3"></i>
        <span class="small fw-semibold">Templates</span>
      </a>

      <a href="{% url 'jingles:detection_list' %}"
         class="sp-nav-item d-flex align-items-center px-4 py-2 rounded-2 text-decoration-none {% if request.resolver_match.url_name|slice:':9' == 'detection' %}sp-active{% else %}sp-inactive{% endif %}">
        <i class="fas fa-search me-3"></i>
        <span class="small fw-semibold">Detections</span>
      </a>

      <a href="{% url 'jingles:adbreak_list' %}"
         class="sp-nav-item d-flex align-items-center px-4 py-2 rounded-2 text-decoration-none {% if request.resolver_match.url_name|slice:':7' == 'adbreak' %}sp-active{% else %}sp-inactive{% endif %}">
        <i class="fas fa-ad me-3"></i>
        <span class="small fw-semibold">Ad Breaks</span>
      </a>
    </div>

    <!-- Notifications section -->
    <div class="mt-3">
      <div class="d-flex align-items-center px-2 py-2 text-uppercase fw-semibold text-muted small">
        <i class="fas fa-bell me-2"></i> Notifications
      </div>

      <a href="{% url 'notifications:channel_list' %}"
         class="sp-nav-item d-flex align-items-center px-4 py-2 rounded-2 text-decoration-none {% if request.resolver_match.app_name == 'notifications' and 'channel' in request.resolver_match.url_name %}sp-active{% else %}sp-inactive{% endif %}">
        <i class="fas fa-broadcast-tower me-3"></i>
        <span class="small fw-semibold">Channels</span>
      </a>

      <a href="{% url 'notifications:notification_list' %}"
         class="sp-nav-item d-flex align-items-center px-4 py-2 rounded-2 text-decoration-none {% if request.resolver_match.app_name == 'notifications' and 'notification' in request.resolver_match.url_name %}sp-active{% else %}sp-inactive{% endif %}">
        <i class="fas fa-envelope me-3"></i>
        <span class="small fw-semibold">Messages</span>
      </a>

      <a href="{% url 'notifications:rule_list' %}"
         class="sp-nav-item d-flex align-items-center px-4 py-2 rounded-2 text-decoration-none {% if request.resolver_match.app_name == 'notifications' and 'rule' in request.resolver_match.url_name %}sp-active{% else %}sp-inactive{% endif %}">
        <i class="fas fa-filter me-3"></i>
        <span class="small fw-semibold">Rules</span>
      </a>
    </div>
  </nav>
</div>

{# Bottom section #}
<div class="flex-shrink-0 d-flex border-top border-1 border-light px-3 py-3">
  <div class="d-flex align-items-center w-100">
    <div>
      <div class="small fw-semibold text-secondary">System Status</div>
      <div class="small text-muted" id="system-info">
        <div
          hx-get="{% url 'monitoring:system_info' %}"
          hx-trigger="every 30s"
          hx-target="this">
          Loading...
        </div>
      </div>
    </div>
    <div class="ms-auto d-flex align-items-center gap-2">
      <a href="/admin/" class="btn btn-primary btn-sm" title="Admin Panel">
        <i class="fas fa-tools"></i>
      </a>
      <form method="post" action="{% url 'logout' %}" class="d-inline">
        {% csrf_token %}
        <button type="submit" class="btn btn-danger btn-sm" title="Logout">
          <i class="fas fa-sign-out-alt"></i>
        </button>
      </form>
    </div>
  </div>
</div>

{# Local styles to mimic Tailwind’s “active left border” pattern #}
<style>
  /* base state */
  .sp-nav-item{
    border-left: 4px solid transparent;
    color: #4b5563; /* gray-600 */
  }
  .sp-nav-item:hover{
    background-color:#f8f9fa; /* light hover */
    color:#111827;            /* gray-900 */
  }

  /* active variant (bg-primary-50 + border-primary + text-primary-700) */
  .sp-active{
    background-color:#eff6ff;             /* primary-50 */
    border-left-color: var(--bs-primary);  /* active marker */
    color:#1d4ed8;                         /* ~ primary-700 */
  }

  /* inactive variant */
  .sp-inactive{
    border-left-color: transparent;
  }
</style>