<div class="table-responsive">
    <table class="table table-bordered table-responsive table-striped table-capitalize-header">
        <thead>
        <tr>
            <th>
                <button class="btn btn-default unsorted" pi-sort-by="ordering" translate>Order</button>
            </th>
            <th>
                <button class="btn btn-default unsorted" pi-sort-by="active" translate>Active</button>
            </th>
            <!--<th translate>Id</th>-->
            <th class="pifilter">
                <button class="btn btn-default unsorted" pi-sort-by="name" translate>Description</button>
                <pi-filter ng-model="filter.name" ng-change="$apply()"></pi-filter>
            </th>
            <th translate>Events</th>
            <th class="pifilter">
                <button class="btn btn-default unsorted" pi-sort-by="handlermodule" translate>Handlermodule</button>
                <pi-filter ng-model="filter.handlermodule" ng-change="$apply()"></pi-filter>
            </th>
            <th class="pifilter">
                <span class="btn btn-default unsorted" pi-sort-by="position" translate>Position</span>
                <pi-filter ng-model="filter.position" ng-change="$apply()"></pi-filter>
            </th>
            <th translate>Conditions</th>
            <th class="pifilter">
                <button class="btn btn-default unsorted" pi-sort-by="action" translate>Action</button>
                <pi-filter ng-model="filter.action" ng-change="$apply()"></pi-filter>
            </th>
            <th translate>Options</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="event in events | filter:filter | orderBy:sortby:reverse">
            <td>
                <input type="number" ng-model="event.ordering"
                       class="form-control" min="0"
                       ng-change="orderChanged(event)" />
            </td>
            <td>
                <span ng-show="event.active"
                      class="glyphicon glyphicon-ok"
                      ng-click="disableEvent(event.id)">
                </span>
                <span ng-hide="event.active"
                      class="glyphicon glyphicon-minus"
                      ng-click="enableEvent(event.id)">
                </span>
            </td>
            <!--
            <td>
                <a ui-sref="config.events.details({eventid: event.id})">
                    {{ event.id }}</a>
            </td>
            -->
            <td>
                <a ui-sref="config.events.details({eventid: event.id})">
                    {{ event.name }}</a>
            </td>
            <td>
                {{ event.event | json}}
            </td>
            <td>
                {{ event.handlermodule }}
            </td>
            <td>
                {{ event.position }}
            </td>
            <td>
                {{ event.conditions }}
            </td>
            <td>
                {{ event.action }}
            </td>
            <td>
                {{ event.options | json }}
            </td>
            <td>
                <button class="btn btn-danger"
                        ng-show="checkRight('eventhandling_write')"
                        aria-label="{{ 'Do you really want to delete this event?' | translate }}"
                        ng-click="confirmDelete(delEvent, event.id)">
                        <span class="glyphicon glyphicon-trash"></span>
                        <span translate>Delete</span>
                </button>
            </td>
        </tr>

        </tbody>
    </table>
</div>
