<app-hint-box i18n>
  The settings here apply to the record type overall and take effect everywhere
  the record is displayed, including lists, forms and other views.
</app-hint-box>

<h2 i18n>General Settings of "{{ entityConstructor().label }}" Records</h2>

<form [formGroup]="basicSettingsForm">
  <mat-tab-group>
    <mat-tab label="Basics" i18n-label>
      <div class="grid-layout flex-grow margin-top-regular">
        <div class="entity-form-cell">
          <mat-form-field>
            <mat-label i18n>Label</mat-label>
            <input formControlName="label" matInput #formLabel />
          </mat-form-field>

          <mat-form-field floatLabel="always">
            <mat-label>
              <span i18n>Label (Plural)</span>
              &nbsp;
              <fa-icon
                icon="question-circle"
                matTooltip="Optionally you can define how multiple records of this record type should be called, e.g. in lists."
                i18n-matTooltip
              ></fa-icon>
            </mat-label>
            <input
              formControlName="labelPlural"
              matInput
              [placeholder]="formLabel.value"
            />
          </mat-form-field>

          <app-icon-input [control]="iconControl"></app-icon-input>

          <app-conditional-color-config
            formControlName="color"
            [entityConstructor]="entityConstructor()"
            [(isConditionalMode)]="isConditionalColor"
          ></app-conditional-color-config>

          <mat-checkbox formControlName="enableUserAccounts">
            <span i18n>Enable User Accounts</span>
            &nbsp;
            <fa-icon
              icon="question-circle"
              matTooltip="Check this if records of this type can have associated user accounts with login credentials. This allows assigning roles and managing access."
              i18n-matTooltip
            ></fa-icon>
          </mat-checkbox>
        </div>

        <div class="entity-form-cell">
          <mat-form-field>
            <mat-label>
              <span i18n>Generated Title of Record</span>
              &nbsp;
              <fa-icon
                icon="question-circle"
                matTooltip="Select the fields that should be used (in that order) to generate a simple name/title for a record. This generated title is used in previews, search and for form fields that allow to select a record of this type. (Only text fields can be used here)"
                i18n-matTooltip
              ></fa-icon>
            </mat-label>
            <app-basic-autocomplete
              formControlName="toStringAttributes"
              #formDataType
              [options]="toStringAttributesOptions()"
              [optionToString]="objectToLabel"
              [valueMapper]="objectToValue"
              [multi]="true"
              [reorder]="true"
            ></app-basic-autocomplete>
          </mat-form-field>

          <!-- Entity Block Tooltip Configuration Section -->
          <mat-expansion-panel
            [(expanded)]="showTooltipDetails"
            style="margin: 0.5em"
          >
            <mat-expansion-panel-header>
              <mat-panel-title>
                <span i18n>Tooltip Configuration</span>
                <fa-icon
                  icon="question-circle"
                  class="margin-left-small"
                  matTooltip="Customise the details shown when hovering over record type in lists and forms."
                  i18n-matTooltip
                ></fa-icon>
              </mat-panel-title>
            </mat-expansion-panel-header>

            <mat-form-field
              formGroupName="toBlockDetailsAttributes"
              floatLabel="always"
            >
              <mat-label>
                <span i18n>Title Field</span>
                &nbsp;
                <fa-icon
                  icon="question-circle"
                  matTooltip="Select the main field to display as the tooltip header. This should be a descriptive field like 'name' or 'title'."
                  i18n-matTooltip
                ></fa-icon>
              </mat-label>
              <app-entity-field-select
                formControlName="title"
                [entityType]="entityConstructor()"
                [hideOption]="hideNonTextFields"
              ></app-entity-field-select>
            </mat-form-field>

            <mat-form-field
              formGroupName="toBlockDetailsAttributes"
              floatLabel="always"
            >
              <mat-label>
                <span i18n>Additional Detail Fields</span>
                &nbsp;
                <fa-icon
                  icon="question-circle"
                  matTooltip="Select additional fields to display in the tooltip. These will be shown below the title and provide extra context about the record."
                  i18n-matTooltip
                ></fa-icon>
              </mat-label>
              <app-entity-field-select
                formControlName="fields"
                [entityType]="entityConstructor()"
                [multi]="true"
                [hideOption]="hideNonTextFields"
              ></app-entity-field-select>
            </mat-form-field>

            <mat-form-field
              formGroupName="toBlockDetailsAttributes"
              floatLabel="always"
            >
              <mat-label>
                <span i18n>Image Field (Optional)</span>
                &nbsp;
                <fa-icon
                  icon="question-circle"
                  [matTooltip]="
                    hasImageFields()
                      ? 'Optional: Select an image field to display a photo in the tooltip. Only fields that contain images (like profile photos) can be selected here.'
                      : 'No image fields are available for this record type.'
                  "
                  i18n-matTooltip
                ></fa-icon>
              </mat-label>
              <app-entity-field-select
                formControlName="image"
                [entityType]="entityConstructor()"
                [hideOption]="showOnlyImageFields"
                placeholder=""
              ></app-entity-field-select>
              @if (!hasImageFields()) {
                <mat-hint i18n>
                  This record type has no image fields. Add fields with dataType
                  'file' or 'photo' to enable this option.
                </mat-hint>
              }
            </mat-form-field>

            <button
              mat-stroked-button
              class="margin-top-regular"
              (click)="clearToBlockAttributes()"
              i18n
            >
              Reset tooltip settings
            </button>
          </mat-expansion-panel>
        </div>
      </div>
    </mat-tab>

    <!--
        ADVANCED SETTINGS
        -->
    <mat-tab
      label="Configure PII / Anonymization"
      i18n-label
      [disabled]="false"
    >
      <div class="margin-top-regular overflow-table">
        <div class="flex-row align-center">
          <mat-checkbox
            [checked]="showPIIDetails()"
            (change)="toggleAnonymizationTable($event)"
            i18n
            >Has personal information (PII)</mat-checkbox
          >
          <app-help-button
            text="If the fields of this record type contain personal, sensitive information you can mark this here. Checking this box enables the 'anonymization' feature. This allows users to anonymize records of this type instead of just archiving or deleting them."
            i18n-text
          ></app-help-button>
        </div>

        @if (showPIIDetails()) {
          <div>
            <p i18n>
              Configure how records of this type can be anonymized. Users can
              "anonymize" a record as an alternative to just archiving it
              (keeping all personal details) or deleting it (losing any trace of
              the record, even in reports). Select below which fields can be
              "retained" to keep some limited data for statistical reporting and
              which fields have to be removed because they contain personal
              details.
            </p>
            <mat-table [dataSource]="fieldAnonymizationDataSource()">
              <ng-container matColumnDef="label">
                <mat-cell *matCellDef="let anonymizeData">
                  {{ anonymizeData.label }}
                </mat-cell>
              </ng-container>
              <ng-container matColumnDef="field">
                <mat-cell *matCellDef="let anonymizeData">
                  <app-anonymize-options
                    [value]="anonymizeData.field.anonymize"
                    (valueChange)="
                      changeFieldAnonymization(anonymizeData.field, $event)
                    "
                  ></app-anonymize-options>
                </mat-cell>
              </ng-container>
              <mat-row
                *matRowDef="let row; columns: ['label', 'field']"
              ></mat-row>
            </mat-table>
          </div>
        }
      </div>
    </mat-tab>
  </mat-tab-group>
</form>

./admin-entity-general-settings.component.scss

@use "mixins/grid-layout";

.grid-layout {
  @include grid-layout.adaptive(
    $min-block-width: 250px,
    $max-screen-width: 414px
  );
}
.entity-form-cell {
  display: flex;
  flex-direction: column;
  /* set the width of each form field to 100% in every form component that is a descendent of the columns-wrapper class */
  mat-form-field {
    width: 100%;
  }
}
.overflow-table {
  max-height: calc(100vh - 250px);
  overflow: auto;
}