---

{% extends "base.html" %}
{% block content %}
<div class="card">
    <div class="card-title">
        <i data-lucide="users"></i>
        Список сотрудников
    </div>
    
    <div style="margin-bottom: 1rem;">
        <input type="text" id="searchInput" class="form-control" placeholder="Поиск по фамилии или таб. №" style="width: 300px; display: inline-block;">
        <button id="searchBtn" class="btn btn-primary"><i data-lucide="search"></i> Найти</button>
        <button id="resetBtn" class="btn btn-warning"><i data-lucide="refresh-cw"></i> Сбросить</button>
    </div>
    
    <table class="data-table">
        <thead>
            <tr>
                <th>Таб. №</th>
                <th>Фамилия</th>
                <th>Имя</th>
                <th>Отчество</th>
                <th>Подразделение</th>
                <th>Должность</th>
                <th>Код должности</th>
            </tr>
        </thead>
        <tbody id="tableBody"></tbody>
    </table>
</div>

<script>
    let allEmployees = [];
    
    async function loadEmployees() {
        const response = await fetch('/api/employees');
        allEmployees = await response.json();
        renderTable(allEmployees);
        lucide.createIcons();
    }
    
    function renderTable(employees) {
        const tbody = document.getElementById('tableBody');
        if (!employees || employees.length === 0) {
            tbody.innerHTML = '<tr><td colspan="7" style="text-align: center;"><i data-lucide="inbox"></i> Нет данных</td></tr>';
            return;
        }
        tbody.innerHTML = employees.map(emp => `
            <tr>
                <td>${emp.tab_no || '-'}</td>
                <td>${emp.last_name || '-'}</td>
                <td>${emp.first_name || '-'}</td>
                <td>${emp.middle_name || '-'}</td>
                <td>${emp.department || '-'}</td>
                <td>${emp.position || '-'}</td>
                <td>${emp.position_code || '-'}</td>
            </tr>
        `).join('');
        lucide.createIcons();
    }
    
    document.getElementById('searchBtn').addEventListener('click', () => {
        const query = document.getElementById('searchInput').value.toLowerCase();
        if (!query) {
            renderTable(allEmployees);
            return;
        }
        const filtered = allEmployees.filter(emp => 
            (emp.last_name && emp.last_name.toLowerCase().includes(query)) ||
            (emp.first_name && emp.first_name.toLowerCase().includes(query)) ||
            (emp.tab_no && emp.tab_no.includes(query))
        );
        renderTable(filtered);
    });
    
    document.getElementById('resetBtn').addEventListener('click', () => {
        document.getElementById('searchInput').value = '';
        renderTable(allEmployees);
    });
    
    loadEmployees();
</script>
{% endblock %}