# Source: src/js/views/search/SorterView.js

    /*global define */
    define(["backbone"], function (Backbone) {
      "use strict";
    /**
      * @class SorterView
      * @classdesc A view that displays a sort controller and sets the sort order on the attached {@link SolrResults} collection.
      * @name SorterView
      * @extends Backbone.View
      * @constructor
      * @since 2.22.0
      * @classcategory Views/Search
      * */
      return Backbone.View.extend(
        /**
         * @lends SorterView.prototype
         */ {
          /**
           * A reference to the {@link SolrResults} collection that this sorter displays and controls.
           * @type {SolrResults}
           */
          searchResults: null,

          /**
           * A list of sort order options to display in this view.
           * @typedef {Object} SearchSortOptions
           * @property {string} value The sort value that will be sent directly to the search index in the query string.
           * @property {string} label The name of the sort option that will be shown to the user.
           * @since 2.22.0
           */
          sortOptions: [
            { value: "dateUploaded+desc", label: "Most recent" },
            { value: "id+asc", label: "Identifier (a-z)" },
            { value: "titlestr+asc", label: "Title (a-z)" },
            { value: "authorSurNameSort+asc", label: "Author (a-z)" },
          ],

          tagName: "div",
          className: "sorter-view",

          events: {
            change: "setSort",
          },

          /**
           * Renders the view
           */
          render: function () {
            let select = document.createElement("select");
            select.setAttribute("id", "sortOrder");

            for (let opt of this.sortOptions) {
              select.insertAdjacentHTML(
                "beforeend",
                `<option value="${opt.value}">${opt.label}</option>`
              );
            }

            this.el.replaceChildren(select);
          },

          /**
           * Sets the sort order on the {@link SolrResults} when the sort is changed in the UI.
           * @param {Event} e
           */
          setSort: function (e) {
            this.searchResults.setSort(e.target.value);
          },
        }
      );
    });