
<section class="content">
  <div class="container-fluid">
    <div class="row align-items-center">
      <!-- Left-hand side: Title -->
      <div class="col-md-6 mb-2">
        <span class="mb-0 page-title">{{'PAGE_ACTION' | translate}}</span>
        <app-page-help-text [code]="'SETUP_PAGE_ACTION'"></app-page-help-text>
      </div>
    </div>

<!-- <div class="row align-items-center justify-content-between">
  <div class="col-md-auto col-sm-auto">
    <div class="content-header">
      <h1>{{'PAGE_ACTION' | translate}}</h1>
    </div>
  </div>
</div> -->
<div class="card">
  <div class="body">
    <div class="table-responsive">
      <div class="grid-height-large">
      <table class="table table-bordered table-sm">
        <thead>
          <tr class="table-active">
            <th>#</th>
            <th *ngFor='let action of actions;' scope="col">
              {{action.name}}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor='let page of pages;'>
            <td>
              {{page.name}} ({{page.url}})
            </td>
            <td *ngFor='let action of actions'>
              <mat-slide-toggle (change)="onPageActionChange($event,page.id,action.id)" color="primary"
                [checked]="onCheck(page.id,action.id)">
              </mat-slide-toggle>
            </td>
          </tr>
        </tbody>
      </table>
      </div>
    </div>
  </div>
</div>
  </div>
</section>