<div
  class="label"
  [class.no-handle]="noHandle">
  @if (!noHandle) {
    <div
      class="label-handle">
      <pa-icon name="draggable"></pa-icon>
    </div>
  }
  <div
    class="label-content"
    [class.unsaved-label]="!label">
    <input
      type="text"
      pattern="[^\/\{\}]+"
      cdkFocusInitial
      [class.unsaved-label]="!label"
      [formControl]="title"
      (keydown.enter)="save()"
      (keydown.tab)="save()"
      (blur)="save()" />
  </div>
  @if (!!label) {
    <pa-button
      aspect="basic"
      size="small"
      icon="trash"
      paTooltip="generic.delete"
      (click)="delete()">
      {{ 'generic.delete' | translate }}
    </pa-button>
  }
</div>
@if (!!title.errors?.['pattern'] || errorMessage) {
  <div
    class="error-message">
    @if (errorMessage) {
      {{ errorMessage | translate }}
    }
    @if (!errorMessage) {
      {{ 'label-set.form.labels.naming-constraint' | translate }}
    }
  </div>
}
