<!-- Frequency Plan Modal -->
<div class="modal fade" id="frequencyPlanModal" tabindex="-1" aria-labelledby="frequencyPlanModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="frequencyPlanModalLabel">Частотный план</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
            </div>
            <div class="modal-body">
                <div id="modalLoadingSpinner" class="text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Загрузка...</span>
                    </div>
                </div>
                
                <div id="modalFrequencyContent" style="display: none;">
                    <p class="text-muted">Визуализация транспондеров спутника по частотам. <span style="color: #0d6efd;">■</span> Downlink (синий), <span style="color: #fd7e14;">■</span> Uplink (оранжевый). Используйте колесико мыши для масштабирования, наведите курсор на полосу для подробной информации и связи с парным каналом.</p>
                    
                    <div class="frequency-plan">
                        <div class="chart-controls">
                            <button type="button" class="btn btn-sm btn-outline-primary" id="modalResetZoom">
                                <i class="bi bi-arrow-clockwise"></i> Сбросить масштаб
                            </button>
                        </div>
                        
                        <div class="frequency-chart-container">
                            <canvas id="modalFrequencyChart"></canvas>
                        </div>
                        
                        <div class="mt-3">
                            <p><strong>Всего транспондеров:</strong> <span id="modalTransponderCount">0</span></p>
                        </div>
                    </div>
                </div>
                
                <div id="modalNoData" style="display: none;" class="text-center text-muted py-5">
                    <p>Нет данных о транспондерах для этого спутника</p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .frequency-plan {
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 8px;
    }
    
    .frequency-chart-container {
        position: relative;
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 20px;
        height: 400px;
    }
    
    .chart-controls {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }
    
    .chart-controls button {
        padding: 5px 15px;
        font-size: 0.9rem;
    }
</style>
