<section class="home-section home-section--stats" id="stats">
  <div class="container vertical-spacing" *ngIf="stats">
    <h2 class="visually-hidden">
      {{ 'Home.Stats.Title' | translate }}
    </h2>

    <ul class="row stats">
      <!-- institutions -->
      <li class="col-sm-4 stats__item">
        <span class="stats__item-figure">
          {{ stats?.institution?.count }}
        </span>
        {{ 'Home.Stats.Institutions' | translate }}
      </li>

      <!-- resources -->
      <li class="col-sm-4 stats__item">
        <span class="stats__item-figure">
          {{ stats?.resource?.count }}
        </span>
        {{ 'Home.Stats.Resources' | translate }}
      </li>

      <!-- api number -->
      <li class="col-sm-4 stats__item">
        <span class="stats__item-figure">
          {{ stats?.api?.doc_count }}
        </span>
        {{ 'Home.Stats.ApiNumber' | translate }}
      </li>
    </ul>
  </div>
</section>
