---

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Дети сотрудника</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        :root {
            --rosatom-dark-blue: #003274;
            --rosatom-blue: #025EA1;
            --rosatom-light-blue: #6CACE4;
            --rosatom-grey: #7F7F7F;
            --rosatom-dark-grey: #333333;
        }

        body { 
            background-color: #f4f6f9; 
            font-family: Arial, Helvetica, sans-serif;
            color: var(--rosatom-dark-grey);
        }

        .container { 
            max-width: 1000px; 
        }

        h2, h4 {
            color: var(--rosatom-dark-blue);
            font-weight: bold;
        }

        p {
            font-size: 1.05rem;
        }

        /* Таблица */
        .table {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }

        .table thead th {
            background-color: var(--rosatom-dark-blue) !important;
            color: white !important;
            border-color: var(--rosatom-dark-blue) !important;
            font-weight: normal;
            padding: 12px 15px;
        }

        .child-table td { 
            vertical-align: middle; 
            padding: 12px 15px;
        }

        /* Кнопки */
        .btn {
            font-family: Arial, Helvetica, sans-serif;
            border-radius: 4px;
            font-weight: 500;
            padding: 8px 20px;
        }

        #exportBtn {
            background-color: var(--rosatom-dark-blue);
            border-color: var(--rosatom-dark-blue);
            color: white;
        }
        #exportBtn:hover {
            background-color: var(--rosatom-blue);
            border-color: var(--rosatom-blue);
            color: white;
        }

        #backBtn {
            background-color: var(--rosatom-grey);
            border-color: var(--rosatom-grey);
            color: white;
        }
        #backBtn:hover {
            background-color: var(--rosatom-dark-grey);
            border-color: var(--rosatom-dark-grey);
            color: white;
        }

        .form-select, .form-control {
            border-color: #ced4da;
        }
        
        .form-select:focus, .form-control:focus {
            border-color: var(--rosatom-light-blue);
            box-shadow: 0 0 0 0.25rem rgba(108, 172, 228, 0.25);
        }

        .form-check-input:checked {
            background-color: var(--rosatom-dark-blue);
            border-color: var(--rosatom-dark-blue);
        }
    </style>
</head>
<body>
    <div class="container mt-4 mb-5">
        <div class="p-4 bg-white rounded shadow-sm mb-4 border-top border-4" style="border-top-color: var(--rosatom-dark-blue) !important;">
            <h2>{{ worker[0] }} {{ worker[1] }} {{ worker[2] }}</h2>
            <p class="mb-0"><strong>Таб. номер:</strong> {{ worker[3] }} &nbsp;|&nbsp; <strong>Должность:</strong> {{ worker[4] }}</p>
        </div>

        <form method="get" action="/employee/{{ worker[3] }}/export" id="exportForm">
            <!-- Выбор формы -->
            <div class="mb-4">
                <label for="formSelect" class="form-label fw-bold">Выберите форму для экспорта:</label>
                <select class="form-select" id="formSelect" name="form" style="max-width: 400px;">
                    <option value="blank6">BLANK6.XLS (только работник)</option>
                    <option value="blank5">BLANK5_1.xlsx (работник + ребёнок)</option>
                    <option value="blank4_3">BLANK4_3.xlsx (работник, два блока)</option>
                </select>
            </div>

            <!-- Выбор падежа -->
            <div class="mb-4">
                <label class="form-label fw-bold d-block">Падеж ФИО работника:</label>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="case" id="caseNomn" value="nomn" checked>
                    <label class="form-check-label" for="caseNomn">Именительный (Иванов)</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="case" id="caseGent" value="gent">
                    <label class="form-check-label" for="caseGent">Родительный (Иванова)</label>
                </div>
            </div>

            <!-- Список детей -->
            {% if children %}
            <h4 class="mb-3">Выберите ребёнка</h4>
            <div class="table-responsive mb-4">
                <table class="table table-bordered child-table">
                    <thead>
                        <tr>
                            <th style="width: 60px;" class="text-center">Выбор</th>
                            <th>Фамилия</th>
                            <th>Имя</th>
                            <th>Отчество</th>
                            <th>Дата рождения</th>
                            <th>Степень родства</th>
                            <th>Пол</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for ch in children %}
                        <tr>
                            <td class="text-center">
                                <input type="radio" name="child_id" value="{{ ch[0] }}" required>
                            </td>
                            <td>{{ ch[1] }}</td>
                            <td>{{ ch[2] }}</td>
                            <td>{{ ch[3] }}</td>
                            <td>{{ ch[4] }}</td>
                            <td>{{ ch[5] }}</td>
                            <td>{{ ch[6] }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="alert alert-warning border-0 shadow-sm" style="background-color: #fcf4cd; color: #333;">
                <strong>Внимание:</strong> У этого сотрудника нет детей.
            </div>
            {% endif %}

            <div class="mt-4 d-flex gap-3">
                <button type="submit" class="btn" id="exportBtn">Экспортировать</button>
                <a href="/" class="btn" id="backBtn">← Назад</a>
            </div>
        </form>

        <script>
            document.getElementById('formSelect').addEventListener('change', function() {
                var radios = document.querySelectorAll('input[name="child_id"]');
                var required = (this.value === 'blank5');
                radios.forEach(function(r) {
                    r.required = required;
                });
                if (!required) {
                    radios.forEach(function(r) { r.checked = false; });
                }
            });
            window.addEventListener('DOMContentLoaded', function() {
                var event = new Event('change');
                document.getElementById('formSelect').dispatchEvent(event);
            });
        </script>
    </div>
</body>
</html>