package sort

import "git.haelnorr.com/h/oslstats/internal/db"
import "strings"

templ Dropdown(pageopts db.PageOpts, orderopts []db.OrderOpts) {
	<div class="flex items-center gap-2">
		<input type="hidden" name="order" id="sort-order"/>
		<input type="hidden" name="order_by" id="sort-order-by"/>
		<label for="sort-select" class="text-sm text-subtext0">Sort by:</label>
		<select
			id="sort-select"
			class="py-2 px-3 rounded-lg bg-surface0 border border-surface1 text-text focus:border-blue outline-none"
			@change="handleSortChange($event.target.value)"
		>
			for _, opt := range orderopts {
				<option
					value={ strings.Join([]string{opt.OrderBy, string(opt.Order)}, "|") }
					selected?={ pageopts.OrderBy == opt.OrderBy && pageopts.Order == opt.Order }
				>
					{ opt.Label }
				</option>
			}
		</select>
	</div>
}