magistr/frontend/admin/settings/views/time-slots.html

<section class="settings-section">
    <div class="settings-header-row">
        <div>
            <h2>Временные слоты</h2>
            <p>Настройка базовой, субботней и ручных сеток времени.</p>
        </div>
        <button type="button" class="btn btn-md btn-secondary" id="time-slots-refresh">Обновить</button>
    </div>

    <div class="settings-grid">
        <article class="settings-card">
            <div class="card-header-row">
                <h3>Сетка времени</h3>
                <div class="scope-header-actions">
                    <button type="button" class="btn btn-md btn-primary" id="time-slot-scope-open-create">Новая ручная сетка</button>
                    <button type="button" class="btn btn-md btn-danger-subtle" id="time-slot-scope-delete">Удалить сетку</button>
                </div>
            </div>

            <div class="settings-form settings-form-single">
                <label class="form-field" for="time-slot-scope-select">
                    <span>Область действия</span>
                    <select id="time-slot-scope-select" class="native-select-control" data-native-select="true"></select>
                </label>
            </div>

            <div class="scope-summary" id="time-slot-scope-summary"></div>
        </article>

        <article class="settings-card settings-card-compact">
            <h3>Как применяется</h3>
            <div class="scope-summary">
                <span class="scope-badge scope-badge-base">Базовая</span>
                <span>Используется по умолчанию для всех дат.</span>
            </div>
            <div class="scope-summary">
                <span class="scope-badge">Сб</span>
                <span>Субботняя сетка применяется автоматически по субботам.</span>
            </div>
            <div class="scope-summary">
                <span class="scope-badge">Ручная</span>
                <span>Ручные сетки назначаются в ячейке редактора календарного графика.</span>
            </div>
        </article>
    </div>

    <article class="settings-card">
        <div class="card-header-row">
            <h3 id="time-slot-form-title">Новый слот</h3>
            <button type="button" class="btn btn-md btn-ghost" id="time-slot-reset">Очистить</button>
        </div>

        <form id="time-slot-form" class="settings-form" novalidate>
            <input type="hidden" id="time-slot-id">

            <label class="form-field" for="time-slot-order">
                <span>Пара</span>
                <input type="number" id="time-slot-order" min="1" step="1" required>
            </label>

            <label class="form-field" for="time-slot-start">
                <span>Начало</span>
                <input type="time" id="time-slot-start" required>
            </label>

            <label class="form-field" for="time-slot-end">
                <span>Окончание</span>
                <input type="time" id="time-slot-end" required>
            </label>

            <label class="form-field" for="time-slot-duration">
                <span>Минут</span>
                <input type="number" id="time-slot-duration" min="1" step="1" placeholder="90">
            </label>

            <button type="submit" class="btn btn-md btn-primary">Сохранить слот</button>
            <div class="form-alert" id="time-slot-alert" role="alert"></div>
        </form>
    </article>

    <article class="settings-card">
        <div class="table-wrap">
            <table class="settings-table">
                <thead>
                    <tr>
                        <th>Пара</th>
                        <th>Начало</th>
                        <th>Окончание</th>
                        <th>Минут</th>
                        <th>Действия</th>
                    </tr>
                </thead>
                <tbody id="time-slots-tbody">
                    <tr>
                        <td colspan="5" class="loading-row">Загрузка...</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </article>

    <div class="settings-modal-overlay" id="time-slot-scope-modal" aria-hidden="true">
        <div class="settings-modal-card" role="dialog" aria-modal="true" aria-labelledby="time-slot-scope-modal-title">
            <div class="card-header-row">
                <div>
                    <h3 id="time-slot-scope-modal-title">Новая ручная сетка</h3>
                    <p class="settings-modal-subtitle">Создайте отдельную сетку времени, которую затем можно назначать датам в календарном графике.</p>
                </div>
            <button type="button" class="btn btn-icon-sm btn-secondary settings-modal-close" id="time-slot-scope-modal-close" aria-label="Закрыть">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
            </div>

            <form id="time-slot-scope-form" class="settings-modal-form" novalidate>
                <label class="form-field" for="time-slot-scope-name">
                    <span>Название сетки</span>
                    <input type="text" id="time-slot-scope-name" placeholder="Например: праздничная" required>
                </label>

                <div class="settings-modal-actions">
                    <button type="submit" class="btn btn-md btn-primary">Создать сетку</button>
                    <button type="button" class="btn btn-md btn-ghost" id="time-slot-scope-modal-cancel">Отмена</button>
                </div>

                <div class="form-alert" id="time-slot-scope-alert" role="alert"></div>
            </form>
        </div>
    </div>
</section>