<div class="academic-calendar-tabs" role="tablist" aria-label="Разделы календарных учебных графиков">
    <button type="button" class="academic-calendar-tab active" data-calendar-tab="manage" role="tab" aria-selected="true" aria-controls="academic-calendar-tab-manage">Графики</button>
    <button type="button" class="academic-calendar-tab" data-calendar-tab="grid" role="tab" aria-selected="false" aria-controls="academic-calendar-tab-grid">Сетки</button>
    <button type="button" class="academic-calendar-tab" data-calendar-tab="subjects" role="tab" aria-selected="false" aria-controls="academic-calendar-tab-subjects">Дисциплины</button>
</div>

<section class="academic-calendar-tab-panel active" id="academic-calendar-tab-manage" data-calendar-tab-panel="manage" role="tabpanel">
<div class="card create-card">
    <h2 id="academic-year-form-title">Учебный год</h2>
    <form id="academic-year-form" novalidate>
        <input type="hidden" id="academic-year-id">
        <div class="form-row">
            <div class="form-group">
                <label for="academic-year-title">Название</label>
                <input type="text" id="academic-year-title" placeholder="2026-2027" required>
            </div>
            <div class="form-group">
                <label for="academic-year-start">Начало</label>
                <input type="text" id="academic-year-start" data-date-input inputmode="numeric" maxlength="10" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}" placeholder="ДД.ММ.ГГГГ" required>
            </div>
            <div class="form-group">
                <label for="academic-year-end">Окончание</label>
                <input type="text" id="academic-year-end" data-date-input inputmode="numeric" maxlength="10" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}" placeholder="ДД.ММ.ГГГГ" required>
            </div>
            <button type="submit" class="btn btn-md btn-primary">Сохранить год</button>
            <button type="button" class="btn btn-md btn-ghost" id="academic-year-reset">Очистить</button>
        </div>
        <div class="form-alert" id="academic-year-alert" role="alert"></div>
    </form>
</div>

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

<div class="card create-card">
    <h2 id="semester-form-title">Семестр</h2>
    <form id="semester-form" novalidate>
        <input type="hidden" id="semester-id">
        <div class="form-row">
            <div class="form-group">
                <label for="semester-year">Учебный год</label>
                <select id="semester-year" required>
                    <option value="">Загрузка...</option>
                </select>
            </div>
            <div class="form-group">
                <label for="semester-type">Тип семестра</label>
                <select id="semester-type" required>
                    <option value="autumn">Осенний</option>
                    <option value="spring">Весенний</option>
                </select>
            </div>
            <div class="form-group">
                <label for="semester-start">Начало</label>
                <input type="text" id="semester-start" data-date-input inputmode="numeric" maxlength="10" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}" placeholder="ДД.ММ.ГГГГ" required>
            </div>
            <div class="form-group">
                <label for="semester-end">Окончание</label>
                <input type="text" id="semester-end" data-date-input inputmode="numeric" maxlength="10" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}" placeholder="ДД.ММ.ГГГГ" required>
            </div>
            <button type="submit" class="btn btn-md btn-primary">Сохранить семестр</button>
            <button type="button" class="btn btn-md btn-ghost" id="semester-reset">Очистить</button>
        </div>
        <div class="form-alert" id="semester-alert" role="alert"></div>
    </form>
</div>

<div class="card create-card">
    <div class="card-header-row">
        <h2 id="academic-calendar-form-title">Календарный учебный график</h2>
        <button type="button" class="btn btn-md btn-ghost" id="academic-calendar-reset">Очистить</button>
    </div>
    <form id="academic-calendar-form" novalidate>
        <input type="hidden" id="academic-calendar-id">
        <div class="form-row">
            <div class="form-group">
                <label for="academic-calendar-year">Учебный год</label>
                <select id="academic-calendar-year" required>
                    <option value="">Загрузка...</option>
                </select>
            </div>
            <div class="form-group">
                <label for="academic-calendar-specialty">Специальность</label>
                <select id="academic-calendar-specialty" required>
                    <option value="">Загрузка...</option>
                </select>
            </div>
            <div class="form-group">
                <label for="academic-calendar-profile">Профиль</label>
                <select id="academic-calendar-profile" required>
                    <option value="">Выберите специальность</option>
                </select>
            </div>
            <div class="form-group">
                <label for="academic-calendar-study-form">Форма обучения</label>
                <select id="academic-calendar-study-form" required>
                    <option value="">Загрузка...</option>
                </select>
            </div>
            <div class="form-group">
                <label for="academic-calendar-course-count">Курсов</label>
                <input type="number" id="academic-calendar-course-count" min="1" max="8" value="4" required>
            </div>
            <button type="submit" class="btn btn-md btn-primary">Сохранить график</button>
        </div>
        <div class="form-alert" id="academic-calendar-alert" role="alert"></div>
    </form>
</div>

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

</section>

<section class="academic-calendar-tab-panel" id="academic-calendar-tab-grid" data-calendar-tab-panel="grid" role="tabpanel" hidden>
<div class="card create-card">
    <h2>Редактор годового графика</h2>
    <div class="form-row">
        <div class="form-group">
            <label for="calendar-editor-calendar">График</label>
            <select id="calendar-editor-calendar">
                <option value="">Загрузка...</option>
            </select>
        </div>
        <button type="button" class="btn btn-md btn-secondary" id="calendar-editor-load">Загрузить сетку</button>
        <button type="button" class="btn btn-md btn-primary" id="calendar-editor-save">Сохранить сетку</button>
    </div>
    <div class="calendar-fill-panel">
        <div class="form-group">
            <label for="calendar-fill-course">Курс</label>
            <select id="calendar-fill-course">
                <option value="">Все курсы</option>
            </select>
        </div>
        <div class="form-group">
            <label for="calendar-fill-start">С даты</label>
            <input type="text" id="calendar-fill-start" data-date-input inputmode="numeric" maxlength="10" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}" placeholder="ДД.ММ.ГГГГ">
        </div>
        <div class="form-group">
            <label for="calendar-fill-end">По дату</label>
            <input type="text" id="calendar-fill-end" data-date-input inputmode="numeric" maxlength="10" pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}" placeholder="ДД.ММ.ГГГГ">
        </div>
        <div class="form-group">
            <label for="calendar-fill-activity">Код</label>
            <select id="calendar-fill-activity">
                <option value="">Загрузка...</option>
            </select>
        </div>
        <button type="button" class="btn btn-md btn-secondary" id="calendar-fill-apply">Заполнить диапазон</button>
    </div>
    <div class="form-alert" id="calendar-editor-alert" role="alert"></div>
    <div id="calendar-totals" class="calendar-totals"></div>
    <div id="calendar-grid" class="academic-calendar-grid"></div>
</div>
</section>

<section class="academic-calendar-tab-panel" id="academic-calendar-tab-subjects" data-calendar-tab-panel="subjects" role="tabpanel" hidden>
<div class="card create-card">
    <div class="card-header-row">
        <h2>Дисциплины графика</h2>
        <button type="button" class="btn btn-md btn-secondary" id="calendar-subject-refresh">Обновить</button>
    </div>
    <div class="form-row">
        <div class="form-group">
            <label for="calendar-subject-calendar">График</label>
            <select id="calendar-subject-calendar">
                <option value="">Загрузка...</option>
            </select>
        </div>
        <div class="form-group">
            <label for="calendar-subject-semester">Семестр</label>
            <select id="calendar-subject-semester">
                <option value="">Выберите график</option>
            </select>
        </div>
        <div class="form-group">
            <label for="calendar-subject-id">Дисциплина</label>
            <select id="calendar-subject-id">
                <option value="">Загрузка...</option>
            </select>
        </div>
        <button type="button" class="btn btn-md btn-secondary" id="calendar-subject-add">Добавить</button>
        <button type="button" class="btn btn-md btn-primary" id="calendar-subject-save">Сохранить</button>
    </div>
    <div class="form-alert" id="calendar-subject-alert" role="alert"></div>
</div>

<div class="card">
    <div class="card-header-row">
        <h2>Привязки по семестрам</h2>
        <span id="calendar-subject-count" class="muted"></span>
    </div>
    <div id="calendar-subject-summary" class="calendar-subject-summary">
        <div class="loading-row">Выберите календарный график</div>
    </div>
</div>
</section>

<div class="modal-overlay" id="calendar-day-dialog">
    <div class="modal-content card calendar-day-dialog-card">
        <h2>Ячейка графика</h2>
        <button class="modal-close" id="calendar-day-dialog-close">&times;</button>
        <div class="calendar-day-dialog-grid">
            <div>
                <span>Дата</span>
                <strong id="calendar-day-dialog-date">-</strong>
            </div>
            <div>
                <span>Курс</span>
                <strong id="calendar-day-dialog-course">-</strong>
            </div>
            <div>
                <span>Неделя</span>
                <strong id="calendar-day-dialog-week">-</strong>
            </div>
            <div>
                <span>День</span>
                <strong id="calendar-day-dialog-day">-</strong>
            </div>
        </div>
        <div class="calendar-day-dialog-activity" id="calendar-day-dialog-activity-summary"></div>
        <div class="form-group">
            <label for="calendar-day-dialog-activity">Код активности</label>
            <select id="calendar-day-dialog-activity">
                <option value="">Выберите код</option>
            </select>
        </div>
        <div class="calendar-day-dialog-time-grid">
            <div class="form-group">
                <label for="calendar-day-dialog-time-scope">Временная сетка даты</label>
                <select id="calendar-day-dialog-time-scope">
                    <option value="">По правилу даты</option>
                </select>
            </div>
            <div class="calendar-day-dialog-actions">
                <button type="button" class="btn btn-md btn-primary" id="calendar-day-dialog-time-save">Применить</button>
                <button type="button" class="btn btn-md btn-danger-subtle" id="calendar-day-dialog-time-clear">Убрать ручную сетку</button>
            </div>
            <div class="form-alert" id="calendar-day-dialog-time-alert" role="alert"></div>
        </div>
    </div>
</div>
