<div class="container no-top-gutter">
    <div class="row">
        <div class="col-md-9 component">

            <div class="title process">
                <h2 translate="CLUSTER.TITLE.PROCESS-ENDPOINT"></h2>
            </div>
            <p class="message"><i class="glyphicon glyphicon-info-sign"></i>
                {{'CLUSTER.ENDPOINT-HELP' | translate}}
            </p>

            <div class="property-wrapper">
                <table>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-NAME"></td>
                        <td>{{activeServers['process'].name | empty}}</td>
                        <td class="property-name" translate="CLUSTER.ENDPOINT-DESCRIPTION"></td>
                        <td>{{activeServers['process'].description | empty}}</td>
                    </tr>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-ADDRESS"></td>
                        <td>{{activeServers['process'].serverAddress | empty}}</td>
                        <td class="property-name" translate="CLUSTER.ENDPOINT-PORT"></td>
                        <td>{{activeServers['process'].serverPort | empty}}</td>
                    </tr>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-CONTEXT-ROOT"></td>
                        <td>{{activeServers['process'].contextRoot | empty}}</td>
                        <td class="property-name" translate="CLUSTER.ENDPOINT-REST-ROOT"></td>
                        <td>{{activeServers['process'].restRoot | empty}}</td>
                    </tr>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-USERNAME"></td>
                        <td>{{activeServers['process'].userName | empty}}</td>
                    </tr>
                </table>
            </div>

        </div>

        <div class="col-md-3">
            <div class="component tip-left">
                <div class="title process">
                    <h2 translate="GENERAL.TITLE.ACTIONS"></h2>
                </div>
                <div class="seperator"></div>
                <ul class="list-group">
                    <li>
                        <button type="button" class="btn btn-sm btn-default" ng-click="editProcessEndpointConfig()">
                            <i class="glyphicon glyphicon-pencil"></i>{{'CLUSTER.ACTION.EDIT-ENDPOINT' | translate}}
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn btn-sm btn-default" ng-click="checkProcessEndpointConfig()">
                            <i class="glyphicon glyphicon-ok"></i>{{'CLUSTER.ACTION.CHECK-ENDPOINT' | translate}}
                        </button>
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="col-md-9 component">
            <div class="title cmmn">
                <h2 translate="CLUSTER.TITLE.CMMN-ENDPOINT"></h2>
            </div>
            <p class="message"><i class="glyphicon glyphicon-info-sign"></i>
                {{'CLUSTER.ENDPOINT-HELP' | translate}}
            </p>

            <div class="property-wrapper">
                <table>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-NAME"></td>
                        <td>{{activeServers['cmmn'].name | empty}}</td>
                        <td class="property-name" translate="CLUSTER.ENDPOINT-DESCRIPTION"></td>
                        <td>{{activeServers['cmmn'].description | empty}}</td>
                    </tr>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-ADDRESS"></td>
                        <td>{{activeServers['cmmn'].serverAddress | empty}}</td>
                        <td class="property-name" translate="CLUSTER.ENDPOINT-PORT"></td>
                        <td>{{activeServers['cmmn'].serverPort | empty}}</td>
                    </tr>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-CONTEXT-ROOT"></td>
                        <td>{{activeServers['cmmn'].contextRoot | empty}}</td>
                        <td class="property-name" translate="CLUSTER.ENDPOINT-REST-ROOT"></td>
                        <td>{{activeServers['cmmn'].restRoot | empty}}</td>
                    </tr>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-USERNAME"></td>
                        <td>{{activeServers['cmmn'].userName | empty}}</td>
                    </tr>
                </table>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="component tip-left">
                <div class="title cmmn">
                    <h2 translate="GENERAL.TITLE.ACTIONS"></h2>
                </div>
                <div class="seperator"></div>
                <ul class="list-group">
                    <li>
                        <button type="button" class="btn btn-sm btn-default" ng-click="editCmmnEndpointConfig()">
                            <i class="glyphicon glyphicon-pencil"></i>{{'CLUSTER.ACTION.EDIT-ENDPOINT' | translate}}
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn btn-sm btn-default" ng-click="checkCmmnEndpointConfig()">
                            <i class="glyphicon glyphicon-ok"></i>{{'CLUSTER.ACTION.CHECK-ENDPOINT' | translate}}
                        </button>
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="col-md-9 component">
            <div class="title app">
                <h2 translate="CLUSTER.TITLE.APP-ENDPOINT"></h2>
            </div>
            <p class="message"><i class="glyphicon glyphicon-info-sign"></i>
                {{'CLUSTER.ENDPOINT-HELP' | translate}}
            </p>

            <div class="property-wrapper">
                <table>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-NAME"></td>
                        <td>{{activeServers['app'].name | empty}}</td>
                        <td class="property-name" translate="CLUSTER.ENDPOINT-DESCRIPTION"></td>
                        <td>{{activeServers['app'].description | empty}}</td>
                    </tr>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-ADDRESS"></td>
                        <td>{{activeServers['app'].serverAddress | empty}}</td>
                        <td class="property-name" translate="CLUSTER.ENDPOINT-PORT"></td>
                        <td>{{activeServers['app'].serverPort | empty}}</td>
                    </tr>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-CONTEXT-ROOT"></td>
                        <td>{{activeServers['app'].contextRoot | empty}}</td>
                        <td class="property-name" translate="CLUSTER.ENDPOINT-REST-ROOT"></td>
                        <td>{{activeServers['app'].restRoot | empty}}</td>
                    </tr>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-USERNAME"></td>
                        <td>{{activeServers['app'].userName | empty}}</td>
                    </tr>
                </table>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="component tip-left">
                <div class="title app">
                    <h2 translate="GENERAL.TITLE.ACTIONS"></h2>
                </div>
                <div class="seperator"></div>
                <ul class="list-group">
                    <li>
                        <button type="button" class="btn btn-sm btn-default" ng-click="editAppEndpointConfig()">
                            <i class="glyphicon glyphicon-pencil"></i>{{'CLUSTER.ACTION.EDIT-ENDPOINT' | translate}}
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn btn-sm btn-default" ng-click="checkAppEndpointConfig()">
                            <i class="glyphicon glyphicon-ok"></i>{{'CLUSTER.ACTION.CHECK-ENDPOINT' | translate}}
                        </button>
                    </li>
                </ul>
            </div>
        </div>

        <div class="col-md-9 component">
            <div class="title form">
                <h2 translate="CLUSTER.TITLE.FORM-ENDPOINT"></h2>
            </div>
            <p class="message"><i class="glyphicon glyphicon-info-sign"></i>
                {{'CLUSTER.ENDPOINT-HELP' | translate}}
            </p>

            <div class="property-wrapper">
                <table>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-NAME"></td>
                        <td>{{activeServers['form'].name | empty}}</td>
                        <td class="property-name" translate="CLUSTER.ENDPOINT-DESCRIPTION"></td>
                        <td>{{activeServers['form'].description | empty}}</td>
                    </tr>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-ADDRESS"></td>
                        <td>{{activeServers['form'].serverAddress | empty}}</td>
                        <td class="property-name" translate="CLUSTER.ENDPOINT-PORT"></td>
                        <td>{{activeServers['form'].serverPort | empty}}</td>
                    </tr>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-CONTEXT-ROOT"></td>
                        <td>{{activeServers['form'].contextRoot | empty}}</td>
                        <td class="property-name" translate="CLUSTER.ENDPOINT-REST-ROOT"></td>
                        <td>{{activeServers['form'].restRoot | empty}}</td>
                    </tr>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-USERNAME"></td>
                        <td>{{activeServers['form'].userName | empty}}</td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="col-md-3">
            <div class="component tip-left">
                <div class="title form">
                    <h2 translate="GENERAL.TITLE.ACTIONS"></h2>
                </div>
                <div class="seperator"></div>
                <ul class="list-group">
                    <li>
                        <button type="button" class="btn btn-sm btn-default" ng-click="editFormEndpointConfig()">
                            <i class="glyphicon glyphicon-pencil"></i>{{'CLUSTER.ACTION.EDIT-ENDPOINT' | translate}}
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn btn-sm btn-default" ng-click="checkFormEndpointConfig()">
                            <i class="glyphicon glyphicon-ok"></i>{{'CLUSTER.ACTION.CHECK-ENDPOINT' | translate}}
                        </button>
                    </li>
                </ul>
            </div>
        </div>


        <div class="col-md-9 component">

            <div class="title dmn">
                <h2 translate="CLUSTER.TITLE.DMN-ENDPOINT"></h2>
            </div>
            <p class="message"><i class="glyphicon glyphicon-info-sign"></i>
                {{'CLUSTER.ENDPOINT-HELP' | translate}}
            </p>

            <div class="property-wrapper">
                <table>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-NAME"></td>
                        <td>{{activeServers['dmn'].name | empty}}</td>
                        <td class="property-name" translate="CLUSTER.ENDPOINT-DESCRIPTION"></td>
                        <td>{{activeServers['dmn'].description | empty}}</td>
                    </tr>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-ADDRESS"></td>
                        <td>{{activeServers['dmn'].serverAddress | empty}}</td>
                        <td class="property-name" translate="CLUSTER.ENDPOINT-PORT"></td>
                        <td>{{activeServers['dmn'].serverPort | empty}}</td>
                    </tr>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-CONTEXT-ROOT"></td>
                        <td>{{activeServers['dmn'].contextRoot | empty}}</td>
                        <td class="property-name" translate="CLUSTER.ENDPOINT-REST-ROOT"></td>
                        <td>{{activeServers['dmn'].restRoot | empty}}</td>
                    </tr>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-USERNAME"></td>
                        <td>{{activeServers['dmn'].userName | empty}}</td>
                    </tr>
                </table>
            </div>

        </div>

        <div class="col-md-3">
            <div class="component tip-left">
                <div class="title dmn">
                    <h2 translate="GENERAL.TITLE.ACTIONS"></h2>
                </div>
                <div class="seperator"></div>
                <ul class="list-group">
                    <li>
                        <button type="button" class="btn btn-sm btn-default" ng-click="editDmnEndpointConfig()">
                            <i class="glyphicon glyphicon-pencil"></i>{{'CLUSTER.ACTION.EDIT-ENDPOINT' | translate}}
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn btn-sm btn-default" ng-click="checkDmnEndpointConfig()">
                            <i class="glyphicon glyphicon-ok"></i>{{'CLUSTER.ACTION.CHECK-ENDPOINT' | translate}}
                        </button>
                    </li>
                </ul>
            </div>
        </div>

        <div class="col-md-9 component">
            <div class="title content">
                <h2 translate="CLUSTER.TITLE.CONTENT-ENDPOINT"></h2>
            </div>
            <p class="message"><i class="glyphicon glyphicon-info-sign"></i>
                {{'CLUSTER.ENDPOINT-HELP' | translate}}
            </p>

            <div class="property-wrapper">
                <table>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-NAME"></td>
                        <td>{{activeServers['content'].name | empty}}</td>
                        <td class="property-name" translate="CLUSTER.ENDPOINT-DESCRIPTION"></td>
                        <td>{{activeServers['content'].description | empty}}</td>
                    </tr>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-ADDRESS"></td>
                        <td>{{activeServers['content'].serverAddress | empty}}</td>
                        <td class="property-name" translate="CLUSTER.ENDPOINT-PORT"></td>
                        <td>{{activeServers['content'].serverPort | empty}}</td>
                    </tr>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-CONTEXT-ROOT"></td>
                        <td>{{activeServers['content'].contextRoot | empty}}</td>
                        <td class="property-name" translate="CLUSTER.ENDPOINT-REST-ROOT"></td>
                        <td>{{activeServers['content'].restRoot | empty}}</td>
                    </tr>
                    <tr class="property">
                        <td class="property-name" translate="CLUSTER.ENDPOINT-USERNAME"></td>
                        <td>{{activeServers['content'].userName | empty}}</td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="col-md-3">
            <div class="component tip-left">
                <div class="title content">
                    <h2 translate="GENERAL.TITLE.ACTIONS"></h2>
                </div>
                <div class="seperator"></div>
                <ul class="list-group">
                    <li>
                        <button type="button" class="btn btn-sm btn-default" ng-click="editContentEndpointConfig()">
                            <i class="glyphicon glyphicon-pencil"></i>{{'CLUSTER.ACTION.EDIT-ENDPOINT' | translate}}
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn btn-sm btn-default" ng-click="checkContentEndpointConfig()">
                            <i class="glyphicon glyphicon-ok"></i>{{'CLUSTER.ACTION.CHECK-ENDPOINT' | translate}}
                        </button>
                    </li>
                </ul>
            </div>
        </div>


    </div>
</div>
