{% include 'partials/notify.html' %}
<table class="table is-fullwidth is-hoverable" id="positions-table">
  <thead>
    <th>account</th>
    <th>asset</th>
    <th>price</th>
    <th>units</th>
    <th>quote</th>
    <th>P/L</th>
    <th>side</th>
    <th>trades</th>
    <th>actions</th>
  </thead>
  {% for item in items %}
    <tr class="
      {% if item.unrealized_pl > 0 %}has-background-success-light
      {% elif item.unrealized_pl < 0 %}has-background-danger-light
      {% endif %}">
      <td>{{ item.account }}</td>
      <td>{{ item.symbol }}</td>
      <td>{{ item.price }}</td>
      <td>{{ item.units }}</td>
      <td>{{ item.value }}</td>
      <td>{{ item.unrealized_pl }}</td>
      <td>
        {% if item.side == 'long' %}
          <span class="icon has-text-success" data-tooltip="long">
            <i class="fa-solid fa-up"></i>
          </span>
        {% elif item.side == 'short' %}
          <span class="icon has-text-danger" data-tooltip="short">
            <i class="fa-solid fa-down"></i>
          </span>
        {% endif %}
      </td>
      <td>{{ item.trade_ids|length }}</td>
      <td>
        <div class="buttons">
          <button
            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
            hx-get="#"
            hx-trigger="click"
            hx-target="#{{ type }}s-here"
            class="button is-info">
            <span class="icon-text">
              <span class="icon">
                <i class="fa-solid fa-pencil"></i>
              </span>
            </span>
          </button>
          <button
            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
            hx-delete="#trade-close-confirm"
            hx-trigger="click"
            hx-target="#positions-table"
            hx-confirm="Are you sure you wish to close {{ item.symbol }}?"
            class="button is-danger">
            <span class="icon-text">
              <span class="icon">
                <i class="fa-solid fa-trash"></i>
              </span>
            </span>
          </button>
          {% if type == 'page' %}
            <a href="{% url 'position_action' type=type account_id=item.account_id symbol=item.symbol %}">
              <button
                class="button is-success">
                <span class="icon-text">
                  <span class="icon">
                    <i class="fa-solid fa-eye"></i>
                  </span>
                </span>
              </button>
            </a>
          {% else %}
            <button
              hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
              hx-get="{% url 'position_action' type=type account_id=item.account_id symbol=item.symbol %}"
              hx-trigger="click"
              hx-target="#{{ type }}s-here"
              hx-swap="innerHTML"
              class="button is-success">
              <span class="icon-text">
                <span class="icon">
                  <i class="fa-solid fa-eye"></i>
                </span>
              </span>
            </button>
          {% endif %}
        </div>
      </td>
    </tr>
  {% endfor %}

</table>