{% load i18n %}
{% load bootstrap_icons %}
{# The host's sections. section: the one this page belongs to; detail: the page is an item of it (a pool, a network), not the section's own page #}
<nav class="host-nav" aria-label="{% trans "Host sections" %}">
    <ol class="breadcrumb shadow-sm">
        <li class="breadcrumb-item">
            {% if section == "overview" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'laptop' %} {% trans "Overview" %}</span>
            {% else %}<a href="{% url 'overview' compute.id %}"{% if section == "overview" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'laptop' %} {% trans "Overview" %}</a>{% endif %}
        </li>
        <li class="breadcrumb-item">
            {% if section == "instances" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'server' %} {% trans "Instances" %}</span>
            {% else %}<a href="{% url 'instances' compute.id %}"{% if section == "instances" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'server' %} {% trans "Instances" %}</a>{% endif %}
        </li>
        <li class="breadcrumb-item">
            {% if section == "storages" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'device-hdd' %} {% trans "Storage" %}</span>
            {% else %}<a href="{% url 'storages' compute.id %}"{% if section == "storages" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'device-hdd' %} {% trans "Storage" %}</a>{% endif %}
        </li>
        <li class="breadcrumb-item">
            {% if section == "networks" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'hdd-network' %} {% trans "Networks" %}</span>
            {% else %}<a href="{% url 'networks' compute.id %}"{% if section == "networks" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'hdd-network' %} {% trans "Networks" %}</a>{% endif %}
        </li>
        <li class="breadcrumb-item">
            {% if section == "interfaces" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'wifi' %} {% trans "Interfaces" %}</span>
            {% else %}<a href="{% url 'interfaces' compute.id %}"{% if section == "interfaces" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'wifi' %} {% trans "Interfaces" %}</a>{% endif %}
        </li>
        <li class="breadcrumb-item">
            {% if section == "nwfilters" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'filter' %} {% trans "Filters" %}</span>
            {% else %}<a href="{% url 'nwfilters' compute.id %}"{% if section == "nwfilters" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'filter' %} {% trans "Filters" %}</a>{% endif %}
        </li>
        <li class="breadcrumb-item">
            {% if section == "virtsecrets" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'key' %} {% trans "Secrets" %}</span>
            {% else %}<a href="{% url 'virtsecrets' compute.id %}"{% if section == "virtsecrets" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'key' %} {% trans "Secrets" %}</a>{% endif %}
        </li>
        <li class="breadcrumb-item">
            {% if section == "nodedevs" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'usb-symbol' %} {% trans "Devices" %}</span>
            {% else %}<a href="{% url 'nodedevs' compute.id %}"{% if section == "nodedevs" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'usb-symbol' %} {% trans "Devices" %}</a>{% endif %}
        </li>
    </ol>
</nav>