<div class="tabpanel" role="tabpanel" aria-labelledby="tabFollowed">
  <!-- TABS - LEVEL 2 -->
  <ul class="row no-gutters tabpanel__tablist" role="tablist">
    <!-- Datasets -->
    <li class="col-sm-6 col-xs-12" role="presentation">
      <a
        class="btn tabpanel__tab"
        role="tab"
        id="tabFollowedDatasets"
        [attr.aria-selected]="datasetActive.isActive ? true : null"
        [routerLink]="['dataset']"
        #datasetActive="routerLinkActive"
        routerLinkActive="active">
        <!-- icon -->
        <svg class="icon icon-followed-datasets">
          <use xlink:href="/assets/icomoon/sprite/sprite.svg#icon-followed-datasets"></use>
        </svg>
        <span class="tabpanel__tab-text">
          {{ 'Datasets.Self' | translate }}
        </span>
      </a>
    </li>

    <!-- Queries -->
    <li class="col-sm-6 col-xs-12" role="presentation">
      <a
        class="btn tabpanel__tab"
        role="tab"
        id="tabFollowedQueries"
        [attr.aria-selected]="queryActive.isActive ? true : null"
        [routerLink]="['query']"
        #queryActive="routerLinkActive"
        routerLinkActive="active">
        <!-- icon -->
        <svg class="icon icon-followed-queries">
          <use xlink:href="/assets/icomoon/sprite/sprite.svg#icon-followed-queries"></use>
        </svg>
        <span class="tabpanel__tab-text">
          {{ 'Search.Results' | translate }}
        </span>
      </a>
    </li>
  </ul>
</div>

<!-- TAB PANELS -->
<router-outlet></router-outlet>
