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

{% block content %}
<div class="content">
    <p> {{ user_greeting_before }}{{userinfo.name}}{{user_greeting_after}}</p>
    <p> {{ landing_information }} </p>
    <div class="rooms-table">
        <table>
            <thead>
                <tr class="table-header">
                    <th class="room-table-elem">Room name:</th>
                    <th>Temperature</th>
                    <th>Humidity</th>
                </tr>
                <tr class="searchbar">
                    <td colspan="255">
                        <i class="bi bi-search"></i>&nbsp;
                        <input type="text" id="tableRoomSearch" placeholder="Search by room name..." onkeyup="tableSearch()">
                    </td>
                </tr>
            </thead>
            <tbody id="tableRooms">
                {% for room in roominfo %}
                    <tr>
                        <td><a href="./room/{{ room.shortcode }}">{{ room.name }}</a>
                        {%- for sensorinfo in room.roomdata %}
                                {% if sensorinfo.state == 0 %}
                                    <td class="data-valid">
                                {% elif sensorinfo.state == 1 %}
                                    <td class="data-late">
                                {% else %}
                                    <td class="data-missing">
                                {% endif %}    
                            {{ sensorinfo.reading }}
                            </td>
                        {%- endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock content %}