{% extends "page.html" %}
{% block page_content %}
<div class="card">
    <div class="card-header"><h2>Сотрудники</h2>
        <button class="btn btn-primary btn-sm" onclick="document.getElementById('modal-user').classList.add('open')">+ Добавить</button>
    </div>
    <div class="table-wrap">
        <table><thead><tr><th>Логин</th><th>ФИО</th><th>Роль</th><th>Телефон</th><th>Email</th><th>Статус</th><th>Создан</th><th class="actions"></th></tr></thead>
        <tbody>{% for u in users %}<tr>
            <td>{{ u.login }}</td><td>{{ u.full_name }}</td>
            <td><span class="badge badge-{{ u.role }}">{{ {'owner':'Владелец','engineer':'Инженер','technician':'Техник'}[u.role] }}</span></td>
            <td>{{ u.phone }}</td><td>{{ u.email }}</td>
            <td><span class="badge badge-{{ 'active' if u.is_active else 'inactive' }}">{{ 'Активен' if u.is_active else 'Неактивен' }}</span></td>
            <td>{{ u.created_at.strftime('%d.%m.%Y') if u.created_at else '' }}</td>
            <td class="actions">
                <button class="btn btn-secondary btn-sm" onclick="editUser({{ u.id }},'{{ u.login }}','{{ u.full_name }}','{{ u.role }}','{{ u.phone }}','{{ u.email }}',{{ 'true' if u.is_active else 'false' }})">✎</button>
                {% if u.role != 'owner' %}
                <form method="post" action="/service/users/delete" style="display:inline" onsubmit="return confirm('Удалить пользователя?')">
                    <input type="hidden" name="id" value="{{ u.id }}">
                    <button type="submit" class="btn btn-danger btn-sm">✕</button>
                </form>{% endif %}
            </td>
        </tr>{% endfor %}</tbody></table>
    </div>
</div>
<div class="modal-overlay" id="modal-user">
    <div class="modal">
        <button type="button" class="modal-close" onclick="this.closest('.modal-overlay').classList.remove('open')">✕</button>
        <h2 id="modal-user-title">Новый сотрудник</h2>
        <form method="post" id="modal-user-form" action="/service/users/create">
            <input type="hidden" name="id" id="user-id" value="">
            <div class="form-row">
                <div class="form-group"><label>Логин</label><input type="text" name="login" id="user-login" required></div>
                <div class="form-group"><label>Пароль <small>(оставьте пустым при редактировании)</small></label><input type="password" name="password" id="user-password"></div>
            </div>
            <div class="form-row">
                <div class="form-group"><label>ФИО</label><input type="text" name="full_name" id="user-full_name" required></div>
                <div class="form-group"><label>Роль</label><select name="role" id="user-role"><option value="engineer">Инженер</option><option value="technician">Техник</option></select></div>
            </div>
            <div class="form-row">
                <div class="form-group"><label>Телефон</label><input type="text" name="phone" id="user-phone"></div>
                <div class="form-group"><label>Email</label><input type="email" name="email" id="user-email"></div>
            </div>
            <div class="form-check"><input type="checkbox" name="is_active" id="user-is_active" value="1" checked><label for="user-is_active">Активен</label></div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Сохранить</button>
                <button type="button" class="btn btn-secondary" onclick="this.closest('.modal-overlay').classList.remove('open')">Отмена</button>
            </div>
        </form>
    </div>
</div>
<script>
function editUser(id,login,name,role,phone,email,active){
    document.getElementById('modal-user').classList.add('open');
    document.getElementById('modal-user-title').textContent = 'Редактировать сотрудника';
    document.getElementById('modal-user-form').action = '/service/users/edit';
    document.getElementById('user-id').value = id;
    document.getElementById('user-login').value = login; document.getElementById('user-login').required = false;
    document.getElementById('user-full_name').value = name;
    document.getElementById('user-role').value = role;
    document.getElementById('user-phone').value = phone; document.getElementById('user-email').value = email;
    document.getElementById('user-is_active').checked = active;
    document.getElementById('user-password').required = false;
}
document.querySelector('#modal-user .modal-close').addEventListener('click', function(){ this.closest('.modal-overlay').classList.remove('open'); });
</script>
{% endblock %}