<div class="pagination">
    <nav class="pagination_nav" aria-label="Template Pagination">
        <a class="pagination_arrow pagination_arrow_left pagination_arrow_disabled" href="#">
            <span class="pagination_arrow_icon">
                <svg class="icon icon_arrow-left">
                    <use href="/images/icons.svg#arrow-left" />
                </svg>
            </span>
            <span class="pagination_arrow_label">Previous Page</span>
        </a>
        <a class="pagination_arrow pagination_arrow_right" href="#">
            <span class="pagination_arrow_label">Next Page</span>
            <span class="pagination_arrow_icon">
                <svg class="icon icon_arrow-right">
                    <use href="/images/icons.svg#arrow-right" />
                </svg>
            </span>
        </a>
    </nav>
    <form class="pagination_form" action="" method="get">
        <div class="pagination_form_inner">
            <label class="pagination_form_label" for="pagination_form_select">
                Page
            </label>
            <div class="pagination_form_select_wrapper">
                <select class="pagination_form_select" name="page" id="pagination_form_select" aria-label="Select Page Number">
                    <option value="1">
                        1
                    </option>
                    <option value="2">
                        2
                    </option>
                    <option value="3">
                        3
                    </option>
                    <option value="4">
                        4
                    </option>
                    <option value="5">
                        5
                    </option>
                    <option value="6">
                        6
                    </option>
                    <option value="7">
                        7
                    </option>
                    <option value="8">
                        8
                    </option>
                    <option value="9">
                        9
                    </option>
                    <option value="10">
                        10
                    </option>
                    <option value="11">
                        11
                    </option>
                    <option value="12">
                        12
                    </option>
                    <option value="13">
                        13
                    </option>
                    <option value="14">
                        14
                    </option>
                    <option value="15">
                        15
                    </option>
                    <option value="16">
                        16
                    </option>
                    <option value="17">
                        17
                    </option>
                    <option value="18">
                        18
                    </option>
                    <option value="19">
                        19
                    </option>
                    <option value="20">
                        20
                    </option>
                    <option value="21">
                        21
                    </option>
                    <option value="22">
                        22
                    </option>
                    <option value="23">
                        23
                    </option>
                    <option value="24">
                        24
                    </option>
                    <option value="25">
                        25
                    </option>
                    <option value="26">
                        26
                    </option>
                    <option value="27">
                        27
                    </option>
                    <option value="28">
                        28
                    </option>
                    <option value="29">
                        29
                    </option>
                    <option value="30">
                        30
                    </option>
                    <option value="31">
                        31
                    </option>
                    <option value="32">
                        32
                    </option>
                    <option value="33">
                        33
                    </option>
                    <option value="34">
                        34
                    </option>
                    <option value="35">
                        35
                    </option>
                    <option value="36">
                        36
                    </option>
                    <option value="37">
                        37
                    </option>
                    <option value="38">
                        38
                    </option>
                    <option value="39">
                        39
                    </option>
                    <option value="40">
                        40
                    </option>
                    <option value="41">
                        41
                    </option>
                    <option value="42">
                        42
                    </option>
                    <option value="43">
                        43
                    </option>
                    <option value="44">
                        44
                    </option>
                    <option value="45">
                        45
                    </option>
                    <option value="46">
                        46
                    </option>
                    <option value="47">
                        47
                    </option>
                    <option value="48">
                        48
                    </option>
                    <option value="49">
                        49
                    </option>
                    <option value="50">
                        50
                    </option>
                </select>
                <span class="pagination_form_select_icon">

                    <svg class="icon icon_expand">
                        <use href="/images/icons.svg#expand" />
                    </svg>

                </span>
            </div>

            <span class="pagination_form_suffix">
                of
                50
            </span>
            <button class="pagination_form_button" type="submit" aria-label="View Page">
                Go
            </button>
        </div>
    </form>
</div>
<div class="pagination">
	<nav class="pagination_nav" aria-label="{{ title }}">
		<a class="pagination_arrow pagination_arrow_left pagination_arrow_disabled"
			href="#">
			<span class="pagination_arrow_icon">{{ icon('arrow-left') }}</span>
			<span class="pagination_arrow_label">Previous Page</span>
		</a>
		<a class="pagination_arrow pagination_arrow_right" href="#">
			<span class="pagination_arrow_label">Next Page</span>
			<span class="pagination_arrow_icon">{{ icon('arrow-right') }}</span>
		</a>
	</nav>
	<form class="pagination_form" action="" method="get">
		<div class="pagination_form_inner">
			<label class="pagination_form_label" for="pagination_form_select">
				Page
			</label>
			<div class="pagination_form_select_wrapper">
				<select class="pagination_form_select"
					name="page"
					id="pagination_form_select"
					aria-label="Select Page Number">
					{% for i in 1..pages %}
						<option value="{{ i }}">
							{{ i }}
						</option>
					{% endfor %}
				</select>
				<span class="pagination_form_select_icon">
					{{ icon('expand') }}
				</span>
			</div>

			<span class="pagination_form_suffix">
				of
				{{ pages }}
			</span>
			<button class="pagination_form_button"
				type="submit"
				aria-label="View Page">
				Go
			</button>
		</div>
	</form>
</div>

No notes defined.