{% extends 'main/base.html' %} 
{% load static %}


{% block content %}

<script>
    setInterval(function() {
        location.reload();
    }, 5000);
</script>

<div class="container-fluid row justify-content-between mb-5" style="padding: 0rem; margin-top: 1rem;" onload="startTime()">
    <div class="col-4 text-center row" style="height: 5rem; width: 18rem; align-items: center; border-radius: 1rem; box-shadow: 0rem 0rem 2rem rgb(97, 97, 97);">
        <h1 id="date-time" style="font-size: clamp(1rem, 3rem, 4rem); text-align: center;"></h1>
    </div>
    {% if alarm is not None %}
    <div class="col-1 text-center"><img class="blink" width="100rem" style="margin-top: -2rem;" src="{% static 'img/alarm.png' %}" alt="User"></div>
    {% endif %}
    <div class="col-4"></div>
</div>

{% if alarm is not None %}

<audio id="audio">
    <source src="{% static 'sounds/Audio13.wav' %}">
</audio>

{% if alarm.5 is True %}
<script>
    document.getElementById("audio").play()
</script>
{% endif %}

<div class="row mb-2">
    <div class="text-center row shadow_blink" style="height: 50rem; align-items: top; border-radius: 1rem;">
        <h1 style="font-size: clamp(1rem, 3vw, 8rem); text-align: center; color: red; margin-top:2rem;">NEUER EINSATZ</h1>
        <div class="" style="margin-top: 0rem;">
            <div class="text-start" style="float: left; margin-left: 2rem; border-radius: 1rem; height: 15rem; width: 40%; padding: 1rem; background-color: rgb(235, 234, 234);">
                <h3>Stichwort:</h3>
                <h1><b>{{ alarm.2 }}</b></h1>
            </div>
            <div class="text-start" style="float: right; margin-right: 2rem; border-radius: 1rem; height: 15rem; width: 40%; padding: 1rem; background-color: rgb(235, 234, 234);">
                <h3>Infos:</h3>
                <h1><b>{{ alarm.3 }}</b></h1>
            </div>
        </div>
        <div class="text-center" style="margin-top: 0rem; margin:2rem; border-radius: 1rem; height: 20rem; max-width: 95%; padding: 1rem; background-color: rgb(235, 234, 234)">
            <div>
                <div class="col-3 offset-1 text-start">
                    <h3><b>Fahrzeuge:</b></h3>
                </div>
            </div>
            <div class="row" style="margin-top: 1rem;">
                {% for fz in alarm.4 %}
                <div class="col-2 offset-1 row justify-content-center" style="box-shadow: 0 0 1rem gray; height: clamp(1rem, 5vw, 5rem); border-radius: 1rem; align-items:center; margin-top: 1rem">
                    <b style="font-size: clamp(0.75rem,1vw,1.75rem);">{{ fz }}</b>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

{% endif %}



<script src="{% static 'js/clock.js' %}" type="text/javascript"></script>


{% endblock %}