{% extends "base.html" %}

{% block head %}
    {{ super() }}
    <script>
        var CSRF_TOKEN = "{{ csrf_token() }}";
        try {
            var mySuffixes = {{ suffixes | tojson }};
        } catch(err) {
            // fine
        }
    </script>
    <script src="{{ url_for('static', filename='js/min/chart.umd.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/min/common.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/min/environments.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/min/rooms.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/min/modals.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/min/graphs.min.js') }}"></script>

{% endblock %}

{% block content %}
{%- if data -%}
    <div class="row row-cols-1 row-cols-lg-2">
    {%- for room in data -%}
        <div class="col">
            <div class="card mb-3" id="room-{{ room.id }}">
                <div class="card-header">
                    <span class="float-end text-muted fw-light timestamp" style="font-size: 0.85em;" id="room-{{ room.id }}-created">{{ room.created }}</span>
                    <a href="{{ url_for('environments.room_dashboard', pk=room.id) }}" id="room-{{ room.id }}-name" class="text-decoration-none">{{ room.name }}</a>
                    <span class="dropdown ms-1">
                        <button type="button" data-bs-toggle=dropdown class="btn dropdown-toggle py-0 px-1 m-0">
                            <i class="bi bi-three-dots-vertical"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:" class="dropdown-item text-decoration-none" onclick="roomNameModal({{ room.id }})">Rename</a></li>
                            <li><a href="javascript:" class="dropdown-item text-decoration-none" onclick="roomNotesModal({{ room.id }})">Room Notes</a></li>
                            <li><a href="javascript:" class="dropdown-item text-decoration-none" onclick="deleteRoom({{ room.id }})">Delete</a></li>
                        </ul>
                    </span>
                </div>
                <div class="card-body row">
                {%- for key in ['temperature', 'humidity', 'vpd'] -%}
                    {%- if key in room.measurements.keys() -%}
                    <div class="col text-center mb-1">
                        <div class="fs-3">
                            <a href="javascript:" id="room-{{ room.id }}-{{ key }}" onclick="buildModalChart('{{ url_for('graphs.room',pk=room.id, measurement=key, hours=12) }}')" class="text-decoration-none">
                            {%- if key in ['temperature','vpd'] -%}
                                {{ '%0.1f' | format(room.measurements[key]) }}{%- if key in suffixes.keys() -%}{{ suffixes[key] }}{%- endif -%}
                            {% else %}
                                {{ room.measurements[key] | int }}{%- if key in suffixes.keys() -%}{{ suffixes[key] }}{%- endif -%}
                            {%- endif -%}
                            </a>
                        </div>
                        <div class="text-uppercase" style="font-size: 0.6em;">
                            {{ key }}
                        </div>
                    </div>
                    {%- endif -%}
                {%- endfor -%}
                </div>
            </div>
        </div>
    {%- endfor -%}
    </div>
{%- endif -%}

{% if features %}
    {%- if features.attributes.room_limit > data | length -%}
    <div class="mt-3">
        <a href="javascript:" onclick="roomNameModal()" class="btn btn-outline-primary">+</a>
    </div>
    {%- endif -%}
{% endif %}

    <script>
        if (window.addEventListener) {
            window.addEventListener('load', localizeTimestamps, false);
        }

        const deleteRoom = function(pk) {
            Room.load(pk);
            if (confirm("Are you sure you want to delete this room and data?")) {
                Room.delete(Number(pk));
                setTimeout(function() { window.location.reload(); }, 1500);
            }
        }

        window.setInterval(function() {
            Environment.loadList();
        }, 10000);
        window.setInterval(function() {
            updateEnvironments();
        }, 2000);
    </script>
{% endblock %}
