<!--
	ioBroker.vis fritzdect metro Widget-Set

	version: "0.0.2"

	based on iobroker.metro
	extended for fritzdect
	
	Copyright 2018-2021 foxthefox foxthefox@wysiwis.net
-->
<!-- here you can include so many css as you want -->
<link rel="stylesheet" href="widgets/fritzdect/css/style.css" />
<link rel="stylesheet" href="widgets/metro/css/iconFont.min.css" />
<link rel="stylesheet" href="widgets/metro/css/metro-bootstrap.css" />
<!-- here you can include so many js-files as you want -->
<script type="text/javascript" src="widgets/fritzdect/js/fritzdect.js"></script>
<script type="text/javascript" src="widgets/metro/js/metro.js"></script>


<script id="tplMetroDect200TileSwitchDialog" 
        type="text/ejs" 
        data-vis-prev='<div id="prev_tplMetroDect200TileSwitchDialog" style="position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev vis-widget-lock" style="width: 120px; height: 120px; padding: 3px;"> <div style="width: 100%; height: 100%" class="metro vis-widget-prev-body"> <div style="width: 100%; height: 100%;" class="tile hover bg-indigo"><div class="tile-content" style="text-align: center"><img width="80%" src="widgets/jqui-mfd/img/message_socket_on.png"></div> <div class="brand ribbed-steel"><span class="label fg-white">Dect200 Dialog</span></div> </div><div style="padding: 42px 10px 10px;"></div></div></div></div>'
        data-vis-attrs="oid/id,switch;oid-power/id,value.power;oid-energy/id,value.power.consumption;oid-temp/id,value.temperature;off[0];on[1];hover[true]/checkbox;transform[true]/checkbox;label[FritzDECT200];"
        data-vis-attrs0="bg_class[bg-indigo]/style,metro-,bg- ribbed-;" 
        data-vis-attrs1="brand_bg_class[none]/style,metro-,bg- ribbed-;"
        data-vis-attrs2="label_power;label_temp;label_energy;"
        data-vis-attrs3="group.dialog;dialog_flat/checkbox;dialog_shadow/checkbox;dialog_draggable[true]/checkbox;dialog_modal/checkbox"
        class="vis-tpl" 
        data-vis-set="fritzdect" 
        data-vis-type="ctrl,dialog" 
        data-vis-name="Tile Switch Dialog">
    <div id="<%= this.data.attr('wid') %>" class="vis-widget" style="width: 136px; height: 136px; padding: 3px;" <%= (el) -> vis.preloadImages(['widgets/jqui-mfd/img/message_socket_on.png','widgets/jqui-mfd/img/message_socket_off.png']); %>>
        <div style="width: 100%; height: 100%" class="metro vis-widget-body <%== this.data.attr('class') %>" >

            <div style="width: 100%; height: 100%;" id="metroTile_<%= this.data.attr('wid') %>" class="tile <%= this.data.attr('hover') ? 'hover ' : '' %><%= this.data.attr('bg_class') %>">
                <div class="tile-content" style="text-align: center">
                <%
                var str = vis.states.attr(this.data.oid + '.val');
                var val = parseFloat(str);
                if (str === true || str === 'true' || str === 1 || str === 'on') val = 1;
                if (isNaN(val)) val = 0;
                                
                if (val === 1) {
                %>
                <img width="80%" src="widgets/jqui-mfd/img/message_socket_on.png"/>
                <% } else { %>
                <img width="80%" src="widgets/jqui-mfd/img/message_socket_off.png"/>
                <% } %>
                </div>
                <div style="color:white; font-size:11px; margin-top: 92px; padding-left: 12px;">
		  <% if (this.data.attr('oid-power')) { %>
                    <span><%== this.data.attr('label_power')   ?  this.data.attr('label_power')  : _('Leistung') %> : <%=  + vis.binds.metro.format(vis.states.attr(this.data.attr('oid-power')   + '.val'), 'W') %> W</span>
                  <% } %>
		</div>
                <div class="brand <%= this.data.attr("brand_bg_class") %>">
                    <span class="label fg-white"><%= this.data.attr("label") %></span>
                </div>
            </div>
            <div
                <%= (el) -> vis.binds.fritzdect.tileDialogFritz(el, data.wid, data.oid, data['oid-power'], data['oid-energy'], data['oid-temp'], {title: data.label, flat: data.dialog_flat, shadow: data.dialog_shadow, overlay: data.dialog_modal, icon: data.dialog_icon_src, icon_class: data.dialog_icon_class, draggable: data.dialog_draggable, width: 300, height: 180, label_power: this.data.attr('label_power'), label_temp: this.data.attr('label_temp'), label_energy: this.data.attr('label_energy')}, {off: data.off, on: data.on}) %> style="padding: 42px 10px 10px;">
            </div>
            <div <%= (el) -> vis.binds.metro.tile(el, data.transform) %>></div>
        </div>
    </div>
</script>