{# @description The list-page sort dropdown, built from the view's ordering choices. #}
{% if order_by_choices %}
  <c-mvp.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" %}" only>
        {% for key, label, _ in order_by_choices %}
          {% if key == current_ordering %}<span class="hidden md:inline font-normal opacity-70">{{ label }}</span>{% endif %}
        {% endfor %}
      </c-button>
    </c-slot>
    <c-menu class="w-full" only>
      {% for key, label, _ in order_by_choices %}
        <c-menu.item text="{{ label }}"
                     class="ordering-option"
                     @click="value='{{ key }}'"
                     only>
          {% if current_ordering == key %}<c-icon name="check" class="ms-auto" />{% endif %}
        </c-menu.item>
      {% endfor %}
    </c-menu>
    <input type="hidden"
           form="filterForm"
           name="o"
           :value="value" />
  </c-mvp.dropdown>
{% endif %}