package templates

type SortFilterOptions struct {
	Sort   string // "title", "date", "score"
	Order  string // "asc", "desc"
	View   string // for watchlist: "grid", "table"
	Status string // for watchlist: "all", "watching", etc
}

templ SortFilter(opts SortFilterOptions) {
	<div class="sort-filter">
		<div class="sort-filter-group">
			<label for="sort-select">Sort by</label>
			<select id="sort-select" class="sort-filter-select" onchange="document.getElementById('sort-input').value = this.value; document.getElementById('sort-form').submit()">
				<option value="date" selected?={ opts.Sort == "date" }>Date added</option>
				<option value="title" selected?={ opts.Sort == "title" }>Title</option>
				<option value="score" selected?={ opts.Sort == "score" }>Score</option>
			</select>
		</div>
		<div class="sort-filter-group">
			<label for="order-select">Order</label>
			<select id="order-select" class="sort-filter-select" onchange="document.getElementById('order-input').value = this.value; document.getElementById('sort-form').submit()">
				<option value="desc" selected?={ opts.Order == "desc" }>Descending</option>
				<option value="asc" selected?={ opts.Order == "asc" }>Ascending</option>
			</select>
		</div>
	</div>
	<form id="sort-form" method="get" style="display: none;">
		<input type="hidden" name="sort" id="sort-input" value={ opts.Sort }/>
		<input type="hidden" name="order" id="order-input" value={ opts.Order }/>
		if opts.View != "" {
			<input type="hidden" name="view" value={ opts.View }/>
		}
		if opts.Status != "" {
			<input type="hidden" name="status" value={ opts.Status }/>
		}
	</form>
}
