<ng-container *transloco="let t;">
  <div class="settings-row g-0 row">
    <div class="row g-0 mb-2">
      <div class="col-auto">
        <h6 class="section-title" [id]="id() || title()">
          @if (labelId()) {
            <label class="reset-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">
        <button type="button" class="btn btn-icon edit-btn btn-sm btn-alignment" (click)="toggleViewMode()" [disabled]="!canEdit()">{{isEditMode() ? t('common.close') : t('common.edit')}}</button>
      </div>
    </div>
  </div>
</ng-container>
