<style>
.chicklet-container {
 border: 1px solid #F1F1F1;
 color:black;
 font-weight: bold;
 background-color: white;
 padding: 14px 35px 14px 14px;
 margin-bottom: 18px;
 border-radius: 4px;
}
.base-chicklet {
 border: 3px solid;
 color: #7C7C7C;
 background-color: white;
 display:inline-block;
 padding:0px;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 border-radius: 4px;
}
.chicklet-success {
 border-color: #36A32C;
}
.chicklet-notfound {
 border-color: #e5e5e5;
}
.chicklet-unknown {
 border-color: #626262;
}
.chicklet-error {
 border-color: #9E1213;
}
.chicklet-warning {
 border-color: #D6C037;
}
.status-icon-holder {
 background-color: #EDEEF0;
 float: left;
 padding-top:10px;
 padding-left: 6px;
 padding-right: 2px;
 padding-bottom: 10px;
 border-right:2px solid;
 border-color: #D8D7DD;
}
.service-text {
 float: right;
 margin: 10px;
 min-width: 60px;
}
</style>
<div style="border: 1px solid #dddddd;">
    <div ng-controller = "monitoringController" ng-init="fetchStatus()">
        <div class="chicklet-container" ng-repeat="group in _serviceModel">
            <div>
                {$ group.name $}
            </div>
            <div ng-repeat="service in group.services" style="display:inline-block; margin-bottom:4px; margin-right:4px;">
                <a href="/monitoring/alarms/alarm/{$ service.name $}">
                 <div class="base-chicklet {$ service.class $}">
                    <div>
                        <div class="status-icon-holder" >
                            <img ng-src="{$ service.icon $}"/>
                        </div>
                        <div class="service-text">
                        {$ service.display $}
                        </div>
                    </div>
                 </div>
                 </a>
            </div>
         </div>
    </div>
</div>

