{% include "header.html" with title="Alarm" %}

<ul class="list">
    {% if alarm.isAlarmTriggered %}
    <li>
        <div class="alarm">ALARM</div>
    </li>
        {% for detector in detectors %}
            {% if detector.isTriggered %}
                <li>
                    <div class="alarm">{{ detector.getName }}</div>
                </li>
            {% endif %}
        {% endfor %}
    {% endif %}

    <li>
        Alarm <a id="alarm_disarm" class="button-positive">uit</a>
    </li>
    <li>
        Alarm <a id="alarm_arm" class="button-negative">aan</a>
    </li>
    <li class="list-divider">Status</li>
    <li>
        Status: <span class="value">{% if alarm.isArmed %}Op scherp{% else %}Uit{% endif %}</span>
    </li>
    <li>
        SMS krediet: <span class="{% if balance < 2 %}low-balance{% endif %} value">{{ balance }} Euro</span>
    </li>
    <li class="list-divider">Detectoren</li>
    {% for detector in detectors %}
    <li>
        {{ detector.getName }}

        <div id="detector_{{ detector.getID }}" class="detector toggle {% if detector.isEnabled %}active{% endif %}">
            <div class="toggle-handle"></div>
        </div>
    </li>
    {% endfor %}
    <li></li>
</ul>

{% include "footer.html" %}
