{#
/**
 * @file
 * CivicTheme Pagination component.
 *
 * Props:
 * - theme: [string] Theme variation (light or dark).
 * - heading_id: [string] Heading ID for accessibility.
 * - items_modifier_class: [string] Additional classes for pagination items.
 * - items_per_page_title: [string] Items per page field title.
 * - items_per_page_name: [string] Items per page select field name.
 * - items_per_page_id: [string] Items per page select field ID.
 * - items_per_page_attributes: [string] Items per page select element attributes.
 * - use_ellipsis: [boolean] Whether ellipsis should be shown.
 * - attributes: [string] Additional HTML attributes.
 * - modifier_class: [string] Additional CSS classes.
 * - items: [object] Object containing pagination items.
 *   Each property contains:
 *   - first: [object] First page link.
 *   Each property contains:
 *     - text: [string] Link text.
 *     - href: [string] Link URL.
 *   - previous: [object] Previous page link.
 *   Each property contains:
 *     - text: [string] Link text.
 *     - href: [string] Link URL.
 *   - pages: [object] Object containing page links.
 *   - next: [object] Next page link.
 *   Each property contains:
 *     - text: [string] Link text.
 *     - href: [string] Link URL.
 *   - last: [object] Last page link.
 *   Each property contains:
 *     - text: [string] Link text.
 *     - href: [string] Link URL.
 * - items_per_page_options: [array] Options for items per page:
 *   Each item contains:
 *   - type: [string] Option type ('option').
 *   - label: [string] Option label.
 *   - value: [string] Option value.
 *   - selected: [string] Whether the option is selected.
 *
 * Slots:
 * - title: Active page title.
 * - current: Current page number.
 * - total_pages: Total pages count.
 */
#}

{% set items_per_page_title = items_per_page_title|default('Items per page') %}
{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}

{% if items is not empty %}
  <nav
    class="ct-pagination {{ modifier_class -}}" role="navigation"
    {% if heading_id is not empty %}aria-labelledby="{{ heading_id }}"{% endif %}
    {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}
  >
    <h4 {% if heading_id is not empty %}id="{{ heading_id }}"{% endif %} class="ct-visually-hidden">{{ 'Pagination' }}</h4>

    {% if items_per_page_options is defined and items_per_page_options is not empty %}
      <div class="ct-pagination__items_per_page">
        {%- include 'civictheme:field' with {
          title: items_per_page_title,
          type: 'select',
          orientation: 'horizontal',
          name: items_per_page_name,
          id: items_per_page_id,
          options: items_per_page_options,
          attributes: items_per_page_attributes,
          modifier_class: 'ct-pagination__items_per_page__field ct-field--horizontal--fluid',
        } -%}
      </div>
    {% endif %}

    <ul class="ct-pagination__items {{ items_modifier_class }}">
      {# Print first item if we are not on the first page. #}
      {% if items.first is not empty %}
        <li class="ct-pagination__item ct-pagination__item--first hide-xxs show-m">
          {% set attributes = 'title="Go to first page"' %}
          {% include 'civictheme:link' with {
            theme: theme,
            text: items.first.text|default('First'),
            url: items.first.href,
            is_disabled: (current - 1) ? 0 : 1,
            icon: 'left-arrow',
            icon_placement: 'before',
            attributes: attributes,
            modifier_class: 'ct-pagination__link',
          } only %}
        </li>
      {% endif %}

      {# Print previous item. #}
      <li class="ct-pagination__item ct-pagination__item--previous">
        {% if current - 1 %}
          {% set attributes = 'title="Go to previous page - page %s"'|format(current - 1) %}
        {% else %}
          {% set attributes = 'title="Go to previous page"' %}
        {% endif %}

        {% include 'civictheme:link' with {
          theme: theme,
          text: items.previous.text|default('Prev'),
          url: items.previous.href,
          is_disabled: (current - 1) ? 0 : 1,
          icon: 'left-arrow',
          icon_placement: 'before',
          attributes: attributes,
          modifier_class: 'ct-pagination__link',
        } only %}
      </li>

      {# Generate pagination. #}
      {% for key, item in items.pages %}
        {% if loop.last %}
          {# Add an ellipsis if there are further previous pages. #}
          {% if use_ellipsis and current > 1 %}
            <li class="ct-pagination__item ct-pagination__item--ellipsis ct-pagination__item--ellipsis-previous" role="presentation">
              &hellip;
            </li>
          {% endif %}
        {% endif %}

        <li class="ct-pagination__item {% if current == key %}ct-pagination__item--active{% else %}hide-xxs show-m{% endif %}">
          {% if current == key %}
            {% set attributes = 'title="Current page"' %}
          {% else %}
            {% set attributes = 'title="Go to page %s of %s"'|format(key, items.pages|length) %}
          {% endif %}
          {% include 'civictheme:link' with {
            theme: theme,
            text: key,
            title: title,
            hidden_text: current == key ? 'Current page' : 'Page',
            is_active: current == key ? 1 : 0,
            url: item.href,
            attributes: attributes,
            modifier_class: 'ct-pagination__item__link',
          } only %}
        </li>

        {% if loop.first %}
          {# Add an ellipsis if there are further next pages. #}
          {% if use_ellipsis and current < total_pages %}
            <li class="ct-pagination__item ct-pagination__item--ellipsis ct-pagination__item--ellipsis-next" role="presentation">
              &hellip;
            </li>
          {% endif %}
        {% endif %}
      {% endfor %}

      {# Print next item if we are not on the last page. #}
      <li class="ct-pagination__item ct-pagination__item--next">
        {% if current < total_pages %}
          {% set attributes = 'title="Go to next page - page %s"'|format(current + 1) %}
        {% else %}
          {% set attributes = 'title="Go to next page"' %}
        {% endif %}

        {% include 'civictheme:link' with {
          theme: theme,
          text: items.next.text|default('Next'),
          title: title,
          aria_text: 'Next page',
          url: items.next.href,
          is_disabled: (current < total_pages) ? 0 : 1,
          icon: 'right-arrow-2',
          icon_placement: 'after',
          attributes: attributes,
          modifier_class: 'ct-pagination__link',
        } only %}
      </li>

      {# Print last item if we are not on the last page. #}
      {% if items.last %}
        {% set attributes = 'title="Go to last page"' %}
        <li class="ct-pagination__item ct-pagination__item--last hide-xxs show-m">
          {% include 'civictheme:link' with {
            theme: theme,
            text: items.last.text|default('Last'),
            url: items.last.href,
            is_disabled: (current < total_pages) ? 0 : 1,
            icon: 'right-arrow-2',
            icon_placement: 'after',
            attributes: attributes,
            modifier_class: 'ct-pagination__link',
          } only %}
        </li>
      {% endif %}
    </ul>
  </nav>
{% endif %}
