new widgets: data/data-control, more classes, optimizations
new widgets: data/data-control, more classes, optimizations

--- a/assets/css/iotcc.css
+++ b/assets/css/iotcc.css
@@ -687,4 +687,137 @@
   border-color: #afafaf;
 }
 
-
+.button--material {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: none;
+  line-height: normal;
+  font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  font-size: 17px;
+  cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  height: auto;
+  text-decoration: none;
+  padding: 4px 10px;
+  font-size: 17px;
+  line-height: 32px;
+  letter-spacing: 0;
+  color: #fff;
+  vertical-align: middle;
+  background-color: rgba(24,103,194,0.81);
+  border: 0px solid currentColor;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  transition: none;
+  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  min-height: 36px;
+  line-height: 36px;
+  padding: 0px 16px;
+  -webkit-transition: -webkit-box-shadow 0.2s ease;
+  -moz-transition: box-shadow 0.2s ease;
+  -o-transition: box-shadow 0.2s ease;
+  transition: box-shadow 0.2s ease;
+  text-align: center;
+  font-size: 14px;
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  text-transform: uppercase;
+  background-color: #009688;
+  color: #ffffff;
+  font-family: 'Roboto', 'Noto', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 500;
+}
+.button--material:active {
+  -webkit-box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.4);
+  box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.4);
+  background-color: #009688;
+  opacity: 1;
+}
+.button--material:focus {
+  outline: 0;
+}
+.button--material:disabled,
+.button--material[disabled] {
+  opacity: 0.5;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+/*
+  IoT CC Custom
+ */
+
+.pagination {
+  margin-bottom: 10px;
+}
+
+.skin-blue .pagination {
+  background-color: #3c8dbc;
+}
+
+.skin-black .pagination {
+  background-color: #222d32;
+}
+
+.skin-black-light .pagination {
+  background-color: #222d32;
+}
+.skin-purple .pagination {
+  background-color: #605ca8;
+}
+
+.skin-purple-light .pagination {
+  background-color: #605ca8;
+}
+
+.skin-green .pagination {
+  background-color: #00a65a;
+}
+
+.skin-green-light .pagination {
+  background-color: #00a65a;
+}
+
+.skin-red .pagination {
+  background-color: #dd4b39;
+}
+
+.skin-red-light .pagination {
+  background-color: #dd4b39;
+}
+
+.skin-yellow .pagination {
+  background-color: #f39c12;
+}
+
+.skin-yellow-light .pagination {
+  background-color: #f39c12;
+}
+

--- a/assets/js/iotcc.js
+++ b/assets/js/iotcc.js
@@ -97,6 +97,7 @@
                         html += '</label>';
                         json.content = html;
                         json.widgetId = widgetId;
+                        json.selector = 'input';
                         json.callback = function() {
                             if ($(this).prop('checked') == true) {
                                 $(this).data('status', 1);
@@ -107,6 +108,8 @@
                             }
                         };
                         iotCC.addWidget(json);
+                    } else {
+                        iotCC.animate($('input[name="' + widgetId + '"]').closest(".widgetcontainer"));
                     }
                 } else if (json.widget == 'radios') {
                     html = '';
@@ -116,10 +119,32 @@
                     if ($('input[name="' + widgetId + '"]').exists() == false) {
                         json.content = html;
                         json.widgetId = widgetId;
+                        json.selector = 'input';
                         json.callback = function() {
                             iotCC.mqttClient.publish(json.topic + '/data', '{"status":"' + $(this).data('status') + '"}', {qos: 1, retained: false});
                         };
                         iotCC.addWidget(json);
+                    } else {
+                        iotCC.animate($('input[name="' + widgetId + '"]').closest(".widgetcontainer"));
+                    }
+                } else if (json.widget == 'data' || json.widget == 'data-control') {
+                    html = '';
+                    if (json.widget == 'data-control') html += '<button name="' + widgetId + '" data-widget="' + json.widget + '" data-action="-" class="button button--material">-</button> ';
+                    html += '<span name="' + widgetId + '" data-widget="' + json.widget + '" data-value="' + json.value + '" class="lead">' + json.value + '</span> ' + (json.valuedescription?'<span class="lead">' + json.valuedescription + '</lead>':'') + '';
+                    if (json.widget == 'data-control') html += ' <button name="' + widgetId + '" data-widget="' + json.widget + '" data-action="+" class="button button--material">+</button>';
+                    if ($('span[name="' + widgetId + '"]').exists() == false) {
+                        json.content = html;
+                        json.widgetId = widgetId;
+                        json.selector = 'button';
+                        json.callback = function() {
+                            var action = $(this).data('action');
+                            var value = $('span[name="' + $(this).attr('name') + '"]').data('value');
+                            value = action == '+' ? parseInt(value) + 1 : parseInt(value) - 1;
+                            iotCC.mqttClient.publish(json.topic + '/data', '{"value":"' + value + '"}', {qos: 1, retained: false});
+                        };
+                        iotCC.addWidget(json);
+                    } else {
+                        iotCC.animate($('span[name="' + widgetId + '"]').closest(".widgetcontainer"));
                     }
                 }
             } else if (topicPath[4] == 'data') {
@@ -136,6 +161,10 @@
                     if ($('input[name="' + widgetId + '"]').filter('[data-status="' + json.status + '"]').exists() == true) {
                         $('input[name="' + widgetId + '"]').filter('[data-status="' + json.status + '"]').prop('checked', true);
                     }
+                } else if (widget == 'data' || widget == 'data-control') {
+                    if ($('span[name="' + widgetId + '"]').exists() == true) {
+                        $('span[name="' + widgetId + '"]').html(json.value).data('value', json.value);
+                    }
                 }
             } else if (topicPath[3] == 'device') {
                 $(json.pages).each(function(k, page) {
@@ -177,17 +206,23 @@
         html = html.replace(/{(\w*)}/g, '');
         var section = $('section.content').filter('[data-section="dashboard"]');
         // TODO: add after sort ?
-        /*var widgets = $(section).find('div[data-page="' + json.pageId + '"]').find('div.widgetcontainer').length;
+        var widgets = $(section).find('div[data-page="' + json.pageId + '"]').find('div.widgetcontainer').length;
         if (widgets > 0 && widgets%2 == 0) {
-            $(section).find('div[data-page="' + json.pageId + '"]').append('<div class="clearfix visible-sm-block"></div>');
-        }*/
+            //$(section).find('div[data-page="' + json.pageId + '"]').append('<div class="clearfix visible-sm-block" data-order="' + json.order + '"></div>');
+        }
         $(section).find('div[data-page="' + json.pageId + '"]').append(html);
         if (json.callback != undefined) {
-            $('input[name="' + json.widgetId + '"]').click(json.callback);
+            $(json.selector + '[name="' + json.widgetId + '"]').click(json.callback);
         }
         $(section).find('div[data-page="' + json.pageId + '"]').find('div.widgetcontainer').sort(function(a,b) {
              return $(a).data('order') > $(b).data('order');
         }).appendTo('div[data-page="' + json.pageId + '"]');
+        $(section).find('div[data-page="' + json.pageId + '"]').find('div.visible-sm-block').remove();
+        $(section).find('div[data-page="' + json.pageId + '"]').find('div.widgetcontainer').each(function(k,v){
+            if ((k+1)%2 == 0) {
+                $(v).after('<div class="clearfix visible-sm-block"></div>');
+            }
+        });
     },
     addPage: function(page) {
         $('label').filter('[data-pagination="0"]').parent().removeClass('hide');
@@ -271,6 +306,9 @@
         } else if (on == 'message') {
             this.events.message.push(callback);
         }
+    },
+    animate: function(element){
+        element.fadeTo("fast", 0.33 ).fadeTo("fast", 1);
     }
 }
 

--- a/assets/js/simulateDevices.js
+++ b/assets/js/simulateDevices.js
@@ -11,31 +11,37 @@
     }
     if (topicPath[2] == 'device') {
         iotCC.mqttClient.publish('/iotcc/heater1/device', '{"name":"House heating 1","desc":"", "pages" : [{"pageId" : 10, "pageName" : "House heating", "icon": "ion-ios-home"}]}', {qos: 1, retained: false});
-        iotCC.mqttClient.publish('/iotcc/heater1/heater/config', '{"id":"100", "pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Hollway Heater", "topic":"/iotcc/heater1/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}], "template": "template-3", "icon": "ion-ios-home", "bgcolor": "bg-blue", "order": 40}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/heater1/heater/config', '{"id":"100", "pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Hollway Heater", "topic":"/iotcc/heater1/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}], "template": "template-3", "icon": "ion-ios-home", "class": "bg-blue", "order": 40}', {qos: 1, retained: false});
 
         iotCC.mqttClient.publish('/iotcc/heater2/device', '{"name":"House heating 2","desc":"", "pages" : [{"pageId" : 10, "pageName" : "House heating", "icon": "ion-ios-home"}]}', {qos: 1, retained: false});
-        iotCC.mqttClient.publish('/iotcc/heater2/heater/config', '{"id":"101", "pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Kitchen Heater", "topic":"/iotcc/heater2/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}], "template": "template-3", "icon": "ion-ios-home", "bgcolor": "bg-blue", "order": 30}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/heater2/heater/config', '{"id":"101", "pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Kitchen Heater", "topic":"/iotcc/heater2/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}], "template": "template-3", "icon": "ion-ios-home", "class": "bg-blue", "order": 30}', {qos: 1, retained: false});
 
         iotCC.mqttClient.publish('/iotcc/heater3/device', '{"name":"House heating 3","desc":"", "pages" : [{"pageId" : 10, "pageName" : "House heating", "icon": "ion-ios-home"}]}', {qos: 1, retained: false});
-        iotCC.mqttClient.publish('/iotcc/heater3/heater/config', '{"id":"102", "pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Bedroom Heater", "topic":"/iotcc/heater3/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}], "template": "template-3", "icon": "ion-ios-home", "bgcolor": "bg-blue", "order": 10}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/heater3/heater/config', '{"id":"102", "pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Bedroom Heater", "topic":"/iotcc/heater3/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}], "template": "template-3", "icon": "ion-ios-home", "class": "bg-blue", "order": 10}', {qos: 1, retained: false});
 
         iotCC.mqttClient.publish('/iotcc/heater4/device', '{"name":"House heating 4","desc":"", "pages" : [{"pageId" : 10, "pageName" : "House heating", "icon": "ion-ios-home"}]}', {qos: 1, retained: false});
-        iotCC.mqttClient.publish('/iotcc/heater4/heater/config', '{"id":"103", "pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Living Heater", "topic":"/iotcc/heater4/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}], "template": "template-3", "icon": "ion-ios-home", "bgcolor": "bg-blue", "order": 20}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/heater4/heater/config', '{"id":"103", "pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Living Heater", "topic":"/iotcc/heater4/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}], "template": "template-3", "icon": "ion-ios-home", "class": "bg-blue", "order": 20}', {qos: 1, retained: false});
 
         iotCC.mqttClient.publish('/iotcc/dogsheating/device', '{"name":"Dogs heating","desc":"", "pages" : [{"pageId" : 20, "pageName" : "Dogs heating", "icon": "ion-ios-paw"}]}', {qos: 1, retained: false});
-        iotCC.mqttClient.publish('/iotcc/dogsheating/toggle1/config', '{"id":"200", "pageName": "Dogs heating", "pageId": 20, "widget":"toggle", "title":"Mara", "topic":"/iotcc/dogsheating/toggle1", "checked":true, "template": "template-1", "icon": "ion-ios-paw", "bgcolor": "bg-green", "order" : 10}', {qos: 1, retained: false});
-        iotCC.mqttClient.publish('/iotcc/dogsheating/toggle2/config', '{"id":"201", "pageName": "Dogs Heating", "pageId": 20, "widget":"toggle", "title":"Linda", "topic":"/iotcc/dogsheating/toggle2", "template": "template-1", "icon": "ion-ios-paw", "bgcolor": "bg-green", "order" : 20}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/dogsheating/toggle1/config', '{"id":"200", "pageName": "Dogs heating", "pageId": 20, "widget":"toggle", "title":"Mara", "topic":"/iotcc/dogsheating/toggle1", "checked":true, "template": "template-1", "icon": "ion-ios-paw", "class": "bg-green", "order" : 10}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/dogsheating/toggle2/config', '{"id":"201", "pageName": "Dogs Heating", "pageId": 20, "widget":"toggle", "title":"Linda", "topic":"/iotcc/dogsheating/toggle2", "template": "template-1", "icon": "ion-ios-paw", "class": "bg-green", "order" : 20}', {qos: 1, retained: false});
 
         iotCC.mqttClient.publish('/iotcc/outdoorlights1/device', '{"name":"Outdoor lighting 1","desc":"", "pages" : [{"pageId" : 30, "pageName" : "Outdoor Lights", "icon": "ion-ios-home"}]}', {qos: 1, retained: false});
-        iotCC.mqttClient.publish('/iotcc/outdoorlights1/garage/config', '{"id":"300", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"Garage", "topic":"/iotcc/outdoorlights/garage", "checked":true, "template": "template-1", "icon": "ion-model-s", "bgcolor": "bg-orange", "order": 40}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/outdoorlights1/garage/config', '{"id":"300", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"Garage", "topic":"/iotcc/outdoorlights1/garage", "checked":true, "template": "template-1", "icon": "ion-model-s", "class": "bg-orange", "order": 40}', {qos: 1, retained: false});
 
         iotCC.mqttClient.publish('/iotcc/outdoorlights2/device', '{"name":"Outdoor lighting 2","desc":"", "pages" : [{"pageId" : 30, "pageName" : "Outdoor Lights", "icon": "ion-ios-home"}]}', {qos: 1, retained: false});
-        iotCC.mqttClient.publish('/iotcc/outdoorlights2/house1/config', '{"id":"301", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"House front", "topic":"/iotcc/outdoorlights/house1", "template": "template-1", "icon": "ion-ios-home", "bgcolor": "bg-orange", "order": 10}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/outdoorlights2/house1/config', '{"id":"301", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"House front", "topic":"/iotcc/outdoorlights2/house1", "template": "template-1", "icon": "ion-ios-home", "class": "bg-orange", "order": 10}', {qos: 1, retained: false});
 
         iotCC.mqttClient.publish('/iotcc/outdoorlights3/device', '{"name":"Outdoor lighting 3","desc":"", "pages" : [{"pageId" : 30, "pageName" : "Outdoor Lights", "icon": "ion-ios-home"}]}', {qos: 1, retained: false});
-        iotCC.mqttClient.publish('/iotcc/outdoorlights3/house2/config', '{"id":"302", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"House back", "topic":"/iotcc/outdoorlights/house2", "template": "template-1", "icon": "ion-ios-home", "bgcolor": "bg-orange", "order": 20}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/outdoorlights3/house2/config', '{"id":"302", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"House back", "topic":"/iotcc/outdoorlights3/house2", "template": "template-1", "icon": "ion-ios-home", "class": "bg-orange", "order": 20}', {qos: 1, retained: false});
 
         iotCC.mqttClient.publish('/iotcc/outdoorlights4/device', '{"name":"Outdoor lighting 4","desc":"", "pages" : [{"pageId" : 30, "pageName" : "Outdoor Lights", "icon": "ion-ios-home"}]}', {qos: 1, retained: false});
-        iotCC.mqttClient.publish('/iotcc/outdoorlights4/house3/config', '{"id":"302", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"House sides", "topic":"/iotcc/outdoorlights/house3", "template": "template-1", "icon": "ion-ios-home", "bgcolor": "bg-orange", "order": 30}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/outdoorlights4/house3/config', '{"id":"303", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"House sides", "topic":"/iotcc/outdoorlights4/house3", "template": "template-1", "icon": "ion-ios-home", "class": "bg-orange", "order": 30}', {qos: 1, retained: false});
+
+        iotCC.mqttClient.publish('/iotcc/greenhouse/device', '{"name":"Greenhouse","desc":"", "pages" : [{"pageId" : 40, "pageName" : "Greenhouse", "icon": "ion-ios-home"}]}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/greenhouse/tempsensor1/config', '{"id":"304", "pageName": "Greenhouse", "pageId": 40, "widget":"data", "title":"Temp sensor 1", "topic":"/iotcc/greenhouse/tempsensor1", "value": "22", "valuedescription": "degrees C", "template": "template-1", "icon": "ion-ios-home", "class": "bg-green", "order": 30}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/greenhouse/tempsensor1/data', '{"value":"' + (Math.floor(Math.random() * (10)) + 20) + '"}');
+        iotCC.mqttClient.publish('/iotcc/greenhouse/heater/config', '{"id":"305", "pageName": "Greenhouse", "pageId": 40, "widget":"data-control", "title":"Heater", "topic":"/iotcc/greenhouse/heater", "value": "22", "valuedescription": "degrees C", "template": "template-1", "icon": "ion-ios-home", "class": "bg-green", "order": 30}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/greenhouse/heater/data', '{"value":"' + (Math.floor(Math.random() * (10)) + 20) + '"}');
     }
 });

--- a/assets/template/template-1.html
+++ b/assets/template/template-1.html
@@ -1,12 +1,12 @@
 <div class="col-md-3 col-sm-6 col-xs-12 widgetcontainer" data-order="{order}">
     <div class="info-box widget">
-        <span class="info-box-icon {bgcolor}"><i class="ion {icon}"></i></span>
+        <span class="info-box-icon {class}"><i class="ion {icon}"></i></span>
         <div class="info-box-content">
-            <span class="info-box-text"><b>{title}</b></span>
-            <span class="">
+            <span class="info-box-text {class1}"><b>{title}</b></span>
+            <span class="{class2}">
                 {content}
             </span>
-            <span class="info-box-text">{description}</span>
+            <span class="info-box-text {class3}">{description}</span>
         </div>
     </div>
 </div>

--- a/assets/template/template-2.html
+++ b/assets/template/template-2.html
@@ -1,8 +1,8 @@
 <div class="col-lg-3 col-xs-6 widgetcontainer" data-order="{order}">
-    <div class="small-box {bgcolor}">
-        <div class="inner">
+    <div class="small-box {class}">
+        <div class="inner {class1}">
             <h3>{title}</h3>
-            <p>{content}</p>
+            <p class="{class3}">{content}</p>
         </div>
         <div class="icon">
             <i class="ion {icon}"></i>

--- a/assets/template/template-3.html
+++ b/assets/template/template-3.html
@@ -1,14 +1,14 @@
 <div class="col-md-3 col-sm-6 col-xs-12 widgetcontainer" data-order="{order}">
     <div class="info-box box">
-        <div class="box-header with-border {bgcolor}">
-            <span class="info-box-text"><b>{title}</b></span>
+        <div class="box-header with-border {class}">
+            <span class="info-box-text {class1}"><b>{title}</b></span>
             <div class="box-tools pull-right">
                 <div class="icon">
                     <i class="ion {icon}"></i>
                 </div>
             </div>
         </div>
-        <div class="box-body">
+        <div class="box-body {class2}">
             {content}
         </div>
     </div>

comments