$def with (ou, children, computers, user, plugins)
$var title = _("Navigator") if ou is None else ou.name
$var js=['navigator.js']
$var css = ["navigator.css"]
$var tab: navigator
$code:
    hierarchy = []
    if ou:
        hierarchy = [storage(link='/navigator/ou/%s' % ou.name, caption=ou.name)]
        parent = ou.parent
        if not ou in user.organizative_units:
            while parent:
                hierarchy.append(storage(link='/navigator/ou/%s' % parent.name, caption=parent.name))
                # Do not show more hirarchy elements than needed
                if parent in user.organizative_units:
                    break
                parent = parent.parent
    hierarchy.append(storage(link='/navigator', caption=_("Root")))
    hierarchy.reverse()

$var hierarchy = hierarchy

<div id="tools">
$if ou:
    <div class="navaction editou" onclick="location.href='/navigator/ou/$ou/edit';"><a href="/navigator/ou/$ou/edit">$_("Edit")</a></div>
    <div class="navaction addou" onclick="location.href='/navigator/ou/$ou/add';" ><a href="/navigator/ou/$ou/add">$_("Add organizative unit")</a></div>
    <div class="navaction rmou rm" onclick="location.href='/navigator/ou/$ou/del';"><form method="post" action="/navigator/ou/$ou/del"><button>$_("Delete organizative unit")</button></div>
    <div class="navaction add" onclick="location.href='/navigator/ou/$ou/computer/add';"><a href="/navigator/ou/$ou/computer/add">$_("Add computer")</a></div>
    $if not ou.has_repo():
        <div class="navaction addrepo" onclick="location.href='/navigator/ou/$ou/repo/add';"><a href="/navigator/ou/$ou/repo/add">$_("Add repository")</a></div>
$else:
    <div class="navaction addou" onclick="location.href='/navigator/ou/add';"><a href="/navigator/ou/add">$_("Add organizative unit")</a></div>
</div>


<div id="navigator">
$if ou:
    <h3>$ou.description</h3>
$for child in children:
    <div class="organizativeunit" title="$child.description">
        <a href="/navigator/ou/$child.name">
            <img src="/static/images/nav-ou.png"/><br/>
            <p>
                $child.name ($len(child.children) - $len(child.computers))<br/>
                $child.description
            </p>
        </a>
    </div>

$for computer in computers:
    <div class="computer" title="$computer.description">
        <a href="/navigator/computer/$computer.name">
            <img class="comp_img" alt="$computer.id" src="/static/images/$(computer.get_img()).png"/>
            <br/>
            <p>
            $_("Name"): $computer.name<br/>
            $_("MAC"): $computer.get_pretty_mac()<br/>
            $_("IP"): $computer.ip<br/>
            $_("OS"): <span class="computer-os">$computer.os</span><br/>
            $_("Status"):
            <span class="status">
            $if computer.online:
                $_("Online")
            $else:
                $_("Offline")
            <br/>
            </span>
            </p>
        </a>
    </div>
</div>

<div class="clear"></div>