@if (module() && schema()) {
  <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"
    >
      <div class="flex items-center justify-center bg-gray-600">
        <div class="flex-grow ml-1 mr-3 text-gray-200">
          {{ schema().title }}
        </div>
        <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"> id: </label>
              <input
                type="text"
                class="pl-1 border-2 border-gray-200 text-gray-200 border-solid rounded-sm"
                [placeholder]="'module-1'"
                [formControlName]="'id'"
              />
            </div>
            <app-params-form
              [paramsSchema]="schema()?.properties?.params"
              [data]="params()"
              (updated)="paramsUpdated($event)"
            ></app-params-form>
          </div>
        </form>
      </div>
    </div>
  </div>
}