{% for alarm in alarms %}
    <li id="alarm_{{ alarm.idlldevice_pdlag_alarm }}">
        <div class="alert alert-warning" role="alert" style="margin: 0">
            <p>
                <i class="glyphicon glyphicon-barcode" style="margin-bottom: 10px; margin-right: 10px;"></i>
                {{ alarm.lldevicelist_id }}
                <br/>
                <i class="glyphicon glyphicon glyphicon-map-marker" style="margin-bottom: 10px; margin-right: 10px;"></i>
                {{ alarm.lldevicelist.rem_identifier }}
                <br/>
                <i class="glyphicon glyphicon glyphicon-info-sign" style="margin-bottom: 10px; margin-right: 10px;"></i>
                {{ alarm.lldevicelist.loc_type }}
                <br/>
                <i class="glyphicon glyphicon-time" style="margin-bottom: 10px; margin-right: 10px;"></i>
                {{ alarm.timestamp| safe }}
                <br/>
                <i class="glyphicon glyphicon-align-justify" style="margin-bottom: 10px; margin-right: 10px;"></i>
                    Text:
                    {% for line in alarm.alarm_split %}
                       <br> {{ line }}
                    {% endfor %}
                <br/>
            </p>
            <div class="btn-group btn-group-justified" role="group" style="margin-top: 5px">
                <div class="btn-group" role="group">
                    {% if  alarm.lldevicelist.loc_type == 'PDL-AG' %}
                        <button type="button" class="btn btn-primary btn-sm" onclick="alarms_confirm('PDL-AG',{{ alarm.idlldevice_pdlag_alarm }})">
                    {% elif alarm.lldevicelist.loc_type == 'PDL-HG' %}
                        <button type="button" class="btn btn-primary btn-sm" onclick="alarms_confirm('PDL-HG',{{ alarm.idlldevice_pdlhg_alarm }})">
                    {% endif %}
                        {% if lang == 'hr'%}
                            Prihvati
                        {% else %}
                            Confirm
                        {% endif %}
                    </button>
                </div>
            </div>
        </div>
    </li>
{% endfor %}


<script>
    $(document).ready(function(){
        // ovdje notify staviti
        $("#AlarmBadge").html('{{ alarms|length }}');
        console.log("Alarm badge {{ alarms|length }}");

        {% if alarms|length > 0 %}
            var sound_alarm = document.getElementById("sound");
            sound_alarm.play();
            {% for alarm in alarms %}
                new PNotify({
                    title: '{{ alarm.lldevicelist_id }} [{{ alarm.lldevicelist.rem_identifier }}]',
                    text: '{% for line in alarm.alarm_split %} <br> {{ line }} {% endfor %}',
                    styling: 'bootstrap3'
                });
            {% endfor %}
        {% endif %}
    });
</script>