<!-- Selected Items Offcanvas Component -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="selectedItemsOffcanvas" aria-labelledby="selectedItemsOffcanvasLabel" style="width: 66vw;">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="selectedItemsOffcanvasLabel">Выбранные элементы</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Закрыть"></button>
    </div>
    <div class="offcanvas-body p-0">
        <div class="d-flex flex-column h-100">
            <!-- Action buttons -->
            <div class="p-3 border-bottom">
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeSelectedItems()">
                        <i class="bi bi-trash"></i> Убрать из списка
                    </button>
                    <button type="button" class="btn btn-primary btn-sm" onclick="showSelectedItemsOnMap()">
                        <i class="bi bi-map"></i> Карта
                    </button>
                    <button type="button" class="btn btn-secondary btn-sm ms-auto" data-bs-dismiss="offcanvas">
                        Закрыть
                    </button>
                </div>
            </div>
            
            <!-- Table container -->
            <div class="flex-grow-1 overflow-auto">
                <div class="table-responsive" style="height: 100%;">
                    <table class="table table-striped table-hover table-sm table-bordered" style="font-size: 0.85rem;">
                        <thead class="table-dark sticky-top">
                            <tr>
                                <th scope="col" class="text-center" style="width: 3%;">
                                    <input type="checkbox" id="select-all-selected" class="form-check-input" onclick="toggleAllSelected(this)">
                                </th>
                                <th scope="col">Имя</th>
                                <th scope="col">Спутник</th>
                                <th scope="col">Транспондер</th>
                                <th scope="col">Част, МГц</th>
                                <th scope="col">Полоса, МГц</th>
                                <th scope="col">Поляризация</th>
                                <th scope="col">Сим. V</th>
                                <th scope="col">Модул</th>
                                <th scope="col">ОСШ</th>
                                <th scope="col">Время ГЛ</th>
                                <th scope="col">Местоположение</th>
                                <th scope="col">Геолокация</th>
                                <th scope="col">Обновлено</th>
                                <th scope="col">Кем(обн)</th>
                                <th scope="col">Создано</th>
                                <th scope="col">Кем(созд)</th>
                                <th scope="col">Зеркала</th>
                            </tr>
                        </thead>
                        <tbody id="selected-items-table-body">
                            <!-- Selected items will be populated here via JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>