@if (node) {
<mat-card appearance="raised">
  <mat-card-content>
    <form [formGroup]="form" autocomplete="off">
      <mat-form-field data-automation-id="library-name-properties-wrapper" class="app-library-metadata-form-field">
        <mat-label>{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
        <input
          #libraryNameInput
          data-automation-id="app-library-metadata-form-name-input"
          matInput
          required
          placeholder="{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}"
          formControlName="title"
          [errorStateMatcher]="matcher"
        />
        @if (libraryTitleExists) {
        <mat-hint data-automation-id="app-library-metadata-form-name-hint">{{ 'LIBRARY.HINTS.SITE_TITLE_EXISTS' | translate }}</mat-hint>
        }
        <mat-error data-automation-id="app-library-metadata-form-name-error">
          {{ titleErrorTranslationKey | translate }}
        </mat-error>
      </mat-form-field>

      <mat-form-field data-automation-id="library-id-properties-wrapper" class="app-library-metadata-form-field">
        <mat-label>{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
        <input matInput placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}" formControlName="id" />
      </mat-form-field>

      <mat-form-field data-automation-id="library-visibility-properties-wrapper" class="app-library-metadata-form-field">
        <mat-label>{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}</mat-label>
        <mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" formControlName="visibility">
          <mat-option [value]="type.value" [attr.data-automation-id]="'library-visibility-option-' + type.value" *ngFor="let type of libraryType">
            {{ type.label | translate }}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field data-automation-id="library-description-properties-wrapper" class="app-library-metadata-form-field">
        <mat-label>{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
        <textarea
          matInput
          placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
          rows="3"
          formControlName="description"
          [errorStateMatcher]="matcher"
        ></textarea>
        <mat-error>
          {{ 'LIBRARY.ERRORS.DESCRIPTION_TOO_LONG' | translate }}
        </mat-error>
      </mat-form-field>
    </form>
  </mat-card-content>

  @if (canUpdateLibrary) {
  <mat-card-actions align="end">
    @if (form.enabled) {
    <button
      data-automation-id="app-library-metadata-form-cancel-button"
      mat-button
      (click)="cancel()">
      {{ 'LIBRARY.DIALOG.CANCEL' | translate }}
    </button>
    <button mat-button class="app-library-metadata-form__primary-action" [disabled]="form.invalid || form.pristine" (click)="update()">
      {{ 'LIBRARY.DIALOG.UPDATE' | translate }}
    </button>
    } @else {
    <button
      mat-button
      class="app-library-metadata-form__primary-action"
      (click)="toggleEdit()"
      data-automation-id="app-library-metadata-form-edit-button">
      {{ 'LIBRARY.DIALOG.EDIT' | translate }}
    </button>
    }
  </mat-card-actions>
  }
</mat-card>
}