<div class="no-gutter">
    <div class="{{showDetail? 'col-md-4 hidden-xs hidden-sm':'col-xs-12 col-md-4'}} vertical-right-divider">
        <router-outlet name="master"></router-outlet>
    </div>
    <div class="{{showDetail? 'col-xs-12 col-md-8': 'hidden'}}">
        <router-outlet name="detail">
        </router-outlet>
    </div>
    <div class="{{showDetail? 'hidden': 'hidden-xs hidden-sm col-md-8 container-no-items'}}">
        <div *ngIf="currentRoute === 'workbaskets'" class="center-block no-detail">
            <h3 class="grey">Select a workbasket</h3>
            <svg-icon class="img-responsive empty-icon" src="./assets/icons/wb-empty.svg"></svg-icon>
        </div>
        <div *ngIf="currentRoute === 'classifications'" class="center-block no-detail">
            <h3 class="grey">Select a classification</h3>
            <svg-icon class="img-responsive empty-icon" src="./assets/icons/classification-empty.svg"></svg-icon>
        </div>
        <div *ngIf="currentRoute === 'tasks'" class="center-block no-detail">
            <h3 class="grey">Select a Task</h3>
            <span class="glyphicon glyphicon-object-align-bottom"></span>
        </div>
    </div>
</div>
