{% comment %} Pagination Component ==================== A reusable pagination component with accessibility features and HTMX support. Purpose: Renders pagination controls for paginated querysets. Supports both standard page navigation and HTMX-powered dynamic updates. Usage Examples: Standard pagination: {% include 'components/pagination.html' with page_obj=page_obj %} HTMX-enabled pagination: {% include 'components/pagination.html' with page_obj=page_obj use_htmx=True hx_target='#results' %} Custom styling: {% include 'components/pagination.html' with page_obj=page_obj size='sm' %} Parameters: - page_obj: Django Page object from paginator (required) - use_htmx: Enable HTMX for dynamic updates (optional, default: False) - hx_target: HTMX target selector (optional, default: '#results') - hx_swap: HTMX swap strategy (optional, default: 'innerHTML') - hx_push_url: Whether to push URL to history (optional, default: 'true') - size: Size variant 'sm', 'md', 'lg' (optional, default: 'md') - show_info: Show "Showing X to Y of Z" info (optional, default: True) - base_url: Base URL for pagination (optional, default: request.path) Dependencies: - Tailwind CSS for styling - HTMX (optional, for dynamic pagination) Accessibility: - Uses nav element with aria-label="Pagination" - Current page marked with aria-current="page" - Previous/Next buttons have aria-labels - Disabled buttons use aria-disabled {% endcomment %} {% if page_obj.has_other_pages %} {% with use_htmx=use_htmx|default:False hx_target=hx_target|default:'#results' hx_swap=hx_swap|default:'innerHTML' size=size|default:'md' show_info=show_info|default:True %} {# Size-based classes #} {% if size == 'sm' %} {% with btn_padding='px-2 py-1 text-xs' info_class='text-xs' %} {% include 'components/pagination_inner.html' %} {% endwith %} {% elif size == 'lg' %} {% with btn_padding='px-5 py-3 text-base' info_class='text-base' %} {% include 'components/pagination_inner.html' %} {% endwith %} {% else %} {% with btn_padding='px-4 py-2 text-sm' info_class='text-sm' %} {% include 'components/pagination_inner.html' %} {% endwith %} {% endif %} {% endwith %} {% endif %}