{% extends 'base.html' %}
{% load i18n %}

{% block title %}{% trans 'Alarm History' %}{% endblock %}

{% block page_header %}
    <div class="page-header">
      <h2>{% trans 'Alarm History' %}</h2>
    </div>
   <h4>{% trans "Alarm Details" %}</h4>
  <hr class="header_rule">
  <dl>
    <dt>{% trans "Name" %}</dt>
    <dd>{{ alarm.alarm_definition.name|default:_("None") }}</dd>
    {% for metric in alarm.metrics %}
    <dt>{% trans "Metric Name"  %} {{forloop.counter}}</dt>
    <dd>{{ metric.name }}</dd>
    {% endfor %}
  </dl>

{% endblock page_header %}

{% block main %}

    <div class="row" ng-controller="timestampPickerController">
        <div class="col-sm-3">
            <select id="timestampFormatDropdownAlarmHistory"
                    name="ts_mode"
                    class="form-control"
                    ng-model="currentFormat"
                    ng-init="setUp('{{ timestamp_selected | safe }}')">
                <option value="">{% trans "---Please select---" %}</option>
                {% for key,label in timestamp_formats %}
                <option value="{{ key }}" title="{{ label }}">{{ label }}</option>
                {% endfor %}
            </select>
        </div>
        <span class="label label-primary"
              ng-if="currentOffset">{$ currentOffset $}h</span>
    </div>

    {{ table.render }}

<div class="pagination">
    <span class="step-links">
        {% if prev_page_offset != None %}
            <a href="?page_offset={{ prev_page_offset }}&amp;ts_mode={{ timestamp_selected }}&amp;ts_offset={{ timestamp_offset|urlencode }}"
               class="btn btn-default btn-sm" style="position:relative;top:-35px;">{% trans 'Previous Page' %}</a>
        {% endif %}
        {% if page_offset %}
            <a href="?page_offset={{ page_offset }}&amp;ts_mode={{ timestamp_selected }}&amp;ts_offset={{ timestamp_offset|urlencode }}"
               class="btn btn-default btn-sm" style="position:relative;top:-35px;">{% trans 'Next Page' %}</a>
        {% endif %}
    </span>
</div>
<style>
.status-icon {
  vertical-align: top;
  margin-right: 2px;
}
</style>
{% endblock %}

