{# sort dropdown; based on eultheme pagination dropdown #}
{# uses selectize javascript plug-in for interactivity #}
{# expects current sort as *sort*, sort options as *sort_options*, and any additional url arguments as *sort_url_params* #}
{% load static i18n %}
<div class="uk-margin-bottom uk-flex-between uk-flex" id="rx-sort">
	<div>
		<span ref="v-attr-sort" data-sort="{{ sort }}"></span>
		<span class="rx-action-title">Sort by: </span> <a class="rx-action-btn">[[currentSelection]]</a>
		<div uk-dropdown="mode: click">
			<ul class="uk-nav uk-dropdown-nav">
				<li v-for="(option, index) in options" v-bind:class="{ 'uk-active' : (option==currentSelection) }">
					<a href="#" @click="sortBy(option)">
						[[ option ]]
					</a>
				</li>
			</ul>
		</div>
	</div>

	<div>
		<a class="rx-icon-btn" onclick="ascaddURL(this)" uk-icon="icon: arrow-up" href=""
			uk-tooltip="title: sort in ascending order" aria-label="sort in ascending order"></a>
		<a class="rx-icon-btn" onclick="descaddURL(this)" uk-icon="icon: arrow-down" href=""
			uk-tooltip="title: sort in descending order" aria-label="sort in descending order"></a>
	</div>
</div>