{
    "template": "<style>\n.icon-tile.colorize {\n        filter: invert(75%) sepia(10%) hue-rotate(170deg);\n-webkit-filter: invert(75%) sepia(10%) hue-rotate(170deg);\n}\n</style>\n<div style=\"padding: 20px; height: 100%;\">\n  <div ng-if=\"(config.TITLE!='')\">\n      <div class=\"text-center\" ng-if=\"config.item_showsummary\">\n        <div ng-if=\"(config.TITLE=='Switch')\">\n          <h4>{{config.item_header}} : {{(itemsInGroup(config.item_groupid) | filter:{state:'ON'}).length}} von {{(itemsInGroup(config.item_groupid)).length}}</h4>\n        </div>\n        <div ng-if=\"(config.TITLE=='Contact')\">\n          <h4>{{config.item_header}} : {{(itemsInGroup(config.item_groupid) | filter:{state:'OPEN'}).length}} von {{(itemsInGroup(config.item_groupid)).length}}</h4>\n        </div>\n      </div>\n      <div class=\"text-center\" ng-if=\"!config.item_showsummary\"><h2>{{config.TITLE}}</h2></div>\n  </div>\n  <div style=\"display: flex; justify-content: center; align-items: center;\">\n  \t<div style=\"display: inline-block;\">\n      <div ng-repeat=\"item in itemsInGroup(config.item_groupid)\">\n        <div ng-if=\"(itemState(item.name)=='OPEN') || (itemState(item.name)=='ON')\" style=\"color: #ffe203; font-size: 16pt;\">\n          <div style=\"margin-left: 10px; float: left; height: 40px; line-height: 37px; width: 55px;\">\n            <widget-icon style=\"margin: auto;\" iconset=\"config.ICON_iconset\" icon=\"config.ICON\" size=\"config.ICONSIZE\" state=\"itemState(item.name)\"/>\n          </div>\n          <div style=\"margin-right: 10px; overflow:hidden; height: 40px; line-height: 42px; width: auto;\">\n            <div>\n              {{item.label.substr(config.item_skipncharsindescription,99)}}\n            </div>\n          </div>\n        </div>\n        <!--<div ng-if=\"(itemState(item.name)=='CLOSED') || (itemState(item.name)=='OFF')\" style=\"background-color: transparent; font-size: 16pt;\">\n          <div style=\"margin-left: 10px; float: left; height: 40px; line-height: 37px; width: 55px;\">\n            <widget-icon style=\"margin: auto;\" iconset=\"config.ICON_iconset\" icon=\"config.ICON\" size=\"config.ICONSIZE\" state=\"itemState(item.name)\"/>\n          </div>\n          <div style=\"margin-right: 10px; overflow:hidden; height: 40px; line-height: 42px; width: auto;\">\n            <div>\n              {{item.label.substr(config.item_skipncharsindescription,99)}}\n            </div>\n          </div>\n        </div>\n        <div ng-if=\"(itemState(item.name)=='NULL')\" style=\"background-color: red; font-size: 16pt;\">\n          <div style=\"margin-left: 10px; float: left; height: 40px; line-height: 37px; width: 55px;\">\n            <widget-icon style=\"margin: auto;\" iconset=\"config.ICON_iconset\" icon=\"config.ICON\" size=\"config.ICONSIZE\" state=\"itemState(item.name)\"/>\n          </div>\n          <div style=\"margin-right: 10px; overflow:hidden; height: 40px; line-height: 42px; width: auto;\">\n            <div>\n              {{item.label.substr(config.item_skipncharsindescription,99)}}\n            </div>\n          </div>\n        </div>-->\n      </div>\n    </div>\n\t</div>\n</div>\n",
    "name": "Contacts and Switches",
    "author": "",
    "description": "",
    "settings": [
        {
            "type": "icon",
            "id": "ICON",
            "label": "Icon",
            "default": "16pt"
        },
        {
            "type": "string",
            "id": "ICONSIZE",
            "label": "Icon size",
            "default": "50"
        },
        {
            "type": "string",
            "id": "TITLE",
            "label": "Title",
            "default": "",
            "description": ""
        },
        {
            "type": "item",
            "id": "item_groupid",
            "label": "Group",
            "default": "",
            "description": ""
        }
    ],
    "readme_url": "https://community.openhab.org/t/35913"
}