<div class="content-container" style="position: relative">
  <div class="content-area">
    <wayne-box style="padding: 15px;">
      <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">{{ resourceLabel }} {{'TITLE.LIST' | translate}}</h2>
          </div>
          <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()">
                {{'ACTION.CREATE' | translate}} {{ resourceLabel }}
              </button>
              <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
                <wayne-checkbox-group [(ngModel)]="showList">
                  <wayne-checkbox>ID</wayne-checkbox>
                  <wayne-checkbox value="name">{{'TITLE.NAME' | translate}}</wayne-checkbox>
                  <wayne-checkbox value="url">{{'TITLE.URL' | translate}}</wayne-checkbox>
                  <wayne-checkbox value="status">{{'TITLE.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>
          <create-edit-namespace-webhook (create)="refresh($event)"
                                         (update)="refresh($event)"></create-edit-namespace-webhook>
          <list-namespace-webhook [webHooks]="webHooks" (delete)="deleteWebHook($event)"
                                  (toggle)="toggleWebHook($event)"
                                  (edit)="editWebHook($event)" (paginate)="retrieve($event)" [page]="pageState.page"
                                  [showState]="showState"></list-namespace-webhook>
        </div>
      </div>
    </wayne-box>
  </div>
</div>
<wayne-sidenav-namespace style="display: flex; order: -1"></wayne-sidenav-namespace>
