$(document).ready(function() {
    // Set header-active indication depending on variables
    const search_params = new Proxy(new URLSearchParams(window.location.search), {
        get: (searchParams, prop) => searchParams.get(prop),
      });
    sort_by = search_params['sort_by']
    if (sort_by != undefined) {
        header_object = $('th#' + sort_by + '_header')
        header_object.addClass('active')
        if (search_params['sort_order'] == 'desc') {
            header_object.addClass('desc')
        } else {
            header_object.addClass('asc')
        }
    }

    $('th').click(function() {
        sort_order = 'asc'
        sort_by = $(this).attr('id').replace('_header', '')
        if (sort_by == 'decks') {
            alert('Sorting by the set-of-decks is not currently supported (how would that even work?)');
            return;
        }
        if ($(this).hasClass('active')) {
            // Header has already been clicked at some point - so reverse the sorting
            if ($(this).hasClass('asc')) {
                sort_order = 'desc'
            }
        }
        const url = new URL(window.location.href)
        url.searchParams.set('skip', 0)
        url.searchParams.set('sort_by', sort_by)
        url.searchParams.set('sort_order', sort_order)
        window.location.href = url.href
    })

})