{% extends 'layout.html' %}
{% block content %}
{% include 'menu.html' %}
<!--
<div class="container">
        <div class="row justify-content-md-center">
            <div class="col">
                <ul class="list-group">
			<li class="list-group-item bg-primary text-dark">
			Physical interface
			<center>
			{% for pint in net_hard_int %}
				<strong><i class="fa-solid fa-ethernet"></i> {{ pint }}</strong><br>
			{% endfor %}
			</center></li>
                    {% for item in net_tree %}
                        <li class="list-group-item bg-info text-dark">
                            <center><strong><i class="fa-solid fa-ethernet"></i> {{ item[0] }}</strong></center><br>
                            <ul class="list-group">
                                {% for sub_item in item[1] %}
                                    <li class="list-group-item bg-warning text-dark">
					<center><i class="fa-solid fa-desktop"></i> {{ sub_item }}</center>
				    </li>
                                {% endfor %}
                            </ul>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
</div>
-->
    <div class="container">
	<div class="row justify-content-md-center">
            <div class="col">
            {% for pint in net_hard_int %}
                <strong><i class="fa-solid fa-ethernet"></i> {{ pint }}</strong><br>
            {% endfor %}
	    </div>
	</div>
        <div class="row justify-content-md-center">
            <div class="col">
                <div class="mermaid">
graph TD
{% for item in net_tree %}
root[Root] --- {{ item[0] }}[{{ item[0] }}]
{% for sub_item in item[1] %}
{{ item[0] }}[{{ item[0] }}] --- {{ sub_item }}[{{ sub_item }}]
{% endfor %}
{% endfor %}
                </div>
            </div>
        </div>
    </div>
    <script>mermaid.initialize({startOnLoad:true});</script>
{% endblock %}