@if (itemResource.isLoading()) {
  <app-skeleton-loader type="card" [count]="1" />
} @else if (itemResource.error()) {
  <app-error-state (retryAction)="itemResource.reload()" />
} @else {
  <h2>Modifier Category</h2>
  <form class="flex-col">
    <div class="row-container">
      <mat-form-field class="flex-auto">
        <mat-label>Name</mat-label>
        <input matInput [formField]="form.name" />
      </mat-form-field>
    </div>
    <div class="row-container">
      <mat-form-field class="flex-auto">
        <mat-label>Minimum</mat-label>
        <input matInput type="number" [formField]="form.minimum" />
      </mat-form-field>
      <mat-form-field class="flex-auto">
        <mat-label>Maximum</mat-label>
        <input matInput type="number" [formField]="form.maximum" />
      </mat-form-field>
    </div>
    <div class="row-container">
      <mat-checkbox [formField]="form.isActive">Is Active?</mat-checkbox>
    </div>
    <mat-divider></mat-divider>
    <mat-tree [dataSource]="dataSource" #tree [childrenAccessor]="childrenAccessor" class="example-tree">
      <!-- This is the tree node template for leaf nodes -->
      <mat-nested-tree-node *matTreeNodeDef="let node" class="mat-tree-node" [class.leaf-node]="!hasChild(0, node)">
        <li class="mat-tree-node">
          <!-- use a disabled button to provide padding for tree leaf -->
          <!-- eslint-disable-next-line @angular-eslint/template/elements-content -->
          <button type="button" mat-icon-button disabled></button>
          <mat-checkbox
            class="checklist-leaf-node"
            [checked]="isProductSelected(node)"
            (change)="toggleProductSelection(node)"
            >{{ node.name }}</mat-checkbox
          >
        </li>
      </mat-nested-tree-node>
      <!-- This is the tree node template for expandable nodes -->
      <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
        <li>
          <div class="mat-tree-node">
            <button type="button" mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
              <mat-icon class="mat-icon-rtl-mirror">
                {{ tree.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
              </mat-icon>
            </button>
            <mat-checkbox
              [checked]="isMenuCategorySelected(node)"
              [indeterminate]="isMenuCategoryPartiallySelected(node)"
              (change)="toggleMenuCategorySelection(node)"
              >{{ node.name }}</mat-checkbox
            >
          </div>
          <ul [class.example-tree-invisible]="!tree.isExpanded(node)">
            <ng-container matTreeNodeOutlet></ng-container>
          </ul>
        </li>
      </mat-nested-tree-node>
    </mat-tree>
  </form>

  <div class="row-container">
    <button type="button" mat-raised-button color="primary" class="" (click)="save()">Save</button>
    <button type="button" mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
  </div>
}