<div class="row mb-3 align-items-center justify-content-between">
  <div class="col-md-auto col-sm-auto">
    <div class="section-title">
      <h1>{{'PAGES' | translate}}</h1>
    </div>
  </div>
  <div class="col-md-auto col-sm-auto">
    <h4 class="widget-title">
      <button class="btn btn-success btn-sm m-right-10" (click)="managePage(null)">
        <i-feather name="plus" class="small-icon"></i-feather>
        {{'ADD_PAGE' | translate}}
      </button>
    </h4>
  </div>
</div>

<div class="loading-shade" *ngIf="!loading">
  <mat-spinner></mat-spinner>
</div>

<div class="mat-elevation-z8">
  <div class="table-container">
    <table mat-table [dataSource]="pages" multiTemplateDataRows class="mat-elevation-z8 table">
      <ng-container matColumnDef="subaction">
        <th mat-header-cell *matHeaderCellDef> </th>
        <td mat-cell *matCellDef="let element">
          <mat-icon class="cursor-pointer" *ngIf="element != expandedElement" (click)="toggleRow(element)">
            chevron_right</mat-icon>
          <mat-icon class="cursor-pointer" *ngIf="element == expandedElement" (click)="toggleRow(element)">
            expand_more</mat-icon>
        </td>
      </ng-container>
      <!-- Action Column -->
      <ng-container matColumnDef="action">
        <th style="width:30%" mat-header-cell *matHeaderCellDef>{{'ACTION' | translate}} </th>
        <td style="width:30%" mat-cell *matCellDef="let element">
          <button (click)="managePage(element)" class="btn btn-success btn-sm m-right-10" type="button">
            <i-feather name="edit" class="small-icon"></i-feather>
            <span class="d-none d-sm-inline"> {{'EDIT' | translate}}</span>
          </button>
          <button (click)="deletePage(element)" class="btn btn-danger btn-sm" type="button">
            <i-feather name="trash" class="small-icon"></i-feather>
            <span class="d-none d-sm-inline"> {{'DELETE' | translate}}</span>
          </button>
        </td>
      </ng-container>
      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> {{'NAME' | translate}} </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>
      <ng-container matColumnDef="order">
        <th mat-header-cell *matHeaderCellDef> {{'ORDER' | translate}} </th>
        <td mat-cell *matCellDef="let element"> {{element.order}} </td>
      </ng-container>

      <ng-container matColumnDef="expandedDetail">
        <td mat-cell *matCellDef="let actionObject" [attr.colspan]="displayedColumns.length">
          <div class="element-detail" [@detailExpand]="actionObject === expandedElement ? 'expanded' : 'collapsed'">
            <div class="inner-table mat-elevation-z8">
              <div class="row mb-3 align-items-center justify-content-between">
                <div class="col-md-auto col-sm-auto">
                  <div class="section-title">
                    <h2> {{'ACTION' |translate}}</h2>
                  </div>
                </div>

                <div class="col-md-auto col-sm-auto">
                  <button (click)="addAction(actionObject)" class="btn btn-success btn-sm m-right-10" type="button">
                    <i-feather name="plus" class="small-icon"></i-feather>
                    {{'ADD_ACTION' | translate}}
                  </button>
                </div>
              </div>
              <table mat-table [dataSource]="subActions" multiTemplateDataRows class="table">
                <ng-container matColumnDef="action">
                  <th mat-header-cell *matHeaderCellDef>{{'ACTION' | translate}}
                  </th>
                  <td mat-cell *matCellDef="let element">
                    <button (click)="manageAction(element)" class="btn btn-success btn-sm m-right-10" type="button">
                      <i-feather name="edit" class="small-icon"></i-feather>
                      {{'EDIT' | translate}}
                    </button>
                    <button (click)="deleteAction(element)" class="btn btn-danger btn-sm" type="button">
                      <i-feather name="trash" class="small-icon"></i-feather>
                      {{'DELETE' | translate}}
                    </button>
                  </td>
                </ng-container>
                <ng-container matColumnDef="name">
                  <th mat-header-cell *matHeaderCellDef> {{'NAME' | translate}} </th>
                  <td mat-cell *matCellDef="let element"> {{element.name}} </td>
                </ng-container>
                <ng-container matColumnDef="order">
                  <th mat-header-cell *matHeaderCellDef> {{'ORDER' | translate}} </th>
                  <td mat-cell *matCellDef="let element"> {{element.order}} </td>
                </ng-container>
                <ng-container matColumnDef="code">
                  <th mat-header-cell *matHeaderCellDef> {{'CODE' | translate}} </th>
                  <td mat-cell *matCellDef="let element"> {{element.code}} </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="subActionColumnToDisplay;sticky: true"></tr>
                <tr mat-row *matRowDef="let row; columns: subActionColumnToDisplay;"></tr>
              </table>
            </div>
          </div>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
    </table>
  </div>
</div>
