<nav role="navigation" class="navbar navbar-custom">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="https://kcli.readthedocs.io/en/latest" class="navbar-brand">
        <img src="/static/images/kcli-small.png" width=35 height=35 alt="Kcli" />
        </a>
    </div>
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Vms <b class="caret"></b></a>
                <ul role="menu" class="dropdown-menu">
                     <li><a href="/vmsindex">List Vms</a></li>
{% if not readonly %}<li><a href="/vmcreateform">Create Vm</a></li>{% endif %}
                     <li ><a href="/imagesindex">List Images</a></li>
{% if not readonly %}<li ><a href="/imagecreateform">Download Images</a></li>{% endif %}
                     <li><a href="/vmprofilesindex">List Profiles</a></li>
                     <li ><a href="/isosindex">List Isos</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Plans <b class="caret"></b></a>
                <ul role="menu" class="dropdown-menu">
                     <li><a href="/plansindex">List Plans</a></li>
{% if not readonly %}<li><a href="/plancreateform">Create Plan</a></li>{% endif %}
                </ul>
            </li>
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Clusters <b class="caret"></b></a>
                <ul role="menu" class="dropdown-menu">
                     <li><a href="/kubesindex">List Clusters</a></li>
                     <li><a href="/kubeprofilesindex">Cluster Profiles</a></li>
{% if not readonly %}<li><a href="/kubecreateform/generic">Create Generic Cluster</a></li>{% endif %}
{% if not readonly %}<li><a href="/kubecreateform/k3s">Create K3s Cluster</a></li>{% endif %}
{% if not readonly %}<li><a href="/kubecreateform/kind">Create Kind Cluster</a></li>{% endif %}
{% if not readonly %}<li><a href="/kubecreateform/openshift">Create Openshift Cluster</a></li>{% endif %}
{% if not readonly %}<li><a href="/kubecreateform/hypershift">Create Hypershift Cluster</a></li>{% endif %}
{% if not readonly %}<li><a href="/kubecreateform/microshift">Create Microshift Cluster</a></li>{% endif %}
                </ul>
            </li>
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Pools <b class="caret"></b></a>
                <ul role="menu" class="dropdown-menu">
                     <li><a href="/poolsindex">List Pools</a></li>
{% if not readonly %}<li><a href="/poolcreateform">Create Pool</a></li>{% endif %}
                </ul>
            </li>
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Networks <b class="caret"></b></a>
                <ul role="menu" class="dropdown-menu">
                     <li><a href="/networksindex">List Networks</a></li>
{% if not readonly %}<li><a href="/networkcreateform">Create Network</a></li>{% endif %}
                </ul>
            </li>
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Containers <b class="caret"></b></a>
                <ul role="menu" class="dropdown-menu">
                     <li><a href="/containersindex">List Containers</a></li>
                     <li><a href="/containerprofilesindex">List Container Profiles</a></li>
{% if not readonly %}<li><a href="/containercreateform">Create Container</a></li>{% endif %}
                </ul>
            </li>
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Repos <b class="caret"></b></a>
                <ul role="menu" class="dropdown-menu">
                     <li><a href="/repos">List Repos</a></li>
{% if not readonly %}<li><a href="/repocreateform">Create Repo</a></li>{% endif %}
                </ul>
            </li>
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Products <b class="caret"></b></a>
                <ul role="menu" class="dropdown-menu">
                    <li><a href="/productsindex">List Products</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Clients <b class="caret"></b></a>
                <ul role="menu" class="dropdown-menu">
                     <li ><a href="/hostsindex">List Clients</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="https://kcli.readthedocs.io">Documentation</a></li>
        </ul>
        <p class="navbar-text navbar-right">Current Client: {{ client }}</p>
{% if readonly %}<p class="navbar-text navbar-right">Running in readonly mode</p>{% endif %}
    </div>
    </nav>
