<!-- template for sensor details -->
<script type="text/us-templ" id="sensor-details-template">
    <div class="main-head">
        <h1>
            <img src="#" data-svgInject="switchWizzardSvg" data-wiz-page="none" class="svg-icon mq-desktop"/>
            <span><%- name %></span>
            <div class="item-edit pencil mq-desktop" data-toggle="modal" data-target="#renameSensorModal" data-swid="<%- id %>">
                <svg width="24" height="24"><use transform="scale(0.48)" xlink:href="#icon-rename" /></svg>
            </div>
        </h1>

        <a id="deleteSensor_btn" type="button" class="hdr-delete-btn mq-desktop" data-toggle="modal" data-target="#deleteSensorModal">
            <svg width="18" height="18"><use transform="scale(0.7)" xlink:href="#delete-icon-sm" /></svg>
            <span data-translateid="deleteSensor">Delete sensor</span>
        </a>

        <div class="mq-phone context-menu-box">
            <div class="context-menu-outer"></div>
            <svg class="context-menu-icon" width="24" height="24"><use transform="scale(0.48)" xlink:href="#dot-menu" /></svg>
            <ul class="context-menu">
                <li data-toggle="modal" data-target="#renameSensorModal" data-snid="<%- id %>">
                    <svg width="18" height="18"><use transform="scale(0.36)" xlink:href="#icon-rename" /></svg>
                    <span>Umbenennen</span>
                </li>
                <li data-toggle="modal" data-target="#deleteSensorModal">
                    <!-- templ-include: img/24px/delete.svg -->
                    <span>Löschen</span>
                </li>
            </ul>
        </div>
    </div>

    <div class="main-content">
        <img id="detailImg" src="#" data-svgInject="sensorWizzardSvg" data-wiz-page="none"/>

        <div id="detailInfos">
            <div class="detail-info-generals">
                <span data-translateid="th_vendor">Vendor</span> 
                <span><%- manufacturername %></span>
            </div>

            <div class="detail-info-generals">
                <span data-translateid="th_product">Product</span> 
                <span class="product data-val">{product}</span>
            </div>

            <div class="not-reachable">
                <span data-translateid="th_status">State</span> 
                <span data-translateid="text_sensor_not_reachable"></span>
            </div>

            <div class="version">
                <span data-translateid="th_version">Version</span>
                <span class="data-val">{swversion}</span>
            </div>

            <div class="battery">
                <span data-translateid="th_battery">Battery</span>
                <span class="data-val">{battery}</span>
            </div>

            <div class="lowbattery">
                <span data-translateid="th_battery">Battery</span>
                <span class="data-val">{lowbattery}</span>
            </div>

            <div class="temperature">
                <span data-translateid="th_temperature">Temperature</span>
                <span class="data-val">{temperature}</span>
            </div>

            <div class="humidity">
                <span data-translateid="th_humidity">Humidity</span>
                <span class="data-val">{humidity}</span>
            </div>

            <div class="water">
                <span data-translateid="th_water">Water</span>
                <span class="data-val">{water}</span>
            </div>

            <div class="lightlevel">
                <span data-translateid="th_lightlevel">Lightlevel</span>
                <span class="data-val">{lightlevel}</span>
            </div>

            <div class="pressure">
                <span data-translateid="th_airpressure">Air pressure</span>
                <span class="data-val">{pressure}</span>
            </div>

            <div class="open">
                <span data-translateid="th_state">State</span>
                <span class="data-val">{open}</span>
            </div>

            <div class="presence">
                <span data-translateid="th_movement">Movement</span>
                <span class="data-val">{presence}</span>
            </div>

            <div class="fire">
                <span data-translateid="th_fire">Fire</span>
                <span class="data-val">{fire}</span>
            </div>

            <div class="carbonmonoxide">
                <span data-translateid="th_co">Fire</span>
                <span class="data-val">{carbonmonoxide}</span>
            </div>

            <div class="alarm">
                <span data-translateid="th_alarm">Alarm</span>
                <span class="data-val">{alarm}</span>
            </div>

            <div class="vibration">
                <span data-translateid="th_vibration">Vibration</span>
                <span class="data-val">{vibration}</span>
            </div>

            <div class="airquality">
                <span data-translateid="th_airquality">Airquality</span>
                <span class="data-val">{airquality}</span>
            </div>

            <div class="lastupdated">
                <span data-translateid="th_lastupdated">Last seen</span>
                <span class="data-val">{lastupdated}</span>
            </div>
        </div>
    </div>
</script>