@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>
              <input
                type="text"
                class="pl-1 border-2 border-gray-200 text-gray-200 border-solid rounded-sm"
                [placeholder]="'module-1'"
                [formControlName]="'input'"
              />
              @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>
              <input
                type="text"
                class="pl-1 border-2 border-gray-200 text-gray-200 border-solid rounded-sm"
                [placeholder]="'module-1'"
                [formControlName]="'output'"
              />
              @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>
  </div>
}