@if (processor() && 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-600'
      }} border-solid w-fit h-full"
    >
      <div class="flex items-center justify-center">
        <div class="flex-grow ml-1 mr-3 text-white">
          {{ schema()?.title || processor()?.type }}
        </div>
        <div class="flex items-center justify-center hover:bg-gray-700" (click)="delete.emit()">
          <mat-icon class="!text-red-500">close</mat-icon>
        </div>
      </div>
      @if (hasParams()) {
        <hr class="bg-gray-600 h-0.5 border-0">
        <div>
          <app-params-form
            [paramsSchema]="schema()?.properties?.params"
            [data]="params()"
            (updated)="paramsUpdated($event)"
          ></app-params-form>
        </div>
      }
    </div>
  </div>
}