<div class="services-table-container" ng-controller="ServicesTableController as serviceTableCtrl">
    <div ng-if="serviceTableCtrl.dataTable.length > 0">
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group has-feedback search-form">
                    <input type="text" class="form-control input-lg" ng-model="serviceTableCtrl.serviceTableQuery"
                           th:placeholder="#{management.services.table.label.search}"/>
                    <a href="javascript://" class="fa fa-2x fa-times-circle-o form-control-feedback search-clear"
                       ng-click="serviceTableCtrl.clearFilter()">
                    </a>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">

                <div class="alert alert-{{ serviceTableCtrl.alert.type }}" role="alert" ng-if="serviceTableCtrl.alert">
                    <p>
                        <i class="fa fa-lg fa-{{ serviceTableCtrl.alert.type === 'danger' ? 'exclamation-triangle' : 'info-circle' }}"></i>
                        <span ng-if="serviceTableCtrl.alert.name === 'deleted'">
                            <i>{{ serviceTableCtrl.alert.data.name }}</i>
                            <span th:text="#{management.services.status.deleted}"/>
                        </span>
                        <span ng-if="serviceTableCtrl.alert.name === 'notdeleted'">
                            <span th:text="#{management.services.status.notdeleted}"/>
                        </span>
                        <span ng-if="serviceTableCtrl.alert.name === 'listfailed'">
                            <span th:text="#{management.services.status.listfail}"/>
                        </span>
                        <span ng-if="serviceTableCtrl.alert.name === 'notupdated'">
                            <span th:text="#{management.services.status.evaluationOrder.notupdated}"/>
                        </span>
                        <a href="javascript://" class="fa fa-2x fa-times close-link" ng-click="serviceTableCtrl.alert = null;">
                        </a>
                    </p>
                </div>

                <table class="table table-hover table-striped services-table" ng-model="serviceTableCtrl.dataTable">
                    <thead>
                    <tr>
                        <th class="col-sm-3" th:text="#{management.services.table.header.serviceName}"></th>
                        <th class="col-sm-3" th:utext="#{management.services.table.header.serviceId}"></th>
                        <th class="col-sm-4" th:text="#{management.services.table.header.serviceDesc}"></th>
                        <th class="col-sm-1"></th>
                        <th class="col-sm-1"></th>
                    </tr>
                    </thead>
                    <tbody ui-sortable="serviceTableCtrl.sortableOptions" ng-model="serviceTableCtrl.dataTable">
                    <tr id="assignedId_{{ item.assignedId }}"
                        ng-repeat="item in serviceTableCtrl.dataTable | serviceTableFilter:['name','serviceId','description']:serviceTableCtrl.serviceTableQuery"
                        ng-class="{ 'row-disabled': !item.sasCASEnabled }">
                        <td colspan="6">

                            <table class="table-service">
                                <tr class="main-row">
                                    <td class="col-sm-2">
                                        <div class="grabber-icon"><i class="fa fa-lg fa-ellipsis-v"></i></div>
                                        <span ng-bind="item.name"></span>
                                        <a href="javascript://" class="more" ng-click="serviceTableCtrl.toggleDetail(item.assignedId)">
                                            <i class="fa fa-chevron-{{ serviceTableCtrl.detailRow === item.assignedId ? 'up' : 'down' }}"></i>
                                        </a>
                                    </td>
                                    <td class="col-sm-3" ng-bind="item.serviceId"></td>
                                    <td class="col-sm-4" ng-bind="item.description | wordCharTrunc:60"></td>
                                    <td class="col-sm-1">
                                        <button class="btn btn-success" ng-click="action.serviceEdit( item.assignedId )">
                                            <i class="fa fa-lg fa-pencil"></i>
                                            <span th:remove="tag" th:text="#{management.services.table.button.edit}"/>
                                        </button>
                                    </td>
                                    <td class="col-sm-1">
                                        <button class="btn btn-warning" ng-click="action.serviceDuplicate( item.assignedId )">
                                            <i class="fa fa-lg fa-clone"></i>
                                            <span th:remove="tag" th:text="#{management.services.table.button.duplicate}"/>
                                        </button>
                                    </td>
                                    <td class="col-sm-1">
                                        <button class="btn btn-danger" ng-click="serviceTableCtrl.openModalDelete(item)">
                                            <i class="fa fa-lg fa-trash"></i>
                                            <span th:remove="tag" th:text="#{management.services.table.button.delete}"/>
                                        </button>
                                    </td>
                                </tr>
                                <tr class="detail-row" ng-show="serviceTableCtrl.detailRow == item.assignedId">
                                    <td colspan="6">
                                        <table class="table-details">
                                            <tr>
                                                <td class="col-sm-2 detail-label"
                                                    th:text="#{management.services.table.details.description}"/>
                                                <td class="col-sm-8" ng-bind="item.description"></td>
                                                <td class="col-sm-2 detail-logo" colspan="2" rowspan="5" ng-if="item.logoUrl"><img
                                                        ng-attr-src="{{ item.logoUrl }}" alt="{{ item.name }}"/></td>
                                            </tr>
                                            <tr>
                                                <td class="col-sm-2 detail-label"
                                                    th:text="#{management.services.table.details.proxyPolicy}"/>
                                                <td class="col-sm-8">
                                                    <span ng-if="!item.proxyPolicy.value"
                                                          ng-bind="item.proxyPolicy.type | uppercase"></span>
                                                    <span nf-if="item.proxyPolicy.value" ng-bind="item.proxyPolicy.value"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="col-sm-2 detail-label"
                                                    th:text="#{management.services.table.details.attrPolicy}"/>
                                                <td class="col-sm-8" ng-bind="item.attrRelease.attrPolicy | uppercase"></td>
                                            </tr>
                                            <tr>
                                                <td class="col-sm-2 detail-label"
                                                    th:text="#{management.services.table.details.releaseCred}"/>
                                                <td class="col-sm-8" ng-bind="item.attrRelease.releasePassword | checkmark"></td>
                                            </tr>
                                            <tr>
                                                <td class="col-sm-2 detail-label"
                                                    th:text="#{management.services.table.details.releaseProxy}"/>
                                                <td class="col-sm-8" ng-bind="item.attrRelease.releaseTicket | checkmark"></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>

                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true"
         ng-class="{ 'show': serviceTableCtrl.modalItem, 'fade': !serviceTableCtrl.modalItem }">
        <div class="modal-dialog">
            <div class="modal-content">
                <div id="deleteModalLabel" class="modal-header">
                    <h3 th:text="#{management.services.table.modal.delete.header}"/>
                </div>
                <div class="modal-body">
                    <span th:text="#{management.services.table.modal.delete.msgPt1}"/>{{ serviceTableCtrl.modalItem.name }}.<br/>
                    <span th:text="#{management.services.table.modal.delete.msgPt2}"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="serviceTableCtrl.closeModalDelete();">
                        Cancel
                    </button>
                    <button type="button" class="btn btn-danger btn-ok"
                            ng-click="serviceTableCtrl.deleteService( serviceTableCtrl.modalItem )">Delete
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>
