<div class="vertical-table" style="position:relative;">
    <div class="vertical-tablerow" [ngStyle]="{'height': height + 'px'}">
        <div *ngIf="rotate;else elseBlock" style="width:44px;" class="vertical-tablecol verticalalign-tableft" [ngClass]="{'tabposition-top': (tabPosition==='top')}">
            <ul #tabId id="tabclass" [ngStyle]="{'top': rotatedtabsHeight + 'px'}" style="padding:1px" class="verticalnavtab verticalnavtab-left">
                <li *ngFor="let tabnode of tabCollection">
                    <div class="defaultnode" [ngClass]="{'leftactiverotatetab':tabnode.active,'disabled-tab':tabnode.disabled}" (click)="onVerticalTabClick(tabnode)"
                        [ngStyle]="{'color': tabnode.amexiocolor}">
                        <span #icon *ngIf="tabnode.icon" [ngClass]="tabnode.icon" style="padding-right:8px" aria-hidden="true"></span>
                        <span>{{tabnode.title}} {{tabnode.amexiotabtitle}}</span>
                        <span *ngIf="closable" class="tablecol">
                 <amexio-c-icon key="tab_close" (onClick)="tabPillClose(tabnode)" style="padding-left:5px;float:right"></amexio-c-icon>
                  </span>
                    </div>
                </li>
            </ul>
        </div>
        <ng-template #elseBlock>
            <div class="vertical-tablecol verticalalign-tableft" [ngClass]="{'tabposition-top': (tabPosition==='top'),'tabposition-bottom':(tabPosition==='bottom')}">
                <div #tab class="verticalnavtab verticalnavtab-left">
                    <ul>
                        <li *ngFor="let tabnode of tabCollection">
                            <div class="defaultnode" [ngClass]="{'leftactivetab':tabnode.active,'disabled-tab':tabnode.disabled}" (click)="onVerticalTabClick(tabnode)"
                                [ngStyle]="{'color': tabnode.amexiocolor}">
                                <span *ngIf="tabnode.icon" [ngClass]="tabnode.icon" style="padding-right:8px" aria-hidden="true"></span>
                                <span>{{tabnode.title}}
                                    {{tabnode.amexiotabtitle}}
                                </span>
                                <span *ngIf="closable" class="tablecol">
                <amexio-c-icon key="tab_close" (onClick)="tabPillClose(tabnode)" style="padding-left:5px;float:right"></amexio-c-icon>
              </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </ng-template>
        <div class="vertical-tablecol verticalalign-tabcontent">
            <div class="tabcontent" [attr.id]="componentId">
                <ng-content></ng-content>
                <ng-template #target></ng-template>
            </div>

        </div>
    </div>
</div>