{% extends "base.html.jinja" %}
{% block content %}

<div class="content">
    <h2>Room: {{ current_room.name }}</h2>
    <div class="current-readings">
        <h3>Current readings:</h3>
        <div style="display: flex;">
            {% for sensorinfo in sensorinfolist %}
                <div style="border: 2px black solid; width: fit-content; text-align: center;">
                    <div style="border-bottom: 2px gray solid; font-weight: bold;">
                        {{ sensorinfo.type }}
                    </div>
                    <div style="font-weight: bolder; font-size: xxx-large; border-bottom: 2px gray solid;">
                        {{ sensorinfo.reading }}
                    </div>
                    {% if sensorinfo.state == 0 %}
                        <div class="data-valid">
                    {% elif sensorinfo.state == 1 %}
                        <div class="data-late">
                    {% else %}
                        <div class="data-missing">
                    {% endif %}
                        Last updated: {{ sensorinfo.timestamp }} 
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    {{ fig }}
</div>

{% endblock content %}