<section style="cursor: pointer">
    <header>
        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 sandbox_det">
            <app-avatar-pic [initials]="Initials(tileData.pgSkillTrackMstr.skillTrackName)"></app-avatar-pic>
            <h3>{{ tileData.pgSkillTrackMstr.skillTrackName }}</h3>
            <!-- <pre>{{tileData | json }}</pre> -->
            <span class="title" *ngFor="let subitem of skillTrackDet">
            <span *ngIf="subitem.skillMaster.skillTrackName == tileData.pgSkillTrackMstr.skillTrackName" >
                <span *ngFor="let item of subitem.skillTrackDtls" >
                    {{item.skillTrackDtlsName}}
                </span>
            </span>
            </span>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 iconClick">
            <div class="pull-left" *ngIf="othIcons">
                <mat-icon (click)="deleteSandbox(tileData.id, tileData)">delete</mat-icon>
                <mat-icon (click)="editSandbox(tileData.id, tileData)"> edit</mat-icon>
            </div>
            <div class="pull-left iconClick" (click)="showOtherIcons(tileData.id)" *ngIf="!othIcons">
                <mat-icon>
                    more_vert
                </mat-icon>
            </div>
        </div>
    </header>
    <footer>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 ">
            <div class="footer-desc">
                <div class="ftitle">Bundle ID</div>
                <div class="fcount"> {{tileData.bundleId}}</div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
            <div class="footer-desc">
                <div class="ftitle">Directory ID</div>
                <div class="fcount">{{tileData.directoryId}}</div>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ftext">{{tileData.description}}</div>
    </footer>
</section>
<!-- <pre> {{ tileData | json }}</pre> -->