<div class="page-content">
  <div class="container-fluid">
    <!-- User Selection Card -->
    <div class="card shadow-sm mb-4">
      <div class="card-body">
        <form [formGroup]="permission" class="row align-items-center">
          <label class="col-md-2 col-form-label fw-semibold">
            {{ "userCode" | translate }}
          </label>

          <div class="col-md-6">
            <ng-select
              class="form-select"
              formControlName="userCode"
              [items]="users"
              bindLabel="userName"
              bindValue="userId"
              placeholder="{{ 'choose' | translate }}"
              (change)="onUserChange()"
              [searchable]="true"
              [clearable]="false"
              [dropdownPosition]="'auto'"
              [virtualScroll]="true"
              [bufferAmount]="20"
              appendTo="body"
            >
              <!-- Custom template for dropdown options -->
              <ng-template ng-option-tmp let-item="item">
                <div class="d-flex flex-column">
                  <span class="fw-medium">{{ item.userName }}</span>
                  <small class="text-muted">{{ item.userId }}</small>
                </div>
              </ng-template>

              <!-- Optional: Custom template for selected item -->
              <ng-template ng-label-tmp let-item="item">
                <span>{{ item.userName }} ({{ item.userId }})</span>
              </ng-template>
            </ng-select>
          </div>
        </form>
      </div>
    </div>

    <!-- Permissions Table Card -->
    <div class="card shadow-sm" *ngIf="showPermissions">
      <div class="card-body">
        <h4 class="card-title mb-3">{{ "permissions" | translate }}</h4>

        <div class="table-responsive scrollable-table">
          <table
            class="table table-hover table-bordered table-sm permission-table"
          >
            <thead class="table-light">
              <tr>
                <th style="width: 40px"></th>
                <th>{{ "Permissions" | translate }}</th>
                <th style="width: 120px" class="text-center">
                  {{ "allow" | translate }}
                </th>
              </tr>
            </thead>

            <tbody>
              <ng-container
                *ngTemplateOutlet="
                  permissionRow;
                  context: { nodes: permissions, level: 0 }
                "
              ></ng-container>
            </tbody>
          </table>
        </div>

        <div class="text-end mt-3">
          <button
            class="btn btn-primary btn-sm px-4"
            (click)="savePermissions()"
          >
            {{ "save" | translate }}
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Recursive Permission Rows -->
<ng-template #permissionRow let-nodes="nodes" let-level="level">
  <ng-container *ngFor="let node of nodes">
    <tr>
      <td class="text-center">
        <span
          *ngIf="node.children?.length || node.buttons?.length"
          class="expand-icon"
          (click)="toggleExpand(node)"
        >
          <i
            class="bx"
            [ngClass]="node.expanded ? 'bx-chevron-down' : 'bx-chevron-right'"
          ></i>
        </span>
      </td>

      <td class="permission-cell" [style.--level]="level">
        {{ node.name | translate }}
      </td>

      <td class="text-center">
        <input
          type="checkbox"
          [checked]="node.checked"
          (change)="toggleNode(node, $event)"
        />
      </td>
    </tr>

    <ng-container *ngIf="node.expanded">
      <ng-container *ngIf="node.children?.length">
        <ng-container
          *ngTemplateOutlet="
            permissionRow;
            context: { nodes: node.children, level: level + 1 }
          "
        ></ng-container>
      </ng-container>
      <ng-container *ngIf="node.buttons?.length">
        <ng-container
          *ngTemplateOutlet="
            permissionRow;
            context: { nodes: node.buttons, level: level + 1 }
          "
        ></ng-container>
      </ng-container>
    </ng-container>
  </ng-container>
</ng-template>
