<!DOCTYPE html>
{% autoescape true %}
<html lang="en" ng-app="nsotApp">
    <head>
        <title>NSoT</title>

        <link href="/static/vendor/bootstrap/css/bootstrap.min.css"
              rel="stylesheet"
              media="screen">
        <link href="/static/vendor/ng-tags-input/css/ng-tags-input.min.css"
              rel="stylesheet"
              media="screen">
        <link href="/static/vendor/ng-tags-input/css/ng-tags-input.bootstrap.min.css"
              rel="stylesheet"
              media="screen">
        <link href="/static/vendor/font-awesome/css/font-awesome.min.css"
              rel="stylesheet"
              media="screen">
        <link href="/static/css/nsot.css" rel="stylesheet" media="screen">
    </head>
    <body>
        <div class="container-fluid">
            <div class="row" ng-controller="navigationController">
                <nav class="navbar navbar-static-top navbar-default" role="navigation">
                    <div class="navbar-header">
                        <button type="button"
                                class="navbar-toggle collapsed"
                                data-toggle="collapse"
                                data-target="#nsot-navbar"
                        >
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                      </button>
                      <a class="navbar-brand" href="/">Network Source of Truth</a>
                    </div>
                    <div class="collapse navbar-collapse" id="nsot-navbar">
                        <ul ng-if="siteId" class="nav navbar-nav">
                            <li ng-class="{
                                active: isActive('/sites/[[siteId]]/networks')
                            }">
                                <a title="Networks" ng-href="/sites/[[siteId]]/networks">
                                    Networks
                                </a>
                            </li>
                            <li ng-class="{
                                active: isActive('/sites/[[siteId]]/devices')
                            }">
                                <a title="Devices" ng-href="/sites/[[siteId]]/devices">
                                    Devices
                                </a>
                            </li>
                            <li ng-class="{
                                active: isActive('/sites/[[siteId]]/attributes')
                            }">
                                <a title="Attributes" ng-href="/sites/[[siteId]]/attributes">
                                    Attributes
                                </a>
                            </li>
                            <li ng-if="siteId" ng-class="{
                                active: isActive('/sites/[[siteId]]/changes')
                            }">
                                <a title="Changes" ng-href="/sites/1/changes">
                                    Changes
                                </a>
                            </li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
                                    <i class="fa fa-cogs fa-lg"></i> <span class="caret"></span>
                                </a>
                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a title="Profile" href="/profile"><i class="fa fa-fw fa-user"></i> Profile</a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a title="Sites" href="/sites"><i class="fa fa-fw fa-sitemap"></i> Sites</a>
                                    </li>
                                    <li>
                                        <a title="Users" href="/users"><i class="fa fa-fw fa-users"></i> Users</a>
                                    </li>
                                    <li class="divider"></li>
                                    <li><a
                                        title="Documentation"
                                        href="http://nsot.readthedocs.org/en/latest/">
                                            <i class="fa fa-fw fa-question-circle"></i> Documentation
                                    </a></li>
                                    <li><a
                                        title="Source (GitHub)"
                                        href="https://github.com/dropbox/nsot">
                                            <i class="fa fa-fw fa-github"></i> Source
                                    </a></li>
                                    <li class="divider"></li>
                                    <li><a><i class="fa fa-fw fa-paper-plane"></i> Version: {{NSOT_VERSION}}</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>

            <div class="row">
                <div class="col-sm-12 col-sm-offset-0">
                    <div id="content">
                        <ng-view></ng-view>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            window.NSOT_VERSION = '{{NSOT_VERSION}}';
        </script>

        <script src="/static/vendor/angular/js/angular.min.js"></script>
        <script src="/static/vendor/angular-route/js/angular-route.min.js"></script>
        <script src="/static/vendor/angular-resource/js/angular-resource.min.js"></script>
        <script src="/static/vendor/ng-tags-input/js/ng-tags-input.min.js"></script>
        <script src="/static/vendor/lodash/js/lodash.min.js"></script>
        <script src="/static/vendor/jquery/js/jquery.min.js"></script>
        <script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
        <script src="/static/vendor/moment/js/moment.min.js"></script>
        <script src="/static/js/nsot.js"></script>
        <script src="/static/js/app.js"></script>
        <script src="/static/js/services.js"></script>
        <script src="/static/js/filters.js"></script>
        <script src="/static/js/controllers.js"></script>
        <script src="/static/js/directives.js"></script>
    </body>
</html>
{% endautoescape %}
