{% assign previousPokemonId = pokemon.id | minus: 1 %}
{% assign previousPokemon = pokemons | find: previousPokemonId %}

{% assign nextPokemonId = pokemon.id | plus: 1 %}
{% assign nextPokemon = pokemons | find: nextPokemonId %}

<div class="py-4 bg-secondary-200 dark:bg-secondary-900">
  <div class="flex divide-x text-sm">
    {% if previousPokemon %}
      <a href="/{{ previousPokemon.id }}" class="w-full flex items-center justify-center px-2">
        <span class="w-8">
          {% icon "Arrows/arrow-left-s-line" %}
        </span>
        <div class="flex items-center">
          {% image previousPokemon.sprite, previousPokemon.name, "w-16 dark:brightness-90" %}
          <span>{{ previousPokemon.name }}</span>
        </div>
      </a>
    {% endif %}
    {% if nextPokemon %}
      <a href="/{{ nextPokemon.id }}" class="w-full flex items-center justify-center px-2">
        <div class="flex items-center">
          <span>{{ nextPokemon.name }}</span>
          {% image nextPokemon.sprite, nextPokemon.name, "w-16 dark:brightness-90" %}
        </div>
        <span class="w-8">
          {% icon "Arrows/arrow-right-s-line" %}
        </span>
      </a>
    {% endif %}
  </div>
</div>