{% extends "bmsapp/base.html" %}

{% block pagetitle %}Unassigned Sensors{% endblock %}

{% block title %}Sensors not Assigned to a Building{% endblock %}

{% block content %}

<script>
    $(function () {
        $(".bmon-sensor-id")
            .attr("data-toggle","tooltip")
            .attr("data-original-title", "Click to copy Sensor ID to Clipboard")
            .css("cursor","pointer")
            .tooltip()
            .click(function(){
                var target = this;
                navigator.clipboard.writeText(target.innerText).then(function() {
                    $(target)
                        .attr("data-original-title", "Copied Sensor ID to Clipboard!")
                        .tooltip('show')
                });
            })
            .on('hidden.bs.tooltip', function () {
                $(this).attr("data-original-title", "Click to copy Sensor ID to Clipboard")
            })
            
    });
</script>

<p>This is a list of sensors that are either:</p>

<ul>
    <li>Not entered into the Admin Sensor list, or</li>
    <li>They are entered in the list of Sensors but they are not assigned to a building.</li>
</ul>

<table class="table table-sm table-striped table-responsive mt-1">
    <thead><tr>
        <th class="text-center">Sensor ID</th>
        <th class="text-center">Last Reading</th>
        <th class="text-center">When</th>
        <th class="text-center">Sensor Name, if available</th>
    </tr></thead>
    <tbody style="background-color: white">
    {% for sensor in sensor_list %}
        <tr>
            <td class="bmon-sensor-id">{{ sensor.id }}</td>
            <td class="text-right px-4">{{ sensor.cur_value }}</td>
            <td>{{ sensor.minutes_ago }} minutes ago</td>
            <td>{{ sensor.title }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>

{% endblock %}