{% load staticfiles %}
{% load i18n %}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{% trans "Dashboard" %}</title>

        <link rel="stylesheet" type="text/css" href="{% static 'zbx_dashboard/css/bootstrap.min.css' %}" /> 
        <style>
            body {
                padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
            }
        </style>

        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script src="{% static 'zbx_dashboard/js/jquery-1.11.1.js' %}" type="text/javascript"></script>
        <script src="{% static 'zbx_dashboard/js/jquery-ui.js' %}" type="text/javascript"></script>
        <script src="{% static 'zbx_dashboard/js/jquery.cookie.js' %}" type="text/javascript"></script>
        <script src="{% static 'zbx_dashboard/js/jquery.formset.js' %}" type="text/javascript"></script>
        <script src="{% static 'zbx_dashboard/js/bootstrap.js' %}" type="text/javascript"></script>
        {% block extrahead %}
        {% endblock %}
        <script type="text/javascript">
        $(function(){
        {% block jquery %}
        {% endblock %}
        });
        </script>
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="{% url 'boards:list' %}">{% trans "Dashboard" %}</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        {% if user.is_authenticated and user.is_staff %}
                            <li><a href="{% url 'boards:list' %}" class="">{% trans "List of dashboards" %}</a></li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin" role="button">
                                    {% trans "Add dashboard" %}<span class="caret"></span>
                                </a>
                                <div class="dropdown-menu" style="padding: 15px; width: 220px;">
                                    <form action="{% url 'boards:add' %}" method="get" role="form">
                                        <div class="form-group">
                                            <label for="username">{% trans "Zabbix screen ID" %}:</label>
                                            <input class="form-control" type="text" name="screen_id" id="screen_id" placeholder="{% trans "Enter screen ID" %}">
                                        </div>
                                        <button type="submit" class="btn btn-primary">{% trans "Import" %}</button>
                                        <div class="divider"></div>
                                        <a class="btn btn-success" href="{% url 'boards:add' %}">{% trans "Create blank" %}</a>
                                    </form>
                                </div>
                            </li>
                            <li><a href="/admin" class="">{% trans "Administration" %}</a></li>
                            <li><a href="{% url 'logout' %}" class="">{% trans "Exit" %}</a></li>
                        {% elif user.is_authenticated %}
                            <li><a href="{% url 'boards:list' %}" class="">{% trans "List of dashboards" %}</a></li>
                            <li><a href="{% url 'logout' %}" class="">{% trans "Exit" %}</a></li>
                        {% else %}
                             <li class="dropdown" id="menuLogin">
                                 <a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin" role="button">
                                     {% trans "Login" %}<span class="caret"></span>
                                 </a>
                                 <div class="dropdown-menu" style="padding: 15px; width: 200px;">
                                     <form action="." method="post" role="form">
                                        {% csrf_token %}
                                        <div class="form-group">
                                            <label for="username">{% trans "Username" %}:</label>
                                            <input type="text" name="username" id="username" class="form-control" placeholder="{% trans "Enter your username" %}">
                                        </div>
                                        <div class="form-group">
                                            <label for="password">{% trans "Password" %}</label>
                                            <input type="password" name="password" id="password" class="form-control" placeholder="{% trans "Enter your password" %}">
                                        </div>
                                        <button type="submit" class="btn btn-default">{% trans "Login" %}</button>
                                        <input type="hidden" name="next" value="{{ next|escape }}" />
                                    </form>
                                </div>
                            </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container-fluid">
            {% block content %}Empty page{% endblock %}
        </div> <!-- container -->
    </body>
</html>