<!-- template for plug details -->
<script type="text/us-templ" id="plug-overview-template">
    
    <div class="main-head">
        <h1 data-translateid="text_connectedPlugs">Connected plugs</h1>

        <div data-btn-ev="BTN_ADD_SWITCH_PRESSED" data-modal="switchWizardModal" class="mq-phone">
            <svg width="18" height="18"><use transform="scale(0.7)" xlink:href="#add-icon-sm"/></svg>
        </div>
    </div>

    <div class="main-content">
        <div class="dev-table-hdr">
            <b><!-- head for icon --></b>
            <b data-sort="name">
                <span data-translateid="th_name">Name</span>
                <img src="img/generals/sort-item.svg" data-svgInject="switchWizzardSvg" class="sort-icon svg-icon" data-wiz-page="none"/>
            </b>
            <b data-sort="vendor">
                <span data-translateid="th_vendor">Vendor</span>
                <img src="img/generals/sort-item.svg" data-svgInject="switchWizzardSvg" class="sort-icon svg-icon" data-wiz-page="none"/>
            </b>
            <b data-sort="product">
                <span data-translateid="th_product">Product</span>
                <img src="img/generals/sort-item.svg" data-svgInject="switchWizzardSvg" class="sort-icon svg-icon" data-wiz-page="none"/>
            </b>
        </div>

        <div id="devicesSwitchContainer" class="dev-scroll-cont">
            <table class="table table-hover dev-table">
                <tbody id="switchTable"></tbody>
            </table>
        </div>
    </div>

    <div class="bottom-bar mq-desktop">
        <button data-btn-ev="BTN_ADD_SWITCH_PRESSED" data-modal="switchWizardModal" class="btn btn-default" data-translateid="btn_newPlug">Connect new plug</button>
    </div>
</script>

<!-- template for rending one row -->
<script type="text/us-templ" id="plug-item-template">
    <td style="display: flex;">
        <img src="#" data-svgInject="switchWizzardSvg" class="item-icon svg-icon" data-wiz-page="none"/>
    </td>
    <td><%- name %></td>
    <td><%- manufacturername %></td>
    <td><%- product %></td>
    <!-- <td class="td_update">update verfügbar</td> -->
</script>