<div id="topofcontainer"></div>
<div class="row" [id]="idprefix+form.get('id').value" *ngIf="form" [@fade-in-fast]>


    <div class="col-12" >
        <div class="row fieldset">
            <!-- SECTION INFO -->
            <div class="col-9 p-0" style="margin-bottom:2em;">
                <mat-card style="padding: 2em;">
                    <mat-card-content>
                        <app-dataset-profile-editor-section-component 
                            [form]="form"
                            [viewOnly]="viewOnly"
                            >
                        </app-dataset-profile-editor-section-component>
                    </mat-card-content>
                </mat-card>
                <div class="row justify-content-center mt-4 mb-2">
                    <div class="col-auto add-question" (click)="addFieldSetAfter(-9999,0)" *ngIf="!viewOnly">
                        <img src="/assets/images/editor/icons/add_input_set.svg" class="question-icon mr-2" alt="Add Question icon">
                        <span>{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
                    </div>
                </div>
            </div>
            <div class="col-2 col-xl-auto ml-4" *ngIf="!selectedFieldSetId && !viewOnly">

                <div class="row bg-white actions-list">
                    <nav>
                        <label class="action-list-label">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.GENERAL-TOOLS' | translate}}</label>
                        <ul class="list-unstyled">
                            <li class="mli">
                                <div class="action-list-item" (click)="onAddFieldSet()">
                                    <!-- <mat-icon class="action-list-icon">folder</mat-icon> -->
                                    <img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon" alt="Add Question icon">
                                    <span class="action-list-text" >{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
                                </div>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

    </div>

    <!-- FIELDSET INFO -->
    <div class="col-12" dragula="FIELDSETS" [(dragulaModel)]="form.get('fieldSets').controls">

        <div style="margin-bottom: 2em; position: relative;" class="row fieldset"
            *ngFor="let fieldset of form.get('fieldSets')?.controls ; let i=index" [id]="dragula_prefix+fieldset.get('id').value"
            >
            <!-- <h4 style="font-weight: bold" class="col-12">
            {{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.FIELDS-TITLE' |
            translate}}</h4> -->
                <!-- <div class="col-12"> -->

                <!-- <mat-card-title class="col">{{i + 1}}. {{getFieldTile(fieldControl, i)}}
            </mat-card-title> -->
                <!-- <button mat-icon-button type="button" class="deleteBtn col-auto"
                (click)="deleteFieldSet(selectedTocEntry.form, i);" [disabled]="viewOnly">
                <mat-icon>delete</mat-icon>
            </button> -->
            <div [id]="idprefix+fieldset.get('id').value" style="position: absolute; top: -7em; visibility: hidden;">
            </div>
            <div class="col-9 p-0">
                <mat-card
                    (click)="selectedFieldSetId = fieldset.get('id').value"
                    [ngClass]="{'field-container-active': fieldset.get('id').value === selectedFieldSetId}">
                        <mat-card-content>
    
                            <mat-card-header *ngIf="(fieldset.get('id').value === selectedFieldSetId) && !viewOnly">
                                <mat-icon class="handle" style="display:inline-block; margin: 0px auto; cursor: grab;transform: rotate(90deg); opacity: 0.3;">drag_indicator</mat-icon>
                            </mat-card-header>
                            <app-dataset-profile-editor-composite-field-component [form]="fieldset"
                                [viewOnly]="viewOnly"
                                [numbering]="numbering + '.'+ (i+1)"
                                [hasFocus]="fieldset.get('id').value === selectedFieldSetId">
                            </app-dataset-profile-editor-composite-field-component>
                        </mat-card-content>
                </mat-card>
            </div>

            <div class="col-2 col-xl-auto ml-4" *ngIf="selectedFieldSetId === fieldset.get('id').value &&(!viewOnly)">
                <div class="row bg-white actions-list stick-list">
                    <nav *ngIf="!viewOnly">
                        <label class="action-list-label">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.GENERAL-TOOLS' | translate}}</label>
                        <ul class="list-unstyled">
                            <li class="mli">
                                <div class="action-list-item" (click)="onAddFieldSet()">
                                    <!-- <mat-icon class="action-list-icon">folder</mat-icon> -->
                                    <img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon" alt="Add Question icon">
                                    <span class="action-list-text" >{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
                                </div>
                            </li>
        
        
                            <li class="mli">
                                <div class="action-list-item" (click)="onCloneFieldSet(fieldset)">
                                    <!-- <mat-icon class="action-list-icon">file_copy</mat-icon> -->
                                    <img src="/assets/images/editor/icons/clone.svg" class="input_icon" alt="Clone icon">
                                    <span class="action-list-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.CLONE' | translate}}</span>
                                </div>
                            </li>
                            
                            <li class="mli">
                                <div class="action-list-item" (click)="onRemoveFieldSet(selectedFieldSetId)">
                                    <mat-icon class="action-list-icon">delete</mat-icon>
                                    <span class="action-list-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}</span>
                                </div>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <div class="col-9">
                <div class="row justify-content-center mt-4 mb-2">
                    <div class="col-auto add-question" (click)="addFieldSetAfter(fieldset.get('ordinal').value, i)" *ngIf="!viewOnly">
                        <img src="/assets/images/editor/icons/add_input_set.svg" class="question-icon mr-2" alt="Add Question icon">
                        <span>{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
                    </div>
                </div>
            </div>

            <!-- </div> -->

            <!-- <div class="col-12"><button mat-button class="full-width" (click)="addField()"
            [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-FIELD'
            | translate}}</button></div> -->
        </div>


    </div>
    
</div>


<!-- COPIA -->
<!-- <div class="row"> -->

    <!-- SECTION INFO -->
    <!-- <app-dataset-profile-editor-section-component class="col-12 content-displayer p-2" style="margin-bottom: 2em;"
        [form]="selectedTocEntry.form"
        [viewOnly]="viewOnly"
        (fieldsetAdded)="displayItem(_findTocEntryById($event, getTocEntries())); onDataNeedsRefresh();">
    </app-dataset-profile-editor-section-component> -->

    <!-- FIELDSET INFO -->
    <!-- <div class="col-12 content-displayer p-2" style="margin-bottom: 2em;"
        *ngFor="let fieldset of selectedTocEntry.form.get('fieldSets')?.controls ; let i=index"> -->
        <!-- <h4 style="font-weight: bold" class="col-12">
    {{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.FIELDS-TITLE' |
    translate}}</h4> -->
        <!-- <div class="col-12"> -->

        <!-- <mat-card-title class="col">{{i + 1}}. {{getFieldTile(fieldControl, i)}}
    </mat-card-title> -->
        <!-- <button mat-icon-button type="button" class="deleteBtn col-auto"
        (click)="deleteFieldSet(selectedTocEntry.form, i);" [disabled]="viewOnly">
        <mat-icon>delete</mat-icon>
    </button> -->

        <!-- <app-dataset-profile-editor-composite-field-component class="p-0" [form]="fieldset"
            [indexPath]="'indexPath' + 'cf' + 'i'" [viewOnly]="viewOnly"
            [numbering]="selectedTocEntry.numbering + '.'+ (i+1)">
        </app-dataset-profile-editor-composite-field-component> -->
        <!-- </div> -->

        <!-- <div class="col-12"><button mat-button class="full-width" (click)="addField()"
        [disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-FIELD'
        | translate}}</button></div> -->
    <!-- </div> -->
<!-- </div> -->