{% extends "console/index.html" %}

{% load console_tags %}

{% block content %}
    <div class="row">
    <div class="col-xs-12 col-sm-4 col-md-3">

        <div class="panel-group" id="accordion">
            <form class="form-horizontal" role="form" method="POST">
            {% csrf_token %}
            {{ alarm_form.non_field_errors }}
            {% for field in alarm_form %}
                <div class="form-group">
                    <div class="col-sm-6">
                        <label for="{{ field.id_for_label }}" class="control-label">{{ field.label }}</label>
                    </div>
                    <div class="col-sm-6">
                    {{ field }}
                    </div>
                </div>
            {% endfor %}
                <div class="form-group">
                    <div class="col-sm-offset-4 col-sm-7">
                        <button type="submit" class="btn btn-default">Search</button>
                    </div>
                </div>

            </form>
        </div>

    </div>

    <div class="col-xs-12 col-sm-8 col-md-9">
        {% if alarms %}
        <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>
        {% else %}
        No alarms
        {% endif %}
    </div>
  </div>

{% endblock %}