import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'
import { action } from '@storybook/addon-actions'
import BaseIcon from '@/elements/icon/BaseIcon.vue'
import BaseButton from '@/elements/button/BaseButton.vue'
import LinearLayout from '@/layouts/LinearLayout.vue'
import ContainerLayout from '@/layouts/ContainerLayout.vue'
import BaseContent from '@/elements/content/BaseContent.vue'

<Meta title="Extra: Patterns|Pagination" />

# Pagination

Pagination helps the user parse a large number of items whenever there are too many results to show at once by helping them navigate through groups of elements.elements

- when the page has no elements behind, only the button to navigate forward is shown,
- when the page has no elements before, only the button to navigate backword is shown

<Preview>
  <Story name="Pagination">
    {{
        components: { LinearLayout, BaseButton, ContainerLayout, BaseIcon },
        template: 
          `<div>
              <container-layout hspace="large" style="border: 1px dashed black;">
                <linear-layout gravity="repulsive">
                    <base-button>
                        <base-icon value="chevron-left" />
                        <span>Back</span>
                    </base-button>
                    <base-button>
                        <span>Next</span>
                        <base-icon value="chevron-right" />
                    </base-button>
                </linear-layout>
            </container-layout>
          </div>`,
    }}
  </Story>
</Preview>

## Pagination with Page Number

- additionally, you can add an optional descriptive text to tell the user which page is shown

<Preview>
  <Story name="Pagination with Page Number">
    {{
        components: { LinearLayout, BaseButton, ContainerLayout, BaseIcon, BaseContent },
        template: 
          `<div>
              <container-layout hspace="large" style="border: 1px dashed black;">
                <linear-layout gravity="repulsive">
                    <base-button>
                        <base-icon value="chevron-left" />
                        <span>Back</span>
                    </base-button>
                    <span>
                      <base-content>
                          <p class="is-family-sans-serif">pagina 1</p> 
                      </base-content>
                    </span>
                    <base-button>
                        <span>Next</span>
                        <base-icon value="chevron-right" />
                    </base-button>
                </linear-layout>
            </container-layout>
          </div>`,
    }}
  </Story>
</Preview>