<!-- Satellite Data Modal -->
<div class="modal fade" id="satelliteModal" tabindex="-1" aria-labelledby="satelliteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="satelliteModalLabel">
                    <i class="bi bi-satellite"></i> Информация о спутнике
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
            </div>
            <div class="modal-body" id="satelliteModalBody">
                <div class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Загрузка...</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>

<script>
// Function to show satellite modal
function showSatelliteModal(satelliteId) {
    const modal = new bootstrap.Modal(document.getElementById('satelliteModal'));
    modal.show();

    const modalBody = document.getElementById('satelliteModalBody');
    modalBody.innerHTML = '<div class="text-center py-4"><div class="spinner-border text-warning" role="status"><span class="visually-hidden">Загрузка...</span></div></div>';

    fetch('/api/satellite/' + satelliteId + '/')
        .then(response => {
            if (!response.ok) {
                throw new Error('Ошибка загрузки данных спутника');
            }
            return response.json();
        })
        .then(data => {
            let html = '<div class="container-fluid"><div class="row g-3">' +
                '<div class="col-md-6"><div class="card h-100">' +
                '<div class="card-header bg-light"><strong><i class="bi bi-info-circle"></i> Основная информация</strong></div>' +
                '<div class="card-body"><table class="table table-sm table-borderless mb-0"><tbody>' +
                '<tr><td class="text-muted" style="width: 40%;">Название:</td><td><strong>' + data.name + '</strong></td></tr>';
            
            if (data.alternative_name && data.alternative_name !== '-') {
                html += '<tr><td class="text-muted">Альтернативное название:</td><td><strong>' + data.alternative_name + '</strong></td></tr>';
            }
            
            html += '<tr><td class="text-muted">NORAD ID:</td><td>' + (data.norad || '-') + '</td></tr>';
            
            if (data.international_code && data.international_code !== '-') {
                html += '<tr><td class="text-muted">Международный код:</td><td>' + data.international_code + '</td></tr>';
            }
            
            html += '<tr><td class="text-muted">Подспутниковая точка:</td><td><strong>' + (data.undersat_point !== null ? data.undersat_point + '°' : '-') + '</strong></td></tr>' +
                '<tr><td class="text-muted">Диапазоны:</td><td>' + data.bands + '</td></tr>';
            
            if (data.location_place && data.location_place !== '-') {
                html += '<tr><td class="text-muted">Комплекс:</td><td><span class="badge bg-secondary">' + data.location_place + '</span></td></tr>';
            }
            
            html += '</tbody></table></div></div></div>' +
                '<div class="col-md-6"><div class="card h-100">' +
                '<div class="card-header bg-light"><strong><i class="bi bi-calendar"></i> Дополнительная информация</strong></div>' +
                '<div class="card-body"><table class="table table-sm table-borderless mb-0"><tbody>' +
                '<tr><td class="text-muted" style="width: 40%;">Дата запуска:</td><td><strong>' + data.launch_date + '</strong></td></tr>' +
                '<tr><td class="text-muted">Создан:</td><td>' + data.created_at + '</td></tr>' +
                '<tr><td class="text-muted">Кем создан:</td><td>' + data.created_by + '</td></tr>' +
                '<tr><td class="text-muted">Обновлён:</td><td>' + data.updated_at + '</td></tr>' +
                '<tr><td class="text-muted">Кем обновлён:</td><td>' + data.updated_by + '</td></tr>' +
                '</tbody></table></div></div></div>';
            
            if (data.comment && data.comment !== '-') {
                html += '<div class="col-12"><div class="card">' +
                    '<div class="card-header bg-light"><strong><i class="bi bi-chat-left-text"></i> Комментарий</strong></div>' +
                    '<div class="card-body"><p class="mb-0">' + data.comment + '</p></div></div></div>';
            }
            
            if (data.url) {
                html += '<div class="col-12"><div class="card">' +
                    '<div class="card-header bg-light"><strong><i class="bi bi-link-45deg"></i> Ссылка</strong></div>' +
                    '<div class="card-body">' +
                    '<a href="' + data.url + '" target="_blank" class="btn btn-sm btn-outline-primary">' +
                    '<i class="bi bi-box-arrow-up-right"></i> Открыть ссылку</a>' +
                    '</div></div></div>';
            }
            
            html += '</div></div>';
            modalBody.innerHTML = html;
        })
        .catch(error => {
            modalBody.innerHTML = '<div class="alert alert-danger" role="alert">' +
                '<i class="bi bi-exclamation-triangle"></i> ' + error.message + '</div>';
        });
}
</script>
