{% extends "rest_framework/base.html" %}
{% load staticfiles %}

    {% block title %}
        NSoT | REST API
    {% endblock %}

    {% block branding %}
        <a class="navbar-brand" href="/">Network Source of Truth</a>
    {% endblock %}

    {% block bootstrap_theme %}
        <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">
    {% endblock %}

    {% block navbar %}

           <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/[[siteId]]/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: 0.7.4</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>

    {% endblock %}

    {% block script %}

        <script type="text/javascript">
            window.NSOT_VERSION = '0.7.4';
        </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>
        <script src="{% static "rest_framework/js/prettify-min.js" %}"></script>
        <script src="{% static "rest_framework/js/default.js" %}"></script>

    {% endblock %}