<section>
  <!-- API notifications -->
  <app-notifications></app-notifications>

  <h1 class="heading">
    {{ 'MyDashboard.FollowedObjects' | translate }}
  </h1>

  <!-- EMAIL NOTIFICATIONS CONSENT -->
  <div class="mb-5">
    <!-- toggle -->
    <button
      *ngIf="!isConsentVisible"
      class="btn btn-primary"
      type="button"
      [attr.aria-pressed]="isConsentVisible"
      (click)="onTogglePermission()">
      <!-- disable -->
      <ng-container *ngIf="hasNotificationsEnabled">
        {{ 'NotificationConsent.ResignNotificationsButton' | translate }}
      </ng-container>

      <!-- enable -->
      <ng-container *ngIf="!hasNotificationsEnabled">
        {{ 'NotificationConsent.EnableNotificationsButton' | translate }}
      </ng-container>
    </button>

    <!-- fake button - toggle email notifications -->
    <button
      *ngIf="isConsentVisible && !hasNotificationsEnabled"
      class="btn btn-secondary"
      type="button"
      [attr.aria-pressed]="isConsentVisible">
      {{ 'NotificationConsent.EnableNotificationsButton' | translate }}
    </button>

    <!-- consent -->
    <div *ngIf="isConsentVisible" @toggleVertically>
      <app-followed-email-notification-consent
        (showConsentPanel)="isConsentVisible = $event"
        (setConsent)="setNotifications(true)">
      </app-followed-email-notification-consent>
    </div>
  </div>

  <!-- TABS - level 1 -->
  <div class="tabs">
    <ul class="tab-list row no-gutters" role="tablist">
      <!-- Followed -->
      <li class="tab-list__item col-sm-6 col-xs-12" role="presentation">
        <a
          class="tab-list__link"
          role="tab"
          id="tabFollowed"
          [routerLink]="['followed']"
          #tabLinkFollowed="routerLinkActive"
          [attr.aria-selected]="tabLinkFollowed.isActive ? true : null"
          routerLinkActive="tab-list__link--active">
          {{ 'User.Followed' | translate }}
        </a>
      </li>

      <!-- Search history-->
      <li class="tab-list__item col-sm-6 col-xs-12" role="presentation">
        <a
          class="tab-list__link"
          role="tab"
          id="tabSearchHistory"
          [routerLink]="['search-history']"
          #tabLinkSearchHistory="routerLinkActive"
          [attr.aria-selected]="tabLinkSearchHistory.isActive ? true : null"
          routerLinkActive="tab-list__link--active">
          {{ 'User.SearchHistory' | translate }}
        </a>
      </li>
    </ul>
  </div>

  <!-- TAB CONTENT: Followed / SearchHistory -->
  <div class="tabs-content">
    <router-outlet></router-outlet>
  </div>
</section>
