<div class="card create-card">
    <div class="card-header-row">
        <h2 id="schedule-rule-form-title">Новое правило расписания</h2>
        <button type="button" class="btn btn-sm btn-ghost" id="schedule-rule-reset">Очистить форму</button>
    </div>
    <form id="schedule-rule-form" novalidate>
        <input type="hidden" id="schedule-rule-id">
        <div class="form-row">
            <div class="form-group">
                <label for="schedule-rule-subject">Дисциплина</label>
                <select id="schedule-rule-subject" required>
                    <option value="">Загрузка...</option>
                </select>
            </div>
            <div class="form-group">
                <label for="schedule-rule-semester">Семестр</label>
                <select id="schedule-rule-semester" required>
                    <option value="">Загрузка...</option>
                </select>
            </div>
        </div>

        <div class="schedule-hours-panel">
            <label class="schedule-section-label">Часы и недели начала</label>
            <div class="schedule-hours-grid">
                <div class="schedule-hours-row">
                    <div class="schedule-hours-title">Лекции</div>
                    <div class="form-group">
                        <label for="schedule-rule-lecture-hours">Часы</label>
                        <input type="number" id="schedule-rule-lecture-hours" min="0" step="1" value="0" required>
                    </div>
                    <div class="form-group">
                        <label for="schedule-rule-lecture-start-week">Неделя начала</label>
                        <input type="number" id="schedule-rule-lecture-start-week" min="1" step="1" value="1" required>
                    </div>
                </div>
                <div class="schedule-hours-row">
                    <div class="schedule-hours-title">Лабораторные</div>
                    <div class="form-group">
                        <label for="schedule-rule-laboratory-hours">Часы</label>
                        <input type="number" id="schedule-rule-laboratory-hours" min="0" step="1" value="0" required>
                    </div>
                    <div class="form-group">
                        <label for="schedule-rule-laboratory-start-week">Неделя начала</label>
                        <input type="number" id="schedule-rule-laboratory-start-week" min="1" step="1" value="1" required>
                    </div>
                </div>
                <div class="schedule-hours-row">
                    <div class="schedule-hours-title">Практики</div>
                    <div class="form-group">
                        <label for="schedule-rule-practice-hours">Часы</label>
                        <input type="number" id="schedule-rule-practice-hours" min="0" step="1" value="0" required>
                    </div>
                    <div class="form-group">
                        <label for="schedule-rule-practice-start-week">Неделя начала</label>
                        <input type="number" id="schedule-rule-practice-start-week" min="1" step="1" value="1" required>
                    </div>
                </div>
            </div>
        </div>

        <div class="schedule-groups-panel">
            <label class="schedule-section-label">Группы</label>
            <div id="schedule-rule-groups" class="custom-multi-select schedule-group-select">
                <div class="select-box" id="schedule-rule-groups-box" role="button" tabindex="0" aria-expanded="false">
                    <span class="select-text" id="schedule-rule-groups-text">Выберите группы...</span>
                    <svg class="dropdown-icon" width="12" height="8" viewBox="0 0 12 8" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 1.5L6 6.5L11 1.5" stroke="#9ca3af" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>
                </div>
                <div class="dropdown-menu" id="schedule-rule-groups-menu">
                    <div id="schedule-rule-group-checkboxes" class="checkbox-group-vertical schedule-group-checkboxes"></div>
                </div>
            </div>
        </div>

        <div class="schedule-slots-panel">
            <div class="card-header-row">
                <h2>Слоты правила</h2>
        <button type="button" class="btn btn-sm btn-secondary" id="schedule-slot-add">Добавить слот</button>
            </div>
            <div id="schedule-rule-slots" class="schedule-slots-list"></div>
        </div>

        <div class="form-row schedule-rule-actions">
            <button type="submit" class="btn btn-md btn-primary">Сохранить правило</button>
        </div>
        <div class="form-alert" id="schedule-rule-alert" role="alert"></div>
    </form>
</div>

<div class="modal-overlay schedule-conflict-modal" id="schedule-conflict-modal" role="dialog" aria-modal="true" aria-hidden="true">
    <div class="modal-content schedule-conflict-card">
        <button type="button" class="modal-close" id="schedule-conflict-close" aria-label="Закрыть окно">&times;</button>
        <div class="schedule-conflict-head">
            <span class="schedule-conflict-kicker">Конфликт слота</span>
            <h2>Освободите место для нового правила</h2>
            <p id="schedule-conflict-summary">Ранее созданное правило занимает выбранное время, преподавателя или аудиторию.</p>
            <div class="schedule-conflict-reasons" id="schedule-conflict-reasons" hidden></div>
        </div>
        <div class="schedule-conflict-rules">
            <section class="schedule-conflict-rule-box">
                <span>Новое правило</span>
                <strong id="schedule-conflict-new-rule">-</strong>
                <small id="schedule-conflict-new-rule-meta">-</small>
            </section>
            <section class="schedule-conflict-rule-box schedule-conflict-rule-box-active">
                <span>Нужно изменить</span>
                <strong id="schedule-conflict-existing-rule">-</strong>
                <small id="schedule-conflict-existing-rule-meta">-</small>
            </section>
        </div>
        <form id="schedule-conflict-form" class="schedule-conflict-form" novalidate>
            <div class="schedule-conflict-slots" id="schedule-conflict-slots"></div>
            <div class="form-alert" id="schedule-conflict-alert" role="alert"></div>
            <div class="schedule-conflict-actions">
                <button type="button" class="btn btn-md btn-ghost" id="schedule-conflict-cancel">Отмена</button>
                <button type="submit" class="btn btn-md btn-primary" id="schedule-conflict-submit">Сохранить и повторить</button>
            </div>
        </form>
    </div>
</div>

<div class="schedule-visual-context-menu" id="schedule-visual-context-menu" hidden>
    <button type="button" data-action="edit-rule">Открыть правило</button>
    <button type="button" data-action="move-slot">Изменить день и пару</button>
    <button type="button" data-action="delete-rule" class="danger">Удалить правило</button>
</div>

<div class="modal-overlay schedule-move-slot-modal" id="schedule-move-slot-modal" role="dialog" aria-modal="true" aria-hidden="true">
    <div class="modal-content schedule-move-slot-card">
        <button type="button" class="modal-close" id="schedule-move-slot-close" aria-label="Закрыть окно">&times;</button>
        <div class="schedule-conflict-head">
            <span class="schedule-conflict-kicker">Перенос слота</span>
            <h2 id="schedule-move-slot-title">Изменить день и пару</h2>
            <p id="schedule-move-slot-summary">Будут изменены только день недели и базовая пара выбранного слота.</p>
        </div>
        <form id="schedule-move-slot-form" class="schedule-move-slot-form" novalidate>
            <div class="form-row">
                <div class="form-group">
                    <label for="schedule-move-slot-day">День</label>
                    <select id="schedule-move-slot-day" required></select>
                </div>
                <div class="form-group">
                    <label for="schedule-move-slot-time">Пара</label>
                    <select id="schedule-move-slot-time" required></select>
                </div>
            </div>
            <div class="form-alert" id="schedule-move-slot-alert" role="alert"></div>
            <div class="schedule-conflict-actions">
                <button type="button" class="btn btn-md btn-ghost" id="schedule-move-slot-cancel">Отмена</button>
                <button type="submit" class="btn btn-md btn-primary" id="schedule-move-slot-submit">Сохранить перенос</button>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header-row">
        <h2>Правила динамического расписания</h2>
        <button class="btn btn-md btn-secondary" id="schedule-refresh">Обновить</button>
    </div>
    <div class="table-wrap">
        <table id="schedule-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Дисциплина</th>
                    <th>Семестр</th>
                    <th>Группы</th>
                    <th>Нагрузка</th>
                    <th>Слоты</th>
                    <th>Действия</th>
                </tr>
            </thead>
            <tbody id="schedule-tbody">
                <tr>
                    <td colspan="7" class="loading-row">Загрузка...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<button type="button"
        class="btn btn-icon-md btn-secondary schedule-visual-handle"
        id="schedule-visual-toggle"
        aria-label="Показать визуальное расписание"
        aria-expanded="false">
    <svg class="schedule-visual-handle-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
         stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <polyline points="15 18 9 12 15 6"></polyline>
    </svg>
</button>

<div class="schedule-visual-backdrop" id="schedule-visual-backdrop" hidden></div>

<aside class="schedule-visual-drawer" id="schedule-visual-drawer" aria-hidden="true">
    <div class="schedule-visual-header">
        <div class="schedule-visual-header-main">
            <div>
                <h2>Визуальное расписание групп</h2>
                <span class="muted" id="schedule-visual-summary">Правила ещё не загружены</span>
            </div>
            <button type="button" class="btn btn-sm btn-ghost" id="schedule-visual-close">Свернуть</button>
        </div>
        <div class="schedule-visual-toolbar">
            <div class="schedule-visual-period-grid">
                <div class="form-group">
                    <label for="schedule-visual-year">Учебный год</label>
                    <select id="schedule-visual-year">
                        <option value="">Загрузка...</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="schedule-visual-semester">Семестр</label>
                    <select id="schedule-visual-semester">
                        <option value="">Загрузка...</option>
                    </select>
                </div>
            </div>
            <div class="schedule-visual-filter-head">
                <span>Группы</span>
                <div>
                    <button type="button" class="btn btn-sm btn-ghost" id="schedule-visual-use-form">Из формы</button>
                    <button type="button" class="btn btn-sm btn-ghost" id="schedule-visual-select-all">Все</button>
                </div>
            </div>
            <div class="schedule-visual-group-filter" id="schedule-visual-group-filter">
                <span class="muted">Группы появятся после загрузки правил</span>
            </div>
        </div>
    </div>
    <div class="schedule-visual-stage" id="schedule-visual-stage">
        <div class="loading-row schedule-visual-state">Загрузка...</div>
    </div>
</aside>
