<form [formGroup]="translationForm">
    <div
        class="inline-form"
        formArrayName="translationBoxes"
        *ngFor="let translation of translationBoxes.controls; let i = index"
    >
        <ng-container [formGroupName]="i">
            <mat-form-field>
                <input formControlName="original" matInput placeholder="{{ 'Original' | translate }}" />
                <mat-error translate>You have to fill this field.</mat-error>
            </mat-form-field>
            <mat-icon>arrow_forward</mat-icon>
            <mat-form-field>
                <input formControlName="translation" matInput placeholder="{{ 'Translation' | translate }}" />
                <mat-error translate>You have to fill this field.</mat-error>
            </mat-form-field>
            <button
                mat-icon-button
                type="button"
                (click)="onRemoveTranslation(i)"
                matTooltip="{{ 'Cancel' | translate }}"
            >
                <mat-icon>close</mat-icon>
            </button>
        </ng-container>
    </div>
</form>

<!-- Add new translation button -->
<button mat-button (click)="addNewTranslation()">
    <mat-icon>add</mat-icon>{{ 'Add new custom translation' | translate }}
</button>
