{# @description The list-page sort dropdown, built from the view's ordering choices. #}
{% if order_by_choices %}
  <c-dropdown halign="end"
              x-data="{value: '{{ current_ordering }}'}"
              x-init="$watch('value', () => { filterForm.submit() })">
    <c-slot name="button">
      <c-button tabindex="0"
                role="button"
                icon="sort"
                size="sm"
                text="{% trans "Sort" %}" />
    </c-slot>
    <ul class="menu w-full">
      {% for key, label, _ in order_by_choices %}
        <li>
          <span class="ordering-option"
                @click="value='{{ key }}'">
            {{ label }}
            {% if current_ordering == key %}<c-icon name="check" class="ms-auto" />{% endif %}
          </span>
        </li>
      {% endfor %}
    </ul>
    <input type="hidden"
           form="filterForm"
           name="o"
           :value="value" />
  </c-dropdown>
{% endif %}