<ng-container *transloco="let t;">
  <div>
    <div class="settings-row g-0 row">
      <div class="col-auto {{fixedExtras() ? 'setting-title no-anim edit' : 'setting-title edit'}}">
        <h6 class="section-title">
          @if (labelId()) {
            <label [for]="labelId()">{{title()}}</label>
          } @else {
            {{title()}}
          }
          @if (titleExtraRef()) {
            <ng-container [ngTemplateOutlet]="titleExtraRef()" />
          }
        </h6>
      </div>
      <div class="col-auto text-end align-self-end justify-content-end">
        @if (showEdit()) {
        <button type="button" class="btn btn-icon edit-btn btn-sm btn-alignment" (click)="toggleEditMode()" [disabled]="!canEdit()">
          {{isEditMode() ? t('common.close') : (editLabel() || t('common.edit'))}}
        </button>
        }
        @if (titleActionsRef()) {
          <ng-container [ngTemplateOutlet]="titleActionsRef()" />
        }
      </div>
    </div>

    @if (isEditMode()) {
      <ng-container [ngTemplateOutlet]="valueEditRef()" />
    } @else {
      <span class="view-value" [class.non-selectable]="!canEdit() || !showEdit()" (click)="toggleEditMode()">
        <ng-container [ngTemplateOutlet]="valueViewRef()" />
      </span>
    }

    @if (subtitle()) {
      <div class="text-muted mt-2" [innerHTML]="subtitle()! | safeHtml"></div>
    }
  </div>
</ng-container>
