<div class="row">
    <div class="col-12 mt-3 mb-3">
        <h2>Quest Entries</h2>
        <ngb-accordion>
            <ngb-panel *ngFor="let quest of quests; let i = index" id="toggle-{{ i }}" title="{{ quest.QuestName }}">
                <ng-template ngbPanelContent>
                    <app-text id="{{ i }}-QuestName" label="Name" [(text)]="quest.QuestName"></app-text>
                    <app-number id="{{ i }}-QuestID" label="ID" [(number)]="quest.QuestID"></app-number>
                    <app-text id="{{ i }}-QuestDescription" label="Description"
                              [(text)]="quest.QuestDescription"></app-text>
                    <h6>Feat Unlocks
                        <button class="btn btn-primary btn-sm" (click)="addQuestFeat(quest)">+</button>
                    </h6>
                    <p *ngIf="quest.UnlockFeatNames === undefined">
                        <em>Click + above to add Feat Unlocks</em>
                    </p>
                    <app-text id="{{ i }}-{{ j }}-feat"
                              *ngFor="let feat of quest.UnlockFeatNames; index as j; trackBy: trackByFn"
                              label="Unlock {{ j }}" [(text)]="quest.UnlockFeatNames[j]" postButtonText="-"
                              (postButton)="removeQuestFeat(quest, j)"></app-text>
                    <h6>Engram Unlocks
                        <button class="btn btn-primary btn-sm" (click)="addEngramClass(quest)">+</button>
                    </h6>
                    <p *ngIf="quest.CompleteGiveEngramClasses === undefined">
                        <em>Click + above to add Engram Unlocks</em>
                    </p>
                    <app-text id="{{ i }}-{{ j }}-engram"
                              *ngFor="let engram of quest.CompleteGiveEngramClasses; index as j"
                              label="Engram {{ j }}" [(text)]="engram.blueprint" postButtonText="-"
                              (postButton)="removeEngramClass(quest, j)"></app-text>
                    <h6>Points of Interest
                        <button class="btn btn-primary btn-sm">+</button>
                    </h6>
                    <p *ngIf="quest.QuestPointsOfInterest === undefined">
                        <em>Click + above to add Point of Interest</em>
                    </p>
                    <div class="card mb-3" *ngFor="let poi of quest.QuestPointsOfInterest; index as j">
                        <div class="card-body">
                            <app-text id="{{ i }}-{{ j }}-poi-PointOfInterestName"
                                      label="Name" [(text)]="poi.PointOfInterestName"></app-text>
                            <app-number id="{{ i }}-{{ j }}-poi-PointOfInterestID"
                                        label="ID" [(number)]="poi.PointOfInterestID"></app-number>
                            <app-number id="{{ i }}-{{ j }}-poi-WorldMapPosition-X"
                                        label="Map X Pos" [(number)]="poi.WorldMapPosition.X"></app-number>
                            <app-number id="{{ i }}-{{ j }}-poi-WorldMapPosition-Y"
                                        label="Map Y Pos" [(number)]="poi.WorldMapPosition.Y"></app-number>
                            <app-text id="{{ i }}-{{ j }}-poi-CompletedIcon"
                                        label="Completed Icon" [(text)]="poi.CompletedIcon.texture"></app-text>
                            <app-text id="{{ i }}-{{ j }}-poi-UncompletedIcon"
                                      label="Uncompleted Icon" [(text)]="poi.UncompletedIcon.texture"></app-text>
                            <h6>Feat Unlocks
                                <button class="btn btn-primary btn-sm" (click)="addQuestFeat(poi)">+</button>
                            </h6>
                            <p *ngIf="poi.UnlockFeatNames === undefined">
                                <em>Click + above to add Feat Unlocks</em>
                            </p>
                            <app-text id="{{ i }}-{{ j }}-={{ k }}feat"
                                      *ngFor="let feat of poi.UnlockFeatNames; index as k; trackBy: trackByFn"
                                      label="Unlock {{ k }}" [(text)]="poi.UnlockFeatNames[k]" postButtonText="-"
                                      (postButton)="removeQuestFeat(poi, k)"></app-text>
                        </div>
                    </div>
                </ng-template>
            </ngb-panel>
        </ngb-accordion>
    </div>
</div>
