{% extends "console/base.html" %}
{% load console_tags %}

{% block head_meta %}
    <meta name="viewport" content="width=device-width, initial-scale=1">
{% endblock %}
{% block extra_style %}
    <link href="{{ STATIC_URL }}console/css/style.css" rel="stylesheet">
    <link href="{{ STATIC_URL }}console/bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="{{ STATIC_URL }}select2/select2-3.4.5/select2.css" type="text/css" media="all" rel="stylesheet" />
{% endblock %}
{% block extra_head %}
    <script type="text/javascript" src="{{ STATIC_URL }}select2/js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}select2/select2-3.4.5/select2.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}select2/js/select2__init.js"></script>
{% endblock %}
{% block body %}
<div class="container">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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="/">
                    {{ CONSOLE_TITLE }} <span class="brand-subtitle">BETA</span>
                </a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            {% if not login_form %}
                <ul class="nav navbar-nav">
                    <li{% if path == "/me/" %} class="active"{% endif %}><a href="/me/">Customer</a></li>
                    <li{% if "/containers/" in path %} class="active"{% endif %}>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            Containers <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            {% for c in containers %}
                            <li{% if container and container.uid == c.uid %} class="active"{% endif %}>
                                <a href="/containers/{{ c.uid }}"><b>{{ c.name }}</b> ({{ c.uid }})</a>
                            </li>
                            {% endfor %}
                        </ul>
                    </li>
                    <li{% if "/domains/" in path %} class="active"{% endif %}>
                        <a href="/domains/">Domains</a>
                    </li>
                    <li{% if "/tags/" in path %} class="active"{% endif %}>
                        <a href="/tags/">Tags</a>
                    </li>
                    <li{% if "/alarms/" in path %} class="active"{% endif %}>
                        <a href="/alarms/">Alarms</a>
                    </li>
                    <li><a href="/logout/">Logout</a></li>
                </ul>
            {% else %}
                <form class="navbar-form navbar-right" role="form" action="." method="post">{% csrf_token %}
                    {% for field in login_form %}
                        <div class="form-group{% if field.errors %} has-error{% endif %}">
                            <label for="{{ field.id_for_label }}" class="control-label">{{ field.label }}</label>{{ field }}
                        </div>
                    {% endfor %}
                    <button type="submit" class="btn btn-primary">Login</button>
                </form>
            {% endif %}
        </div><!-- /.container-fluid -->
    </nav>
    <h1>{{ CONSOLE_TITLE }} <small>{{ CONSOLE_SUBTITLE }}</small></h1>

    {% block content %}
    {% if alarms %}
    <div class="row max-height">
        <div class="col-xs-12 col-md-6">
    {% endif %}
            <h3>Latest News</h3>
            <div class="scrollable max-height-800">
            {% for n in news %}
                <div class="row well">
                    <div class="col-xs-7 col-sm-9 col-md-9 col-lg-9 overflow-x-auto">{{ n.content|urlize }}</div>
                    <div class="col-xs-5 col-sm-3 col-md-3 col-lg-3">{{ n.date }}</div>
                </div>
            {% endfor %}
            </div>
    {% if alarms %}
        </div>
        <div class="col-xs-12 col-md-6">
            <h3>Latest Alarms</h3>

            <div class="panel-group scrollable max-height-800" id="alarms-accordion">
                {% for a in alarms %}

                    <div class="panel panel-default table_row"
                        {% for k, v in a.items %}
                            {% if v and k != 'msg' and k != 'id' and k != 'unix' %} data-{{ k }}="{{ v }}"{% endif %}
                        {% endfor%}>
                        <div style="background-color:{{ a.color }};" class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#alarms-accordion" href="#alarm-{{ a.id }}">
                                    {{ a.msg }} <a class="pull-right" href="?del-alarm={{ a.id }}">
                                        <span class="glyphicon glyphicon-remove-circle"></span>
                                    </a>
                                </a>
                            </h4>
                        </div>
                        <div id="alarm-{{ a.id }}" class="panel-collapse collapse{% if forloop.first %} in{% endif %}">
                            <div class="panel-body">
                                 <div class="table-responsive">
                                    <table class="table table-hover table-bordered">
                                        {% for k, v in a.items %}
                                            {% if v and k != 'msg' and k != 'id' and k != 'color' %}
                                                <tr>
                                                    <td>{{ k|get_title }}</td>
                                                    <td>{{ v }}</td>
                                                </tr>
                                            {% endif %}
                                        {% endfor %}
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}
    {% endblock %}
    <footer aria-role="banner" role="banner" id="footer" class="top-border top-padding margin-top">
        <p class="col-xs-4">Uwsgi.it</p>
        <div class="col-xs-8">
            <ul class="pull-right list-unstyled flat">
                <li><a href="https://github.com/unbit/uwsgi.it" title="Uwsgi.it on GitHub">Take a look on GitHub</a></li>
            </ul>
        </div>
    </footer>
</div>


{% endblock %}
{% block footer_js %}
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{{ STATIC_URL }}console/bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<script src="{{ STATIC_URL }}console/js/functions.js"></script>
{% if last_alarm_id %}{# if user is logged in #}
<script>
    var latest_alarms_url = "{% url 'console_latest_alarms' %}";
    var alarm_url = "{% url 'console_alarms' %}";
    var last_alarm_id = {% if last_alarm_id %}{{ last_alarm_id }}{% else %}undefined{%endif%};

</script>
<script src="{{ STATIC_URL }}console/js/latest_alarms.js"></script>
{% endif %}
{% endblock %}
