<div class="dg-wrapper" *ngIf="formSetup; else loadingTpl">

    <!-- HEADER SECTION -->
    <div class="clr-row" style="margin-bottom: 20px;">
        <div class="clr-col-8">
            <h3>{{ formSetup.form_name }} Form Data</h3>
        </div>
        <div class="clr-col-4" style="text-align: right;">
            <button class="btn btn-primary" (click)="goToAdd()" *ngIf="viewMode === 'list'">
                <clr-icon shape="plus"></clr-icon> ADD NEW
            </button>
            <button class="btn btn-outline" (click)="cancel()" *ngIf="viewMode !== 'list'">
                CANCEL
            </button>
        </div>
    </div>

    <!-- LIST VIEW: DATA GRID -->
    <div *ngIf="viewMode === 'list'">
        <clr-datagrid>
            <clr-dg-column *ngFor="let col of gridColumns" [clrDgField]="col.field">
                {{ col.header }}
            </clr-dg-column>

            <clr-dg-column>Actions</clr-dg-column>

            <clr-dg-row *clrDgItems="let item of gridData" [clrDgItem]="item">
                <clr-dg-cell *ngFor="let col of gridColumns">
                    {{ item[col.field] }}
                </clr-dg-cell>
                <clr-dg-cell>
                    <button class="btn btn-sm btn-icon btn-primary" (click)="goToEdit(item)" title="Edit">
                        <clr-icon shape="pencil"></clr-icon>
                    </button>
                    <button class="btn btn-sm btn-icon btn-danger" (click)="onDelete(item)" title="Delete">
                        <clr-icon shape="trash"></clr-icon>
                    </button>
                </clr-dg-cell>
            </clr-dg-row>

            <clr-dg-footer>
                <clr-dg-pagination #pagination [clrDgPageSize]="10">
                    <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Items per page</clr-dg-page-size>
                    {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
                    of {{pagination.totalItems}} items
                </clr-dg-pagination>
            </clr-dg-footer>
        </clr-datagrid>
    </div>

    <!-- ADD/EDIT VIEW: ENTRY FORM -->
    <div *ngIf="viewMode === 'add' || viewMode === 'edit'" class="entry-pg pad-16">
        <h4><b>{{ viewMode === 'add' ? 'ENTRY FORM' : 'EDIT FORM' }}</b></h4>
        <br />

        <section class="form-block" style="margin-top:20px">
            <form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
                <table class="table">
                    <tbody>
                        <tr *ngFor="let comp of formSetup.components">
                            <!-- TEXTFIELD -->
                            <ng-container *ngIf="isTextField(comp.type)">
                                <td style="width:150px;"><b>{{ comp.label }}:</b></td>
                                <td>
                                    <input colspan="2" type="text" [formControlName]="comp.generatedControlName"
                                        [placeholder]="comp.label" class="clr-input"
                                        style="width: 100%; max-width: 300px;">
                                    <div *ngIf="dynamicForm.get(comp.generatedControlName)?.invalid && (dynamicForm.get(comp.generatedControlName)?.dirty || dynamicForm.get(comp.generatedControlName)?.touched)"
                                        class="text-danger">
                                        {{ comp.label }} is required
                                    </div>
                                </td>
                            </ng-container>

                            <!-- LONGTEXT -->
                            <ng-container *ngIf="isTextArea(comp.type)">
                                <td style="width:150px;"><b>{{ comp.label }}:</b></td>
                                <td>
                                    <textarea rows="4" cols="50" colspan="2" class="clr-textarea"
                                        style="width: 100%; max-width: 400px;"
                                        [formControlName]="comp.generatedControlName"></textarea>
                                </td>
                            </ng-container>

                            <!-- CHECKBOX -->
                            <ng-container *ngIf="isCheckbox(comp.type)">
                                <td style="width:150px;"><b>{{ comp.label }}</b></td>
                                <td>
                                    <input colspan="2" type="checkbox" [formControlName]="comp.generatedControlName"
                                        class="clr-checkbox">
                                </td>
                            </ng-container>

                            <!-- AUTOCOMPLETE -->
                            <ng-container *ngIf="isAutocomplete(comp.type)">
                                <td style="width:150px;"><b>{{ comp.label }}</b></td>
                                <td>
                                    <input colspan="2" type="text" [formControlName]="comp.generatedControlName"
                                        autocomplete="on" class="clr-input" style="width: 100%; max-width: 300px;">
                                </td>
                            </ng-container>

                            <!-- DROPDOWN -->
                            <ng-container *ngIf="isDropdown(comp.type)">
                                <td style="width:150px;"><b>{{ comp.label }}:</b></td>
                                <td>
                                    <select colspan="2" [formControlName]="comp.generatedControlName" class="clr-select"
                                        style="width: 100%; max-width: 300px;">
                                        <option value="">Select {{ comp.label }}</option>
                                        <option *ngFor="let opt of getDropdownOptions(comp.drop_values)" [value]="opt">
                                            {{ opt }}</option>
                                    </select>
                                    <div *ngIf="dynamicForm.get(comp.generatedControlName)?.invalid && (dynamicForm.get(comp.generatedControlName)?.dirty || dynamicForm.get(comp.generatedControlName)?.touched)"
                                        class="text-danger">
                                        {{ comp.label }} is required
                                    </div>
                                </td>
                            </ng-container>

                            <!-- DATE -->
                            <ng-container *ngIf="isDate(comp.type)">
                                <td style="width:150px;"><b>{{ comp.label }}:</b></td>
                                <td>
                                    <input colspan="2" type="date" [formControlName]="comp.generatedControlName"
                                        class="clr-input" style="width: 100%; max-width: 300px;">
                                    <div *ngIf="dynamicForm.get(comp.generatedControlName)?.invalid && (dynamicForm.get(comp.generatedControlName)?.dirty || dynamicForm.get(comp.generatedControlName)?.touched)"
                                        class="text-danger">
                                        {{ comp.label }} is required
                                    </div>
                                </td>
                            </ng-container>

                            <!-- TOGGLE -->
                            <ng-container *ngIf="isToggle(comp.type)">
                                <td style="width:150px;"><b>{{ comp.label }}:</b></td>
                                <td>
                                    <div class="toggle-switch">
                                        <input type="checkbox" [id]="comp.generatedControlName"
                                            [formControlName]="comp.generatedControlName">
                                        <label [for]="comp.generatedControlName"></label>
                                    </div>
                                </td>
                            </ng-container>

                        </tr>
                    </tbody>
                </table>
                <br>
                <div style="margin-top: 20px;">
                    <button type="submit" class="btn btn-primary" [disabled]="!dynamicForm.valid">
                        {{ viewMode === 'add' ? (formSetup.button_caption || 'SUBMIT') : 'UPDATE' }}
                    </button>
                    <button type="button" class="btn btn-outline" (click)="cancel()">CANCEL</button>
                </div>
            </form>
        </section>
    </div>

</div>

<ng-template #loadingTpl>
    <div style="text-align: center; padding: 50px;" *ngIf="loading">
        <span class="spinner"></span> Loading form configuration...
    </div>
    <div *ngIf="error" class="alert alert-danger" style="margin-top: 20px;">{{ error }}</div>
</ng-template>