<div class="row">
    <div class="col-12 mt-3" *ngFor="let quest of quests">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">{{ quest.QuestID }} - {{ quest.QuestName }}</h4>
                <p class="card-text">{{ quest.QuestDescription }}</p>
            </div>
            <div class="card-header" *ngIf="quest.UnlockFeatNames">Feat Unlocks</div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item" *ngFor="let feat of quest.UnlockFeatNames">{{ availableFeats[feat] }}</li>
            </ul>
            <div class="card-header" *ngIf="quest.CompleteGiveEngramClasses">Engram Unlocks</div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item" *ngFor="let engram of quest.CompleteGiveEngramClasses">
                    Blueprint: {{ engram.blueprint }}
                </li>
            </ul>
            <div class="card-header" *ngIf="quest.QuestPointsOfInterest">Points of Interest</div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item" *ngFor="let poi of quest.QuestPointsOfInterest">
                    <strong>
                        {{ poi.PointOfInterestID }} - {{ poi.PointOfInterestName }}
                        (X: {{ poi.WorldMapPosition.X }} - Y: {{ poi.WorldMapPosition.Y }})
                    </strong>
                    <ul *ngIf="poi.UnlockFeatNames">
                        <li *ngFor="let feat of poi.UnlockFeatNames">{{ availableFeats[feat] }}</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
