<div class="datatype-description" *ngIf="inputData.datatype_description">
    <label class="grey-label"> Datatype Description:</label>
    <div class="datatype-text">
        <span>{{inputData.datatype_description}}</span>
    </div>
</div>
<div class="annotate-container">
    <label class="grey-label">Table Description:</label>
    <div class="annotate-text pt-3">
        <ngx-annotate-text [(annotations)]="annotations" [removable]="true" [text]="inputData.text" annotationClass="my-annotation" #annotateText>
        </ngx-annotate-text>
    </div>
</div>
<div class="row mt-3">
    <div class="col-12 ">
        <div class="tags-container pb-1">
            <label class="grey-label ps-3">Tags:</label>
            <button *ngFor="let data of inputData.class_details" type="button" class="btn btn-primary m-1 " (click)="addAnnotation(data)">
                {{data}}
            </button>
        </div>
    </div>
    <div class="col-md-12 mt-3">
        <button class="btn btn-secondary" *ngIf="showAddTag" (click)="showNewTags()"><i class="fa fa-plus-circle"> Add
                Tag</i></button>
        <div class="d-flex" *ngIf="!showAddTag">
            <!-- <label for="" class="grey-label mt-2 me-2"> Select Tag:  </label> -->
            <ng-select name="typeofElement" [items]="tagsList" class="pl-4 col-md-3 me-5" placeholder="Select Tag" [clearable]="false" dropdownPosition="top" [(ngModel)]="selectedTag" bindValue="value" bindLabel="label">
            </ng-select>
            <button class="btn btn-primary me-2" [disabled]="!selectedTag" (click)="addTag()">Add Tag</button>
            <button class="btn btn-secondary" (click)="showAddTag = true; selectedTag = null">Cancel</button>
        </div>

    </div>
</div>
<div class="float-end mb-2">
    <button type="button" class="btn btn-primary me-2" (click)="saveAnnotations()">Save</button>
    <button type="button" class="btn btn-secondary" (click)="closePopupEmitter()">Close</button>
</div>