<div class="clr-row">
  <div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
    <div class="clr-row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
      <h2 class="header-title" [translate]="'WEBHOOK.TITLE'" [translateParams]="{value: resourceLabel}"></h2>
    </div>
    <create-edit-app-webhook (create)="refresh($event)" (update)="refresh($event)"></create-edit-app-webhook>
    <div class="table-search">
      <div class="table-search-left">
        <button
          *ngIf="authService.currentNamespacePermission.webHook.create || authService.currentAppPermission.webHook.create || authService.currentUser.admin"
          class="wayne-button normal" (click)="openModal()" [translate]="'WEBHOOK.CREATE'" [translateParams]="{value: resourceLabel}">
        </button>
        <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
          <wayne-checkbox-group [(ngModel)]="showList">
            <wayne-checkbox value="name">{{'TITLE.NAME' | translate}}</wayne-checkbox>
            <wayne-checkbox value="url">URL</wayne-checkbox>
            <wayne-checkbox value="start_status">{{'TITLE.START_STATUS' | translate}}</wayne-checkbox>
            <wayne-checkbox value="create_user">{{'TITLE.CREATE_USER' | translate}}</wayne-checkbox>
            <wayne-checkbox value="create_time">{{'TITLE.CREATE_TIME' | translate}}</wayne-checkbox>
            <wayne-checkbox value="action">{{'TITLE.ACTION' | translate}}</wayne-checkbox>
          </wayne-checkbox-group>
        </wayne-filter-box>
      </div>
    </div>
    <list-app-webhook
      [webHooks]="webHooks"
      (delete)="deleteWebHook($event)"
      (toggle)="toggleWebHook($event)"
      (edit)="editWebHook($event)"
      (paginate)="retrieve($event)"
      [page]="pageState.page"
      [showState]="showState"
    ></list-app-webhook>
  </div>
</div>
