<!-- template for sensor details -->
<script type="text/us-templ" id="sensor-overview-template">
    
    <div class="main-head">
        <h1>
            <span data-translateid="text_connectedSensors">Connected switches</span>
            <div data-btn-ev="BTN_ADD_SENSOR_PRESSED" data-modal="switchWizardModal" class="mq-phone">
                <svg width="18" height="18"><use transform="scale(0.7)" xlink:href="#add-icon-sm"/></svg>
            </div>
        </h1>

    </div>

    <div class="main-content">
        <div class="dev-table-hdr">
            <b><!-- head for icon --></b>
            <b>
                <span data-translateid="th_name">Name</span>
            </b>
            <b>
                <span data-translateid="th_vendor">Vendor</span>
            </b>
            <b>
                <span data-translateid="th_product">Product</span>
            </b>
            <b>
                <span data-translateid="th_values">Values</span>
            </b>
        </div>

        <div id="devicesSensorContainer" class="dev-scroll-cont">
            <table class="table table-hover dev-table">
                <tbody id="sensorTable"></tbody>
            </table>
        </div>
    </div>

    <div class="bottom-bar mq-desktop">
        <button data-btn-ev="BTN_ADD_SENSOR_PRESSED" data-modal="sensorWizardModal" class="btn btn-default mq-desktop" data-translateid="btn_newSensor">Connect new sensor</button>
    </div>
</script>

<!-- template for rending one row -->
<script type="text/us-templ" id="sensor-item-template">
    <td style="display: flex;">
        <img src="#" data-svgInject="sensorWizzardSvg" class="item-icon svg-icon" data-wiz-page="none"/>
    </td>
    <td class="name-col"><span class="name-val"><%- name %></span><span class="item-attr"></span></td>
    <td><%- manufacturername %></td>
    <td><%- product %></td>
    <td class="item-attr"></td>
</script>