{! The previous and next buttons only render when needed. !}

<nav aria-label="Pagination" class="navigation--number" data-active-tile="{data.active-tile}">
  <div class="container">
    {?data.previous-url}
      <a class="navigation-control" href="{data.previous-url|s}">{@t key="shared.number-navigation.previous" /}</a>
    {/data.previous-url}
    <ol>

      {! These components need to be number cards. !}

      {#data.components}
          {>"components__{.name}" name=name data=data/}
      {/data.components}
    </ol>
    {?data.next-url}
      <a class="navigation-control" href="{data.next-url|s}">{@t key="shared.number-navigation.next" /}</a>
    {/data.next-url}
  </div>
</nav>