{% set routeName = app.request.get('_route') %}

{% set isComponentsSelected = routeName == 'index' %}
{% set isIconsSelected = routeName == 'icons_index' %}
{% set isHelpersSelected = routeName == 'helpers_index' %}
{% set isValidationsSelected = routeName == 'validations_index' %}

<div class="d-grid">
  <ScrollView
    direction="horizontal"
    overflowDecorators="shadows"
    data-spirit-toggle="scrollView"
    marginBottom="{{ { mobile: 'space-800', tablet: 'space-1100' } }}"
  >
    <TabList marginX="auto" marginBottom="space-800">
      <TabItem>
        <TabLink href="/" isSelected={{ isComponentsSelected }}>Components</TabLink>
      </TabItem>
      <TabItem>
        <TabLink href="/icons" isSelected={{ isIconsSelected }}>Icons</TabLink>
      </TabItem>
      <TabItem>
        <TabLink href="/helpers" isSelected={{ isHelpersSelected }}>Helpers</TabLink>
      </TabItem>
      <TabItem>
        <TabLink href="/validations" isSelected={{ isValidationsSelected }}>Validations</TabLink>
      </TabItem>
    </TabList>
  </ScrollView>
</div>
