<div>
    <table class="overviewSection">
        <tr ng-hide="hasFabric">
            <td></td>
            <td class="less-big">
                <div class="btn-group">
                  <button class="btn" 
                          ng-click="activate()"
                          hawtio-show
                          object-name="{{scrMBean}}"
                          method-name="activateComponent">
                    <i class="icon-play-circle"></i> Activate
                  </button>
                  <button class="btn" 
                          ng-click="deactivate()"
                          hawtio-show
                          object-name="{{scrMBean}}"
                          method-name="deactiveateComponent">
                    <i class="icon-off"></i> Deactivate
                  </button>
                </div>
            </td>
        </tr>
        <tr>
            <td class="pull-right"><strong>Id:</strong></td>
            <td class="less-big">{{row.Id}}
            </td>
        </tr>
        <tr>
            <td class="pull-right"><strong>Name:</strong></td>
            <td class="less-big">{{row.Name}}
            </td>
        </tr>
        <tr>
            <td class="pull-right"><strong>State:</strong></td>
            <td class="less-big">{{row.State}}
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <div class="accordion" id="accordionProperties">
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionProperties"
                               href="#collapseProperties">
                                Properties
                            </a>
                        </div>
                        <div id="collapseProperties" class="accordion-body collapse in">
                            <table class="accordion-inner">
                                <tr ng-repeat="(key, value) in row.Properties">
                                    <td valign="top">{{key}}</td>
                                    <td>{{value.Value}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <div class="accordion" id="accordionReferences">
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionReferences"
                               href="#collapseReferences">
                                References
                            </a>
                        </div>
                        <div id="collapseReferences" class="accordion-body collapse in">
                            <table class="accordion-inner">
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Availability</th>
                                    <th>Cardinality</th>
                                    <th>Policy</th>
                                    <th>Bound Services</th>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="(key, value) in row.References">
                                        <td valign="left" class="less-big">{{value.Name}}</td>
                                        <td valign="left" class="less-big">{{value.Availability}}</td>
                                        <td valign="left" class="less-big">{{value.Cardinality}}</td>
                                        <td valign="left" class="less-big">{{value.Policy}}</td>
                                        <td>
                                            <ul>
                                                <li ng-repeat="id in value['Bound Services']">
                                                    <i class="icon-cog less-big text-info" id="bound.service.{{id}}">{{id}}</i>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>
