<div class="flex flex-row items-center justify-center">
  {% set times_played_color = "text-gray-400" %}
  {% set times_played_caret = "off" %}
  {% set times_played_target_params = {"order_by": "'times_played'", "order": "'desc'"} %}

  {% set last_played_color = "text-gray-400" %}
  {% set last_played_caret = "off" %}
  {% set last_played_target_params = {"order_by": "'last_played'", "order": "'desc'"} %}

  {% if order_params is not none %}
    {% if order_params.order_by == OrderBy.TIMES_PLAYED %}
      {% set times_played_color = "text-beige" %}
      {% if order_params.order == Order.ASC %}
        {% set times_played_caret = "asc" %}
        {% set times_played_target_params = {} %}
      {% elif order_params.order == Order.DESC %}
        {% set times_played_caret = "desc" %}
        {% set times_played_target_params = {"order_by": "'times_played'", "order": "'asc'"} %}
      {% endif %}
    {% elif order_params.order_by == OrderBy.LAST_PLAYED %}
      {% set last_played_color = "text-beige" %}
      {% if order_params.order == Order.ASC %}
        {% set last_played_caret = "asc" %}
        {% set last_played_target_params = {} %}
      {% elif order_params.order == Order.DESC %}
        {% set last_played_caret = "desc" %}
        {% set last_played_target_params = {"order_by": "'last_played'", "order": "'asc'"} %}
      {% endif %}
    {% endif %}
  {% endif %}

  {% set hx_vars = build_hx_vars({"properties": properties_str}, times_played_target_params) %}
  <button title="Ordena per cops tocat"
          class="{{ times_played_color }} mx-2 flex flex-row"
          hx-get="/api/temes/busca"
          hx-include="[name=query]"
          hx-vars="{{ hx_vars }}"
          hx-target="#search-results"
          hx-swap="outerHTML">
      <i class="mr-1 flex-none">{% include "icons/music-box.svg" %}</i>
      {% if times_played_caret == "asc" %}
        <i class="fa fa-caret-up flex-1 w-0" aria-hidden="true"></i>
      {% elif times_played_caret == "desc" %}
        <i class="fa fa-caret-down flex-1 w-0" aria-hidden="true"></i>
      {% else %}
        <div class="flex-1 w-0"></div>
      {% endif %}
  </button>

  {% set hx_vars = build_hx_vars({"properties": properties_str}, last_played_target_params) %}
  <button title="Ordena per últim cop tocat"
          class="{{ last_played_color }} mx-2 flex flex-row"
          hx-get="/api/temes/busca"
          hx-include="[name=query]"
          hx-vars="{{ hx_vars }}"
          hx-target="#search-results"
          hx-swap="outerHTML">
      <i class="mr-1">{% include "icons/calendar.svg" %}</i>
      {% if last_played_caret == "asc" %}
        <i class="fa fa-caret-up flex-1 w-0" aria-hidden="true"></i>
      {% elif last_played_caret == "desc" %}
        <i class="fa fa-caret-down flex-1 w-0" aria-hidden="true"></i>
      {% else %}
        <div class="flex-1 w-0"></div>
      {% endif %}
  </button>
</div>
