{% extends 'layout.html' %}
{% block content %}
{% include 'menu.html' %}
<center>
<a href="/createnet" class="btn btn-outline-danger"><i class="fa-solid fa-plus"></i> Add Network</a></br></br></br>
<div class="container">
Physical Interfaces:
        <div class="row justify-content-md-center">
            <div class="col-md-6">
                <ul class="list-group">
			<li class="list-group-item bg-primary text-dark">
                        {% for pint in net_hard_int %}
                                <strong><i class="fa-solid fa-ethernet"></i> {{ pint }}</strong><br>
                        {% endfor %}
                        </li>
		</ul>
            </div>
	</div>
</div></br>
<div class="container">
Virtual Interfaces:
        <div class="row justify-content-md-center">
            <div class="col-md-6">
                <ul class="list-group">
		    {% for noac in net_na %}
			<li class="list-group-item bg-secondary text-dark">
			<strong><i class="fa-solid fa-ethernet"></i> {{ noac }} Not active</strong><br>
			</li>
                    {% endfor %}
                    {% for item in net_tree %}
                        <li class="list-group-item bg-info text-dark">
                            <strong><i class="fa-solid fa-ethernet"></i> {{ item[0] }}</strong>
				<form action="/delnet" method="post">
			                <input type="hidden" id="net_del" name="net_del" class="form-control" value="{{ item[0] }}">
			                <button name="delete" class="btn btn-outline-secondary" type="submit" onclick="loading();">Delete</button>
				</form><br>
                            <ul class="list-group">
                                {% for sub_item in item[1] %}
                                    <li class="list-group-item bg-warning text-dark">
					<i class="fa-solid fa-desktop"></i> {{ sub_item }}
				    </li>
                                {% endfor %}
                            </ul>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
</div>
</center>
{% endblock %}