{% if order_by_choices %}
  <div class="dropdown">
    <c-button icon="sort"
              text="Sort"
              id="orderingDropdown"
              data-bs-toggle="dropdown"
              aria-expanded="false" />
    <ul class="dropdown-menu dropdown-menu-end"
        aria-labelledby="orderingDropdown">
      {% for value, label in order_by_choices %}
        <li>
          <a class="dropdown-item me-4 ordering-option {% if current_ordering == value %}active{% endif %}"
             href="#"
             data-order-value="{{ value }}"
             onclick="submitOrdering(event, '{{ value }}')">
            {{ label }}
            {% if current_ordering == value %}<c-icon name="check" class="float-end" />{% endif %}
          </a>
        </li>
      {% endfor %}
    </ul>
  </div>
  <script>
    function submitOrdering(event, orderValue) {
      event.preventDefault();
      const form = document.getElementById('sidebarFilterForm');
      if (form) {
        // Find or create the ordering input
        let orderInput = form.querySelector('input[name="o"]');
        if (!orderInput) {
          orderInput = document.createElement('input');
          orderInput.type = 'hidden';
          orderInput.name = 'o';
          form.appendChild(orderInput);
        }
        orderInput.value = orderValue;
        form.submit();
      }
    }
  </script>
{% endif %}