{% extends "base.html" %}
{% block title %}{{ _('Cluster Topology') }}{% endblock %}
{% block body %}
<style>
    #topology-container {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
</style>
<div id="topology-container"></div>
<script type="text/javascript">
    require(['sources/utils'], function(utils) {
        require(['pem.topology'], function(TopologyModule) {
            var root = document.getElementById('topology-container');
            if (root && TopologyModule.default) {
                TopologyModule.default(root);
            }
        });
    });
</script>
{% endblock %}