<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Генеалогическое древо семьи</title>
<meta charset="UTF-8">
<style>
.container { display: flex; height: 100vh; }
.sidebar { width: 30%; overflow-y: auto; padding: 10px; border-right: 1px solid #ccc; }
.content { width: 70%; padding: 20px; }
.person-item { cursor: pointer; padding: 8px; border-bottom: 1px solid #eee; }
.person-item:hover { background-color: #f5f5f5; }
.person-item.selected { background-color: #e3f2fd; font-weight: bold; }
.tree-node { margin-left: 20px; }
.pdf-btn { margin-bottom: 15px; background-color: #d32f2f; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; }
.pdf-btn:hover { background-color: #b71c1c; }
</style>
</head>
<body>
<div class="container">
<!-- Левая панель -->
<div class="sidebar">
<h2>Члены семьи</h2>
<div th:each="person : ${persons}"
class="person-item"
th:classappend="${selectedPerson != null and selectedPerson.id == person.id} ? 'selected' : ''"
th:onclick="'window.location.href=\'/tree/' + ${person.id} + '\''"
th:text="${person.fullName}">
</div>
</div>
<!-- Правая панель -->
<div class="content">
<h2>Генеалогическое древо</h2>
<div th:if="${selectedPerson != null}">
<p>Дерево для: <span th:text="${selectedPerson.fullName}"></span></p>
<button class="pdf-btn" th:onclick="'generatePdf(' + ${selectedPerson.id} + ')'">Скачать PDF</button>
<div th:each="node : ${tree}">
<div th:style="'margin-left:' + ${node.level * 20} + 'px'">
<span th:text="${node.fullName}"></span>
<span th:if="${node.hasChildren}"> ✓</span>
</div>
</div>
</div>
<div th:if="${selectedPerson == null}">
<p>Выберите члена семьи из списка слева для отображения генеалогического древа</p>
</div>
</div>
</div>
<script>
function generatePdf(personId) {
window.open('/tree/pdf/' + personId, '_blank');
}
</script>
</body>
</html>
