<h4 style="font-weight: 300;display: inline;"><b>DYNAMIC FORM SETUP</b></h4>
<span class="label label-light-blue" style="display: inline;margin-left: 30px;">Add Mode</span><br>
<hr>

<div class="container">

    <!-- Header form start -->
    <form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
        <div class="clr-row">
            <div class="clr-col-md-4 clr-col-sm-12">
                <label for="form_name">Form Name</label>
                <input id="form_name" type="text" formControlName="form_name" placeholder="Enter Form Name"
                    class="clr-input">
                <div *ngFor="let error of fieldErrors">
                    <span *ngIf="error.field === 'form_name'" class="text text-danger">{{ error.message }}</span>
                </div>
            </div>
            <div class="clr-col-md-4 clr-col-sm-12">
                <label for="form_desc">Form Description</label>
                <input id="form_desc" type="text" formControlName="form_desc" placeholder="Enter Form Description"
                    class="clr-input">
                <div *ngFor="let error of fieldErrors">
                    <span *ngIf="error.field === 'form_desc'" class="text text-danger">{{ error.message }}</span>
                </div>
            </div>
            <div class="clr-col-md-4 clr-col-sm-12">
                <label for="related_to">Related To</label>
                <select id="related_to" formControlName="related_to" selected="null" class="clr-dropdown">
                    <option value="null">Choose Type</option>
                    <option *ngFor="let type of related_to" [ngValue]="type">{{ type }}</option>
                </select>
                <div *ngFor="let error of fieldErrors">
                    <span *ngIf="error.field === 'related_to'" class="text text-danger">{{ error.message }}</span>
                </div>
            </div>
            <div class="clr-col-md-4 clr-col-sm-12">
                <label for="page_event">Page Event</label>
                <select id="page_event" formControlName="page_event" selected="null" class="clr-dropdown">
                    <option value="null">Choose Type</option>
                    <option *ngFor="let type of page_event" [ngValue]="type">{{ type }}</option>
                </select>
                <div *ngFor="let error of fieldErrors">
                    <span *ngIf="error.field === 'page_event'" class="text text-danger">{{ error.message }}</span>
                </div>
            </div>
            <div class="clr-col-md-4 clr-col-sm-12">
                <label for="button_caption">Button Name</label>
                <input id="button_caption" type="text" formControlName="button_caption" placeholder="Enter Button Name"
                    class="clr-input">
                <div *ngFor="let error of fieldErrors">
                    <span *ngIf="error.field === 'button_caption'" class="text text-danger">{{ error.message }}</span>
                </div>
            </div>
        </div> <!-- row end -->

        <br>

        <p> Component Details </p>
        <hr>
        <!-----H-L LINE part(FormArray For Multiple Lines)---->
        <div class="clr-row">
            <div class="clr-col-lg-12">
                <table class="table" style="width:100%;" formArrayName="components">
                    <thead>
                        <tr>
                            <th class="left" style="width:125px;">Label</th>
                            <th class="left" style="width:125px;">Type</th>
                            <th class="left" style="width:125px;">Mapping</th>
                            <th class="right" style="width:125px;">Readonly</th>
                            <th class="right" style="width:125px;">Drop Values</th>
                            <!-- <th *ngIf="controls.length > 1" class="right" style="width:125px;">{{ controls.length > 1 ? 'Actions' : '' }}Actions</th> -->
                            <th class="right" style="width:125px;">{{ controls.length > 1 ? 'Actions' : '' }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let item of controls; let i=index" [formGroupName]="i">
                            <td class="left">
                                <input type="text" [attr.id]="'label' + i" formControlName="label"
                                    placeholder="Enter Label" style="width:180px" class="clr-input">
                            </td>
                            <td class="left">
                                <select colspan="2" formControlName="type" selected="null" style="width:180px"
                                    class="clr-dropdown">
                                    <option value="null">Choose Field Type</option>
                                    <option *ngFor="let type of field_type" [ngValue]="type">{{ type }}</option>
                                </select>
                            </td>
                            <td class="left">
                                <select colspan="2" [attr.id]="'mapping' + i" selected="null" formControlName="mapping"
                                    style="width:180px" class="clr-dropdown">
                                    <option value="null">Choose Mapping</option>
                                    <option *ngFor="let mapping of getFilteredMappings(i)" [ngValue]="mapping.value">{{
                                        mapping.label
                                        }}
                                    </option>
                                </select>
                            </td>
                            <td class="center">
                                <div class="toggle-switch">
                                    <input [attr.id]="'readonly' + i" type="checkbox" formControlName="readonly" />
                                    <label [for]="'readonly' + i"></label>
                                </div>
                            </td>
                            <td class="left">
                                <ng-container *ngIf="controls[i].get('type').value === 'dropdown'">
                                    <div style="display:flex; flex-wrap:wrap; gap:5px; margin-bottom:5px;">
                                        <span *ngFor="let val of getDropValuesArray(i)" class="label label-blue">
                                            {{ val }}
                                            <clr-icon shape="times" (click)="removeDropValue(i, val)"
                                                style="cursor:pointer; margin-left:5px;"></clr-icon>
                                        </span>
                                    </div>
                                    <input type="text" placeholder="Type & Enter"
                                        (keydown.enter)="$event.preventDefault(); addDropValue(i, $event)"
                                        style="width:180px" class="clr-input">
                                    <!-- Hidden input to bind formControl -->
                                    <input type="text" [attr.id]="'drop_values' + i" formControlName="drop_values"
                                        hidden>
                                </ng-container>
                            </td>
                            <td style="width:40px;">
                                <a *ngIf="controls.length > 1" (click)="onRemoveLines(i)">
                                    <clr-icon shape="trash" class="is-error"></clr-icon>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                    <button type="button" class="btn btn-primary button1" (click)="onAddLines()">
                        <clr-icon shape="plus"></clr-icon>
                    </button>
                </table>
            </div>
        </div>
        <br>
        <div class="center">
            <button type="submit" class="btn btn-primary" [disabled]="!entryForm.valid">SUBMIT</button>
        </div>
    </form>
</div>