template.html

<div qv-extension ng-cloak stacked-container>

  <!-- Display error if there are no objects-->
  <div ng-if="tabItems.length === 0">
    A tab will show for each item that has a title and an object ID.
  </div>

  <ul class="tabs with-border" ng-if="(tabItems.length === 1 && !layout.shouldCollapseTabs) || tabItems.length > 1">
    <li class="buttonTab with-border-no-bottom"
        ng-repeat="tab in tabItems track by $index"
        ng-click="onTabClick($index)"
        ng-class="{
          'active': isTabActive(tab, activeTab),
          'tab_last' : tab.id == tabItems[tabItems.length - 1].id }"
        ng-style="getTabStyles(tab, activeTab)">
      {{tab.title}}
    </li>
  </ul>
  <div class="tab_container with-border"
      ng-class="{'expanded': tabItems.length === 1 && layout.shouldCollapseTabs }"
      ng-if="tabItems.length > 0">
    <h3 ng-repeat-start="tab in tabItems track by $index"
        class="tab_drawer_heading"
        ng-class="{'d_active': isTabActive(tab) }"
        ng-click="onTabClick($index)">
      {{tab.title}}
    </h3>
    <div class="buttonsContainer">
      <export-table-button ng-if="isTabActive(tab)"
          class="tabOption"
          active-tab="tab"
          hide-button="layout.shouldHideExportButton"
          csv-separator="layout.exportFormat">
      </export-table-button>
      <details-card-button ng-if="isTabActive(tab)"
          class="tabOption"
          active-tab="activeTab"
          hide-button="layout.shouldHideDetailsButton"
          toggle-display-card="toggleDisplayCard()">
      </details-card-button>
    </div>
    <div ng-repeat-end
        id="{{localId}}_{{tab.id}}"
        ng-show="isTabActive(tab)"
        class="tab_content qvobject">
    </div>
  </div>
</div>

<details-card display-card="shouldDisplayDetailsCard" active-tab="activeTab"></details-card>