<div id="dataservice-main-container" class="container-fluid" ng-controller="DataServicePageController as vmmain">

    <div class="ds-navbar-container">
        <ng-include src="'plugins/vdb-bench-dataservice/dataservice-navbar.html'"></ng-include>
    </div>

    <div class="ds-navbar-contents">
        <!-- breadcrumbs -->
        <div class="container-fluid dsb-breadcrumbs">
            <div class="row-fluid">
                <ol class="breadcrumb">
                    <li ng-repeat="page in vmmain.selectedPageCrumbs()">
                        <a ng-if="!$last" ng-click="vmmain.selectPage(page.id)">
                            <span>{{page.title}}</span>
                        </a>
                        <label ng-if="$last" class="active">
                            {{page.title}}
                        </label>
                    </li>
                </ol>
            </div>
        </div>

        <!-- page content -->
        <div id="dataservice-page-content-outer">

            <div ng-show="! vmmain.isPreferencePage()" tabindex="-1">
                <div class="pref-page-icon-container" tabindex="-1">
                    <a class="pref-page-icon fa fa-cog" 
                       href="" 
                       tabindex="-1"
                       ng-click="vmmain.openPreferences()"></a>
                </div>
            </div>

            <div ng-show="! vmmain.isPreferencePage()">
                <page-help-control
	                help-id="{{vmmain.selectedPageHelpId()}}"
	                container-id="dataservice-page-content-outer" />
            </div>

            <div id="dataservice-page-content-inner" class="ds-page-content">
                <h2 class="ds-page-title" ng-show="vmmain.selectedPage.showTitle!==false">
                    <span>{{vmmain.selectedPageTitle()}}</span>
                </h2>

                <ng-include src="vmmain.selectedPage.template"></ng-include>
            </div>
        </div>
    </div>
</div>
