{#
  OTS Signage Modern Theme - Sidebar Override
  Modern left navigation sidebar with collapsible state
#}
<nav class="ots-sidebar" aria-label="Main navigation">
  <div class="sidebar-header">
    <a href="{{ baseUrl }}/" class="brand-link">
      <img src="{{ baseUrl }}/theme/custom/otssignange/img/192x192.png" alt="{{ app_name }}" class="brand-logo" />
      <span class="brand-text">{{ app_name }}</span>
    </a>
  </div>

  <div class="sidebar-content">
    <ul class="sidebar-nav">
      <li class="nav-section">
        <a href="{{ baseUrl }}" class="nav-item {% if pageTitle == 'Dashboard' %}active{% endif %}">
          <span class="nav-icon">📊</span>
          <span class="nav-text">Dashboard</span>
        </a>
      </li>

      <li class="nav-section-title">Content</li>
      <li><a href="{{ baseUrl }}/library" class="nav-item">
        <span class="nav-icon">📁</span>
        <span class="nav-text">Media Library</span>
      </a></li>
      <li><a href="{{ baseUrl }}/layout" class="nav-item">
        <span class="nav-icon">📐</span>
        <span class="nav-text">Layouts</span>
      </a></li>
      <li><a href="{{ baseUrl }}/playlist" class="nav-item">
        <span class="nav-icon">▶</span>
        <span class="nav-text">Playlists</span>
      </a></li>

      <li class="nav-section-title">Display</li>
      <li><a href="{{ baseUrl }}/display" class="nav-item">
        <span class="nav-icon">🖥</span>
        <span class="nav-text">Displays</span>
      </a></li>
      <li><a href="{{ baseUrl }}/display-group" class="nav-item">
        <span class="nav-icon">📺</span>
        <span class="nav-text">Display Groups</span>
      </a></li>

      <li class="nav-section-title">Scheduling</li>
      <li><a href="{{ baseUrl }}/schedule" class="nav-item">
        <span class="nav-icon">📅</span>
        <span class="nav-text">Schedules</span>
      </a></li>
      <li><a href="{{ baseUrl }}/dayparting" class="nav-item">
        <span class="nav-icon">⏰</span>
        <span class="nav-text">Day Parting</span>
      </a></li>

      <li class="nav-section-title">Administration</li>
      <li><a href="{{ baseUrl }}/user" class="nav-item">
        <span class="nav-icon">👤</span>
        <span class="nav-text">Users</span>
      </a></li>
      <li><a href="{{ baseUrl }}/user-group" class="nav-item">
        <span class="nav-icon">👥</span>
        <span class="nav-text">User Groups</span>
      </a></li>
      <li><a href="{{ baseUrl }}/settings" class="nav-item">
        <span class="nav-icon">⚙️</span>
        <span class="nav-text">Settings</span>
      </a></li>
    </ul>
  </div>

  <div class="sidebar-footer">
    <div class="sidebar-user">
      <div class="user-info">
        <div class="user-avatar">{{ user.username|first|upper }}</div>
        <div class="user-name">{{ user.username }}</div>
      </div>
    </div>
    <div class="sidebar-controls">
      <button class="btn-ghost" data-action="toggle-theme" aria-label="Toggle theme" title="Toggle dark/light mode">
        <span class="icon">🌓</span>
      </button>
      <a href="{{ baseUrl }}/logout" class="btn-ghost" aria-label="Sign out" title="Sign out">
        <span class="icon">🚪</span>
      </a>
    </div>
  </div>
</nav>