<div class="app-container">
  <!-- Local nav. -->
  <kbn-top-nav name="management-subnav" data-test-subj="managementNav">
    <!-- Transcluded elements. -->
    <div data-transclude-slots>
      <!-- Breadcrumbs. -->
      <bread-crumbs
        data-transclude-slot="topLeftCorner"
        omit-current-page="true"
        use-links="true"
        omit-pages="omitPages"
        page-title="pageTitle"
      ></bread-crumbs>

      <!-- Tabs. -->
      <div data-transclude-slot="bottomRow" class="kuiLocalTabs" role="tablist" ng-show="!sectionName || section.visibleItems.length > 0">
        <h2 class="kuiLocalTab" ng-if="!sectionName" id="tabHeader" tabindex="0" role="tab">
          {{::section.display}}
        </h2>
        <a
          role="tab"
          ng-if="sectionName"
          ng-repeat="item in section.visibleItems"
          class="kuiLocalTab"
          ng-class="{ 'kuiLocalTab-isSelected': item.active, 'kuiLocalTab-isDisabled': !item.active && (item.disabled || !item.url) }"
          kbn-href="{{::item.disabled ? '' : item.url}}"
          data-test-subj="{{::item.name}}"
          tooltip="{{::item.tooltip}}"
          tooltip-placement="bottom"
          tooltip-popup-delay="400"
          tooltip-append-to-body="1"
          aria-selected="{{!!item.active}}"
          aria-disabled="{{!!item.disabled}}"
        >
          {{::item.display}}
        </a>
      </div>
    </div>
  </kbn-top-nav>

  <main class="management-container" ng-transclude></main>
</div>
