<app-section-card [title]="'builder.languagesTab' | translate">
  <app-locale-tabs [locales]="supportedLocales()" [defaultLocale]="tenantDefaultLocale()" (activeLocale)="onActiveLocaleChange($event)" />
  <small class="field-desc">{{ 'builder.languagesTabDesc' | translate }}</small>
  @if (fieldError('localization.supportedLocales'); as msg) {
    <p class="editor-error" role="alert">{{ msg }}</p>
  }

  <div class="editor-actions">
    <app-input
      [ngModel]="newLocale()"
      (ngModelChange)="updateNewLocale($event)"
      [ariaLabel]="'builder.newLanguageLabel' | translate"
      placeholder="de"
    />
    <app-button variant="primary" (click)="addLocale()">{{ 'builder.addLanguage' | translate }}</app-button>
  </div>
  @if (addLocaleError(); as addError) {
    <p class="editor-error" role="alert">{{ addError }}</p>
  } @else {
    <small class="field-desc">{{ 'builder.newLanguageDesc' | translate }}</small>
  }

  <div class="stack-list">
    @for (code of locales(); track code) {
      <article class="sub-card">
        <div class="editor-actions">
          <h3>{{ code }}</h3>
          <div class="editor-actions">
            @if (code === defaultLocale()) {
              <span>{{ 'builder.defaultLanguageLabel' | translate }}</span>
            } @else {
              <app-button variant="secondary" size="sm" (click)="setDefault(code)">{{ 'builder.setDefaultLanguage' | translate }}</app-button>
              <app-button variant="secondary" size="sm" (click)="removeLocale(code)">{{ 'builder.removeLanguage' | translate }}</app-button>
            }
          </div>
        </div>
      </article>
    }
  </div>
</app-section-card>

<app-confirm-dialog
  [open]="!!pendingRemoveLocale()"
  [titleText]="'builder.confirmRemoveLanguage' | translate"
  [message]="'builder.confirmRemoveLanguage' | translate"
  [destructive]="true"
  (confirmed)="confirmRemoveLocale()"
  (cancelled)="pendingRemoveLocale.set(null)"
/>
