{% load cache %}
{% include 'mixins/partials/notify.html' %}
{% cache 600 objects_trenddirections request.user.id object_list %}
  <table
    class="table is-fullwidth is-hoverable"
    hx-target="#{{ context_object_name }}-table"
    id="{{ context_object_name }}-table"
    hx-swap="outerHTML"
    hx-trigger="{{ context_object_name_singular }}Event from:body"
    hx-get="{{ list_url }}">
    <thead>
      <th>symbol</th>
      <th>direction</th>
      <th>actions</th>
    </thead>
    {% for key, item in object_list.items %}
      <tr class="
        {% if item == 'buy' %}has-background-success-light
        {% elif item == 'sell' %}has-background-danger-light
        {% endif %}">
        <td>{{ key }}</td>
        <td>{{ item }}</td>
        <td>
          <div class="buttons">
            <button
              hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
              hx-get="{% url 'trenddirection_flip' strategy_id=strategy_id symbol=key %}"
              hx-trigger="click"
              hx-target="#modals-here"
              hx-swap="innerHTML"
              class="button">
              <span class="icon-text">
                <span class="icon" data-tooltip="Flip direction">
                  <i class="fa-solid fa-arrows-repeat"></i>
                </span>
              </span>
            </button>
            <button
              hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
              hx-delete="{% url 'trenddirection_delete' strategy_id=strategy_id symbol=key %}"
              hx-trigger="click"
              hx-target="#modals-here"
              hx-swap="innerHTML"
              class="button">
              <span class="icon-text">
                <span class="icon">
                  <i class="fa-solid fa-xmark"></i>
                </span>
              </span>
            </button>
          </div>
        </td>
      </tr>
    {% endfor %}

  </table>
{% endcache %}