{% load i18n %}
<!-- fallback if there are no topologies-->
{% if not topologies %}
    <div class="alert alert-warning">
        {% trans "No topologies available." %}
    </div>
{% else %}

<div class="row mb-3">
            <div class="col col-12">
                <div class="card">
                    <h5 class="card-header">
                        {% if topologies|length > 1 %}
                            {% trans "Topologies" %}
                            {% else %}
                            {% trans "Topology of" %}
                        {% endif %}   
                        {% for topology_title, topology_data in topologies.items %}
                            {% if topologies|length > 1 %}
                            <button class="btn btn-ghost-primary btn-sm topology-btn {% if forloop.first %}active{% endif %}" 
                                    id="btn-topology-{{ forloop.counter }}"
                                    onclick="showTopologyWithButtons('cy-topology-viewer', 'cy-topology-data-{{ forloop.counter }}', '{{ forloop.counter }}')">
                                {{ topology_title }}
                            </button>
                            {% else %}
                                {{ topology_title }}
                            {% endif %}
                        {% endfor %}
                    </h5>
                    <div class="card-body">
                        <!-- Single Topology Container -->
                        <div class="cy-topology" id="cy-topology-viewer"></div>
                        <!-- Hidden topology data containers -->
                        {% for topology_title, topology_data in topologies.items %}
                        <div id="cy-topology-data-{{ forloop.counter }}" 
                            data-topology='{{ topology_data|safe }}' 
                            style="display: none;"></div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    
    <style>
        .card-header {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .topology-btn.active {
            background-color: #2563eb !important;
            color: white !important;
        }
    </style>

    <script>
    let currentTopologyInstance = null;

    function showTopologyWithButtons(viewerContainerId, dataContainerId, buttonNumber) {
        // Remove active class from all buttons
        document.querySelectorAll('.topology-btn').forEach(function(btn) {
            btn.classList.remove('active');
        });
        
        // Add active class to clicked button
        document.getElementById('btn-topology-' + buttonNumber).classList.add('active');
        
        // Destroy existing topology instance if any
        if (currentTopologyInstance) {
            currentTopologyInstance.destroy();
        }
        
        // Get topology data from hidden container
        const dataContainer = document.getElementById(dataContainerId);
        const topologyData = JSON.parse(dataContainer.getAttribute('data-topology'));
        
        // Initialize new topology
        currentTopologyInstance = initializeTopology(viewerContainerId, topologyData);
    }

    function showTopology(viewerContainerId, dataContainerId) {
        // Destroy existing topology instance if any
        if (currentTopologyInstance) {
            currentTopologyInstance.destroy();
        }

        // Get topology data from hidden container
        const dataContainer = document.getElementById(dataContainerId);
        const topologyData = JSON.parse(dataContainer.getAttribute('data-topology'));
        // Initialize new topology
        currentTopologyInstance = initializeTopology(viewerContainerId, topologyData);
    }
    </script>

    {% if topologies|length > 1 %}
        <script>
        // Initialize first topology on page load
        document.addEventListener('DOMContentLoaded', function() {
            showTopologyWithButtons('cy-topology-viewer', 'cy-topology-data-1', 1);
        });
        </script>
    {% else %}
        <script>
        // Initialize first topology on page load
        document.addEventListener('DOMContentLoaded', function() {
            showTopology('cy-topology-viewer', 'cy-topology-data-1');
        });
    </script>
    {% endif %}
{% endif %} 