<div *ngIf="hasTabs()" class="alfresco-tabs-widget">
    <div alfresco-mdl-tabs>
        <div class="mdl-tabs__tab-bar">
            <a *ngFor="let tab of visibleTabs; let isFirst = first"
               id="title-{{tab.id}}"
               [href]="'#' + tab.id"
               class="mdl-tabs__tab" [class.is-active]="isFirst">
                {{tab.title}}
            </a>
        </div>
        <div *ngFor="let tab of visibleTabs; let isFirst = first"
             class="mdl-tabs__panel"
             [class.is-active]="isFirst"
             [attr.id]="tab.id">
             <div *ngFor="let field of tab.fields">
                <form-field [field]="field.field"></form-field>
             </div>
        </div>
    </div>
</div>
