<div class="card">
    <div class="card-header-row" style="margin-bottom: 1.5rem;">
        <h2>Загруженность</h2>
        <button type="button" class="btn btn-md btn-secondary" id="workload-refresh">Обновить</button>
    </div>
    
    <div class="filter-row workload-filter-row" style="margin-bottom: 2rem; align-items: flex-end; gap: 1.5rem;">
        <div class="form-group workload-target-control">
            <label for="workload-target-select">Что смотреть</label>
            <select id="workload-target-select" class="workload-display-select" data-native-select="true">
                <option value="classrooms">Аудитории</option>
                <option value="teachers">Преподаватели</option>
                <option value="departments">Кафедры</option>
            </select>
        </div>

        <div class="form-group workload-display-control">
            <label for="workload-display-select">Отображение</label>
            <select id="workload-display-select" class="workload-display-select">
                <option value="all">Все аудитории</option>
            </select>
        </div>

        <div class="form-group workload-overview-filter">
            <label>Корпус</label>
            <div class="custom-multi-select">
                <div class="select-box" id="building-box">
                    <span class="select-text" id="building-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="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
                <div class="dropdown-menu" id="building-menu">
                    <div id="building-checkboxes" class="checkbox-group-vertical"></div>
                </div>
            </div>
        </div>
        
        <div class="form-group workload-overview-filter">
            <label for="workload-min-capacity">Мин. вместимость</label>
            <input type="number" id="workload-min-capacity" placeholder="0" min="0" style="width: 100px;">
        </div>
        
        <div class="form-group workload-overview-filter">
            <label>Оборудование</label>
            <div class="custom-multi-select">
                <div class="select-box" id="equipment-box">
                    <span class="select-text" id="equipment-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="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
                <div class="dropdown-menu" id="equipment-menu">
                    <div id="equipment-checkboxes" class="checkbox-group-vertical"></div>
                </div>
            </div>
        </div>
        
        <div class="form-group" style="max-width: 200px;">
            <label>Дата</label>
            <input type="date" id="workload-date">
        </div>
    </div>

    <div class="form-alert" id="workload-alert" role="alert"></div>

    <div id="workload-overview-block">
        <div class="workload-summary" id="workload-summary"></div>

        <div class="workload-grid-container">
            <table class="workload-table" id="workload-table">
                <thead>
                    <tr id="workload-header-row">
                        <th class="top-left-cell">
                            <span class="top-label">Время</span>
                            <span class="bottom-label">Сущность</span>
                        </th>
                    </tr>
                </thead>
                <tbody id="workload-tbody"></tbody>
            </table>
        </div>
    </div>

    <div class="room-workload-block" id="room-workload-block" hidden>
        <div class="room-workload-summary" id="room-workload-summary"></div>
        <div class="room-workload-tables" id="room-workload-tables"></div>
    </div>
</div>
