<form class="field-layout {{config.mode}}">
    <div [ngClass]="rowClass" *ngFor="let row of fieldGrid; index as i">

        <div *ngFor="let col of row.cols; index as colNumber"
             [class.field-column-bordered]="row.cols.length > 1 && colNumber < row.cols.length - 1"
             [ngClass]="colClass">

            <ng-container *ngIf="col.field">
                <div class="label-container">
                    <strong>
                        <label [ngClass]="labelClass">{{col.field.label | uppercase}}</label>:
                        <ng-container *ngIf="col.field.definition.required && config.mode === 'edit'">
                            <span class="required">*</span>
                        </ng-container>
                    </strong>
                </div>
                <div class="d-flex">
                    <div class="flex-grow-1 text-break">
                        <scrm-field [type]="col.field.type"
                                    [mode]="config.mode"
                                    [klass]="inputClass"
                                    [field]="col.field"
                                    [record]="record">
                        </scrm-field>
                    </div>
                    <div>
                        <button type="button" class="record-action-button"
                                (click)="this.dataSource.getEditAction()"
                                *ngIf="col.field.definition.inline_edit !== false && !col.field.definition.readonly && this.dataSource.inlineEdit && config.mode === 'detail'">
                            <scrm-image class="sicon" image="pencil"></scrm-image>
                        </button>
                    </div>
                </div>
            </ng-container>

            <ng-container *ngIf="col.actionSlot">
                <ng-content select="[field-grid-actions]"></ng-content>
            </ng-container>

            <ng-container *ngIf="col.specialSlot">
                <ng-content select="[field-grid-special]"></ng-content>
            </ng-container>

            <div class="field-separation mt-2" *ngIf="col.field && i < fieldGrid.length - 1"></div>
        </div>
    </div>
</form>
