{% 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: 2rem;" onload="startTime()">
    <div class="col-4 text-center row" style="height: 15vh; align-items: center; border-radius: 1rem; box-shadow: 0rem 0rem 2rem rgb(97, 97, 97);">
        <h1 id="date-time" style="font-size: clamp(1rem, 5vw, 10rem); text-align: center;"></h1>
    </div>
    {% if alarm is not None %}
    <div class="col-4 text-center"><img class="blink" width="150rem" style="" 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: 60vh; align-items: top; border-radius: 1rem;">
        <h1 style="font-size: clamp(1rem, 5vw, 10rem); text-align: center; color: red; margin-top:2rem;">NEUER EINSATZ</h1>
        <div class="row" style="margin-top: 0rem;">
            <div class="col-3 offset-1 text-start mb-5">
                <h3>Stichwort:</h3>
                <h1 style="font-size: 3rem;"><b>{{ alarm.2 }}</b></h1>
            </div>
            <div class="col-8 text-start">
                <h3>Infos:</h3>
                <h1><b>{{ alarm.3 }}</b></h1>
            </div>
        </div>
        <div class="row" style="margin-top: -2rem;">
            <div class="col-3 offset-1 text-start">
                <h3><b>Fahrzeuge:</b></h3>
            </div>
        </div>
        <div class="row" style="margin-top: -4rem;">
            {% for fz in alarm.4 %}
            <div class="col-2 offset-1 row justify-content-center" style="box-shadow: 0 0 1rem gray; height: 5vh; border-radius: 1rem; align-items:center; margin-top: -3">
                <b style="font-size: 1.175rem;">{{ fz }}</b>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

{% endif %}



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


{% endblock %}