<!doctype html>
<html lang="vi">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><%= title %> | Robot Installer</title>
  <link rel="stylesheet" href="/vendor/montserrat/index.css">
  <link rel="stylesheet" href="/vendor/notiflix/notiflix-<%= notiflixVersion %>.min.css">
  <link rel="stylesheet" href="/css/styles.css">
</head>
<body class="app-shell" <% if (notice) { %>data-notice-type="<%= notice.type %>" data-notice="<%= notice.message %>"<% } %>>
  <aside id="appSidebar" class="sidebar" aria-label="Main navigation">
    <div class="brand-block">
      <div class="brand-mark">
        <span class="material-symbols-outlined">precision_manufacturing</span>
      </div>
      <div class="brand-copy">
        <strong>Robot Installer</strong>
        <span>Package Console</span>
      </div>
    </div>

    <nav class="nav-section" aria-label="Workspace">
      <span class="nav-label">Workspace</span>
      <% navItems.forEach((item) => { %>
        <a href="<%= item.href %>" class="nav-item <%= active === item.id ? 'active' : '' %>">
          <span class="material-symbols-outlined"><%= item.icon %></span>
          <span><%= item.label %></span>
        </a>
      <% }) %>
    </nav>

    <div class="sidebar-copyright">
      © Copyright 2026 Phenikaa X. All Rights Reserved
    </div>
  </aside>

  <button id="sidebarBackdrop" type="button" aria-label="Đóng menu"></button>

  <main id="appMain" class="main-shell">
    <header class="topbar">
      <div class="topbar-left">
        <button id="mobileMenuBtn" class="icon-button" type="button" aria-label="Mở menu" aria-expanded="false">
          <span class="material-symbols-outlined">menu</span>
        </button>
      </div>

      <div class="topbar-actions">
        <button class="icon-button" type="button" title="Đồng bộ dữ liệu" data-refresh-page>
          <span class="material-symbols-outlined">sync</span>
        </button>
        <div class="notification-center" data-notification-center>
          <button
            id="notificationButton"
            class="icon-button notification-button"
            type="button"
            title="Thông báo"
            aria-label="Mở thông báo"
            aria-controls="notificationPanel"
            aria-expanded="false"
            data-notification-toggle
          >
            <span class="material-symbols-outlined">notifications</span>
            <span class="notification-badge" data-notification-badge hidden>0</span>
          </button>

          <section id="notificationPanel" class="notification-panel" aria-label="Thông báo" hidden data-notification-panel>
            <div class="notification-panel-header">
              <div>
                <strong>Thông báo</strong>
                <span data-notification-summary>Đang tải...</span>
              </div>
              <button class="text-button" type="button" data-notification-read-all>Đánh dấu đã đọc</button>
            </div>

            <div class="notification-tabs" role="tablist" aria-label="Lọc thông báo">
              <button class="active" type="button" role="tab" aria-selected="true" data-notification-filter="all">Tất cả</button>
              <button type="button" role="tab" aria-selected="false" data-notification-filter="unread">Chưa đọc</button>
            </div>

            <div class="notification-list" data-notification-list></div>
            <div class="notification-empty" data-notification-empty hidden>
              <span class="material-symbols-outlined">notifications_none</span>
              <strong>Chưa có thông báo</strong>
              <span>Các cập nhật quan trọng sẽ xuất hiện tại đây.</span>
            </div>

            <% if (currentUser.role === 'Admin') { %>
              <div class="notification-panel-footer">
                <button class="btn btn-primary" type="button" data-modal-open="systemNotificationModal">
                  <span class="material-symbols-outlined">campaign</span>
                  Đăng thông báo hệ thống
                </button>
              </div>
            <% } %>
          </section>
        </div>
        <% if (currentUser.role === 'User') { %>
          <button class="profile-chip profile-chip-button" type="button" title="Cập nhật thông tin cá nhân" aria-label="Cập nhật thông tin cá nhân" data-modal-open="profileModal">
            <span class="profile-avatar"><%= currentUser.name.charAt(0) %></span>
            <span class="profile-meta">
              <strong><%= currentUser.name %></strong>
              <span><%= currentUser.role %></span>
            </span>
          </button>
        <% } else { %>
          <div class="profile-chip">
            <span class="profile-avatar"><%= currentUser.name.charAt(0) %></span>
            <span class="profile-meta">
              <strong><%= currentUser.name %></strong>
              <span><%= currentUser.role %></span>
            </span>
          </div>
        <% } %>
        <form class="logout-form" method="post" action="/logout">
          <button class="icon-button" type="submit" title="Đăng xuất" aria-label="Đăng xuất">
            <span class="material-symbols-outlined">logout</span>
          </button>
        </form>
      </div>
    </header>

    <div id="mainContent" class="main-content">
