<!DOCTYPE html>
<html lang="ru" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title th:text="${pageTitle != null} ? ${pageTitle} + ' | Teacher Diary' : 'Teacher Diary'">Teacher Diary</title>
<link rel="stylesheet" th:href="@{/webjars/bootstrap/5.3.3/css/bootstrap.min.css}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<i class="bi bi-journal-bookmark-fill"></i>
<span>Teacher Diary</span>
</div>
<nav class="sidebar-nav">
<a th:href="@{/teacher/dashboard}" th:classappend="${activeMenu == 'dashboard'} ? 'active'">
<i class="bi bi-house"></i> Главная
</a>
<a th:href="@{/students}" th:classappend="${activeMenu == 'students'} ? 'active'">
<i class="bi bi-people"></i> Ученики
</a>
<a th:href="@{/parents}" th:classappend="${activeMenu == 'parents'} ? 'active'">
<i class="bi bi-person-hearts"></i> Родители
</a>
<a th:href="@{/groups}" th:classappend="${activeMenu == 'groups'} ? 'active'">
<i class="bi bi-collection"></i> Группы
</a>
<a th:href="@{/schedule}" th:classappend="${activeMenu == 'schedule'} ? 'active'">
<i class="bi bi-calendar3"></i> Расписание
</a>
<a th:href="@{/subjects}" th:classappend="${activeMenu == 'subjects'} ? 'active'">
<i class="bi bi-book"></i> Предметы
</a>
</nav>
<div class="sidebar-footer">
<div class="user-info">
<div class="user-avatar">
<i class="bi bi-person-circle"></i>
</div>
<div class="user-details">
<span class="user-name" th:text="${user.fullName}">Имя</span>
<span class="user-role">Преподаватель</span>
</div>
</div>
<a th:href="@{/auth/logout}" class="logout-btn">
<i class="bi bi-box-arrow-right"></i>
</a>
</div>
</div>
<!-- Main content -->
<div class="main-content">
<header class="main-header">
<button class="sidebar-toggle" onclick="toggleSidebar()">
<i class="bi bi-list"></i>
</button>
<h1 th:text="${pageTitle}">Dashboard</h1>
</header>
<main class="content">
<th:block th:replace="${content}"></th:block>
</main>
</div>
<script th:src="@{/webjars/bootstrap/5.3.3/js/bootstrap.bundle.min.js}"></script>
<script>
function toggleSidebar() {
document.getElementById('sidebar').classList.toggle('collapsed');
document.querySelector('.main-content').classList.toggle('expanded');
}
</script>
<th:block th:replace="${scripts}"></th:block>
</body>
</html>
