@if (route()) {
  <div class="flex items-start m-2 w-fit">
    <div
      class="flex flex-col bg-gray-800 border-2 {{
        isInError() ? 'border-red-500' : 'border-gray-200'
      }} border-solid w-fit h-full mr-2"
    >
      <div class="flex items-center justify-end bg-gray-600">
        <div class="flex items-center justify-center" (click)="delete.emit()">
          <mat-icon class="!text-red-500">close</mat-icon>
        </div>
      </div>
      <div>
        <form [formGroup]="formGroup" class="h-full">
          <div class="m-2">
            <div class="flex items-center m-1">
              <label class="mr-2 text-gray-300"> input: </label>
              <select
                class="pl-1 border-2 border-gray-200 text-gray-200 border-solid rounded-sm"
                formControlName="input"
              >
                @for (option of moduleIds(); track option) {
                  <option [value]="option">
                    {{ option }}
                  </option>
                }
              </select>
              @if (!formGroup.controls['input'].valid) {
                <!-- TODO(jwetzell): better error displaying -->
                <div class="ml-2 text-red-500">{{ formGroup.controls['input'].errors | json }}</div>
              }
            </div>
            <div class="flex items-center m-1">
              <label class="mr-2 text-gray-300"> output: </label>
              <select
                class="pl-1 border-2 border-gray-200 text-gray-200 border-solid rounded-sm"
                formControlName="output"
              >
                @for (option of moduleIds(); track option) {
                  <option [value]="option">
                    {{ option }}
                  </option>
                }
              </select>
              @if (!formGroup.controls['output'].valid) {
                <!-- TODO(jwetzell): better error displaying -->
                <div class="ml-2 text-red-500">
                  {{ formGroup.controls['output'].errors | json }}
                </div>
              }
            </div>
          </div>
        </form>
        <div>
          <div class="text-md text-gray-300 text-center">Processors</div>
          <div class="border-2 border-gray-500 m-2 rounded-sm">
            @if (processors() === undefined || processors()?.length === 0) {
              <div class="w-full h-6"></div>
            } @else {
              @for (processor of processors(); track processor; let i = $index) {
                <div cdkDrag>
                  <app-processor
                    [path]="path() + '/processors/' + i"
                    (processorChange)="processorUpdated(i, $event)"
                    [processor]="processor"
                    (delete)="deleteProcessor(i)"
                  ></app-processor>
                </div>
              }
            }
          </div>
        </div>
      </div>
      <div class="flex mb-2">
        @if (schemaService.moduleTypes.length > 0) {
          <div
            matTooltip="Add Module"
            class="flex items-center justify-center w-full h-10 rounded-lg bg-gray-200 hover:cursor-pointer hover:bg-gray-300 m-2"
            [matMenuTriggerFor]="addProcessorMenu"
          >
            <mat-icon>add</mat-icon>
          </div>
          <mat-menu #addProcessorMenu="matMenu">
            @for (processorType of schemaService.processorTypes; track processorType) {
              <button mat-menu-item (click)="addProcessor(processorType.type)">
                <span>{{ processorType.type }}</span>
              </button>
            }
          </mat-menu>
        }
      </div>
    </div>
  </div>

  <ng-template #addProcessorMenu>
    @if (schemaService.processorTypes.length > 0) {
      <div cdkMenu class="context-menu">
        @for (processorType of schemaService.processorTypes; track processorType) {
          <button cdkMenuItem class="context-menu-item" (click)="addProcessor(processorType.type)">
            <span>{{ processorType.name }}</span>
          </button>
        }
      </div>
    }
  </ng-template>
}