{% load static %}

<link rel="stylesheet" href="{% static 'netbox_topology_views/css/vendor.css' %}">
<link rel="stylesheet" href="{% static 'netbox_topology_views/css/app.css' %}">

<div class="modal-header">
    <h5 class="modal-title">Topology Views</h5>
    <div class="controls">
    	<div class="control-group">
			{% block extra_controls %}{% endblock %}
			<a id="btnDownloadXml" class="btn btn-info" href="#">
				<i class="mdi mdi-download"></i>
				Download XML
			</a>
			<a id="btnDownloadImage" class="btn btn-info" href="#">
				<i class="mdi mdi-download"></i>
				Download PNG
			</a>
            <a class="btn btn-danger" data-bs-dismiss="modal">
                <i class="mdi mdi-close-thick"></i>
                Close
            </a>
    	</div>
	</div>
</div>
<div class="panel-body" >
    <div style="max-width: 900px; height: 500px;">
        <div id="visgraph" style="width: 100%; height: 100%;">      
        </div>
    </div>
</div>

<style type="text/css">
    .modal-dialog {
        max-width: 902px !important;
    }
</style>

<script type="text/javascript">
    var is_htmx = true;
    var brokenImage = '{{ broken_image }}';
    var topologyData = {{ topology_data | safe }};
    const basePath = '{{ basepath }}';
</script>
<script src="{% static 'netbox_topology_views/js/app.js' %}?ver={{ epoch }} " defer></script>
