{% include 'partials/notify.html' %}

<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>