{#
  OTS Signage Modern Theme - Sidebar Override
  Modern left navigation sidebar with collapsible state and icons
#}
<nav class="ots-sidebar" aria-label="Main navigation">
  <div class="sidebar-header">
    <a href="{{ baseUrl }}/" class="brand-link">
      <span class="brand-icon">🎯</span>
      <span class="brand-text">OTS Signs</span>
    </a>
    <button class="sidebar-close-btn" aria-label="Close sidebar">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
      </svg>
    </button>
  </div>

  <div class="sidebar-content">
    <ul class="sidebar-nav">
      <li>
        <a href="{{ baseUrl }}" class="nav-item {% if pageTitle == 'Dashboard' %}active{% endif %}">
          <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
          </svg>
          <span class="nav-text">Dashboard</span>
        </a>
      </li>

      <li class="nav-section-divider">
        <span class="nav-label">Content</span>
      </li>
      <li><a href="{{ baseUrl }}/library" class="nav-item">
        <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
        </svg>
        <span class="nav-text">Media Library</span>
      </a></li>
      <li><a href="{{ baseUrl }}/layout" class="nav-item">
        <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/>
        </svg>
        <span class="nav-text">Layouts</span>
      </a></li>
      <li><a href="{{ baseUrl }}/playlist" class="nav-item">
        <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
        </svg>
        <span class="nav-text">Playlists</span>
      </a></li>

      <li class="nav-section-divider">
        <span class="nav-label">Displays</span>
      </li>
      <li><a href="{{ baseUrl }}/display" class="nav-item">
        <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><path d="M12 17v4"/><path d="M8 21h8"/>
        </svg>
        <span class="nav-text">Displays</span>
      </a></li>
      <li><a href="{{ baseUrl }}/display-group" class="nav-item">
        <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <rect x="2" y="2" width="8" height="8" rx="1" ry="1"/><rect x="14" y="2" width="8" height="8" rx="1" ry="1"/><rect x="2" y="14" width="8" height="8" rx="1" ry="1"/><rect x="14" y="14" width="8" height="8" rx="1" ry="1"/>
        </svg>
        <span class="nav-text">Display Groups</span>
      </a></li>

      <li class="nav-section-divider">
        <span class="nav-label">Scheduling</span>
      </li>
      <li><a href="{{ baseUrl }}/schedule" class="nav-item">
        <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><path d="M16 2v4"/><path d="M8 2v4"/><line x1="3" y1="10" x2="21" y2="10"/>
        </svg>
        <span class="nav-text">Schedules</span>
      </a></li>
      <li><a href="{{ baseUrl }}/dayparting" class="nav-item">
        <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="9"/><polyline points="12 6 12 12 16 14"/>
        </svg>
        <span class="nav-text">Day Parting</span>
      </a></li>

      <li class="nav-section-divider">
        <span class="nav-label">Administration</span>
      </li>
      <li><a href="{{ baseUrl }}/user" class="nav-item">
        <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
        </svg>
        <span class="nav-text">Users</span>
      </a></li>
      <li><a href="{{ baseUrl }}/user-group" class="nav-item">
        <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
        </svg>
        <span class="nav-text">User Groups</span>
      </a></li>
      <li><a href="{{ baseUrl }}/settings" class="nav-item">
        <svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v6M4.22 4.22l4.24 4.24m2.12 2.12l4.24 4.24M1 12h6m6 0h6m-16.78 7.78l4.24-4.24m2.12-2.12l4.24-4.24"/>
        </svg>
        <span class="nav-text">Settings</span>
      </a></li>
    </ul>
  </div>

  <div class="sidebar-footer">
    <div class="sidebar-user">
      <div class="user-avatar user-avatar-lg">{{ user.username|first|upper }}</div>
      <div class="user-details">
        <div class="user-name">{{ user.username }}</div>
        <div class="user-role text-xs">Administrator</div>
      </div>
    </div>
  </div>
</nav>