{% extends "layouts/main.html" %}

{% set page = data.page or 1 %}
{% set numberOfResultsPerPage = 10 %}
{% set totalNumberOfResults = 29 %}
{% set totalNumberOfPages = totalNumberOfResults // numberOfResultsPerPage + 1 %}

{% block content %}
<!-- Add your page content here -->
<p class="govuk-body">Use this code example for the <a href="https://design.homeoffice.gov.uk/components?name=Pagination">pagination component in the Home Office design system</a>.</p>

<p class="govuk-body">To use:</p>
<ol class="govuk-list govuk-list--number">
  <li>Change items to change the results in the table</li>
  <li>Change numberOfResultsPerPage to change the number of items on a page, and so the number of pages</li>
  <li>Change beforeRepeatingContent and afterRepeatingContent to change it from a table of results</li>
</ol>

{{ homeOfficeKitPagination({
  page: data.homeOfficeKitPage,
  numberOfResultsPerPage: 10,
  beforeRepeatingContent: '<table class="govuk-table">
      <thead class="govuk-table__head">
        <th scope="col", class="govuk-table__header">Reference</th>
        <th scope="col", class="govuk-table__header">Date created</th>
      </thead>
      <tbody class="govuk-table__body">',
  items: [
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">1713852981</td>
      <td class="govuk-table__cell">19 Apr 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">3847593748</td>
      <td class="govuk-table__cell">10 Apr 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">3739458398</td>
      <td class="govuk-table__cell">19 Mar 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">3848405947</td>
      <td class="govuk-table__cell">27 Feb 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">2318473928</td>
      <td class="govuk-table__cell">26 Feb 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">2734839278</td>
      <td class="govuk-table__cell">20 Feb 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">2823949573</td>
      <td class="govuk-table__cell">15 Feb 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">2123483948</td>
      <td class="govuk-table__cell">13 Feb 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">1238475934</td>
      <td class="govuk-table__cell">10 Feb 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">1238493029</td>
      <td class="govuk-table__cell">7 Feb 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">1234759402</td>
      <td class="govuk-table__cell">31 Jan 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">4389543854</td>
      <td class="govuk-table__cell">31 Jan 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">4538953494</td>
      <td class="govuk-table__cell">31 Jan 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">4875403395</td>
      <td class="govuk-table__cell">30 Jan 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">3453453423</td>
      <td class="govuk-table__cell">29 Jan 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">4543857409</td>
      <td class="govuk-table__cell">28 Jan 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">3242359504</td>
      <td class="govuk-table__cell">27 Jan 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">3242359505</td>
      <td class="govuk-table__cell">27 Jan 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">2345394550</td>
      <td class="govuk-table__cell">26 Jan 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">0987345234</td>
      <td class="govuk-table__cell">25 Jan 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">9867347483</td>
      <td class="govuk-table__cell">23 Jan 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">2345345423</td>
      <td class="govuk-table__cell">20 Jan 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">2349348832</td>
      <td class="govuk-table__cell">15 Jan 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">2349827343</td>
      <td class="govuk-table__cell">14 Jan 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">2348972483</td>
      <td class="govuk-table__cell">13 Jan 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">4384537653</td>
      <td class="govuk-table__cell">12 Jan 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">3453453493</td>
      <td class="govuk-table__cell">12 Jan 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">1234234578</td>
      <td class="govuk-table__cell">12 Jan 2023</td>
    </tr>',
    '<tr class="govuk-table__row">
      <td class="govuk-table__cell">1238748459</td>
      <td class="govuk-table__cell">11 Jan 2023</td>
    </tr>'
  ],
  afterRepeatingContent: '</tbody>
    </table>'
})}}

{% endblock %}