<div class="row">
  <div class="col-1 text-center">
    <i class="btn gnc-transaction-detail-button bi bi-chevron-down"
            role="button"
            data-bs-toggle="collapse" data-bs-target="#transaction-details-{{ loop.index }}"
            data-gnc-switch=".gnc-transaction-general-{{ loop.index }}">
    </i>
  </div>
  <div class="col-11 gnc-transaction-general-{{ loop.index }}">
    {# First row: description and amount #}
    <div class="row align-items-center justify-content-between">
      <div class="col-9 fw-bolder">{{ split.transaction.description }}</div>
      <div class="col-3 text-end">
        <span class="float-end fs-7">
          {{ split.value | money(split.transaction.currency) }}
        </span>
      </div>
    </div>

    {# Second row: date and contra accounts #}
    <div class="row align-items-center justify-content-between">
      <div class="col-3">
        {{ split.transaction.post_date -}}
        {%- if split.transaction.num -%}
          #{{ split.transaction.num }}
        {% endif %}
      </div>

      <div class="col-9 text-end text-break">
        {# We do not really support split transactions: Simply display all contra accounts #}
        {% for account in split | contrasplits
          | map(attribute='account') %}
          {# Display account name, line-breakable /preferred/ at the colons #}
          <a href="{{ account | accounturl }}"><span class="avoidwrap">
              {{- account.fullname | display | replace(':', '</span>:<span class="avoidwrap">' | safe) -}}
          </span></a>
          {%- if not loop.last %}, {% endif %}
        {% endfor %}
      </div>
    </div>
  </div>
  <div class="col-11 hidden gnc-transaction-general-{{ loop.index }}">
    <div class="row">
      <div class="col-7 pe-0">
        <div class="row">
          <div class="col fw-bolder">{{ split.transaction.description }}</div>
        </div>
        <div class="row">
          <div class="col">
            {{ split.transaction.post_date -}}
            {%- if split.transaction.num -%}
              #{{ split.transaction.num }}
            {% endif %}
          </div>
        </div>
      </div>
      <div class="col-5 text-end">
        {% set contra_account = (split|contrasplits|map(attribute='account')|list)[0] %}
        <div class="btn-group pt-2" role="group">
          <div class="d-inline-block tooltip-wrapper" tabindex="0"
               {% if split.transaction.splits|length > 2 %}
                 data-bs-toggle="tooltip" data-bs-placement="bottom"
                 title="Cannot recycle multi-split transaction"
               {% elif contra_account.commodity != account.commodity %}
                 data-bs-toggle="tooltip" data-bs-placement="bottom"
                 title="Cannot recycle currency-converting transaction"
               {% endif %}>
            <button role="button"
                    class="btn btn-sm btn-outline-dark bi bi-repeat
                           {% if split.transaction.splits|length > 2
                                 or contra_account.commodity != account.commodity -%}
                             disabled
                           {%- endif %}"
                    onclick='transaction_recycle(
                                 "{{- split.transaction.description -}}",
                                 {{- split.value | abs -}},
                                 {{- split.transaction.post_date -}},
                                 "{{- (split|contrasplits|map(attribute='account.fullname')|list)[0] -}}");'>
            </button>
          </div>

          <div class="d-inline-block tooltip-wrapper" tabindex="0"
               {% if split.transaction.splits|length > 2 %}
                 data-bs-toggle="tooltip" data-bs-placement="bottom"
                 title="Cannot edit multi-split transaction"
               {% elif contra_account.commodity != account.commodity %}
                 data-bs-toggle="tooltip" data-bs-placement="bottom"
                 title="Cannot edit currency-converting transaction"
               {% endif %}>
            <button role="button"
                    class="btn btn-sm btn-outline-dark bi bi-pencil-fill
                    {% if split.transaction.splits|length > 2 or contra_account.commodity != account.commodity -%}
                      disabled
                    {%- endif %}"
                    data-bs-toggle="modal"
                    data-bs-target="#edit-transaction"
                    data-bs-transaction-guid="{{ split.transaction.guid }}"
                    data-bs-transaction-description="{{ split.transaction.description }}"
                    data-bs-transaction-value="{{ split.value|abs }}"
                    data-bs-transaction-sign="{{ split.value / split.value|abs  }}"
                    data-bs-transaction-post-date="{{ split.transaction.post_date }}"
                    data-bs-transaction-contra-account="{{ (split|contrasplits|map(attribute='account.fullname')|list)[0] }}">
            </button>
          </div>

          <button role="button" "type=submit" class="btn btn-sm btn-outline-dark bi bi-trash-fill"
                  form="del_transaction-{{ split.transaction.guid }}"></button>
        </div>
        <form id="del_transaction-{{ split.transaction.guid }}"
              onsubmit="return confirm('Do you really want to delete transaction \'{{ split.transaction.description }}\' from {{ split.transaction.post_date }}?');"
              action="{{ url_for('book.del_transaction') }}" method="post">
          <input type="hidden" name="guid" value="{{ split.transaction.guid }}">
          <input type="hidden" name="account_name" value="{{ account.fullname }}">
        </form>
      </div>
    </div>
  </div>
</div>

<div class="row collapse" id="transaction-details-{{ loop.index }}">
  <div class="col">
    {% set outer_loop_index = loop.index %}
    <ul class="list-group list-group-flush">
      {% for other_split in split.transaction.splits %}
        <li class="list-group-item {% if outer_loop_index % 2 %}bg-light{% endif %}">
          <div class="row justify-content-center">
            <div class="col-9 text-break {% if split == other_split %}fw-bolder{% endif %}">
              {# Display account name, line-breakable /preferred/ at the colons #}
              <a href="{{ other_split.account | accounturl }}"><span class="avoidwrap">
                  {{- other_split.account.fullname | display | replace(':', '</span>:<span class="avoidwrap">' | safe) -}}
              </span></a>
            </div>
            <div class="col-3 text-end align-self-center">
              <span class="float-end fs-7">
                {{ other_split.value | money(split.transaction.currency) }}
              </span>
            </div>
          </div>
        </li>
      {% endfor %}
    </ul>
  </div>
</div>
