{% load month_name %}
{% load i18n %}
<div class="col">
  <div class="d-flex justify-content-between align-items-baseline mt-2">
    <div class="text-end font-monospace">
      <div class="tw-text-gray-400">{% translate 'projected income' %}</div>
    </div>
    <div class="dotted-line flex-grow-1"></div>
    <div class="text-end font-monospace">
      {% for entry in totals.income_unpaid %}
        <div>
          <c-amount.display
              :amount="entry.amount"
              :prefix="entry.prefix"
              :suffix="entry.suffix"
              :decimal_places="entry.decimal_places"></c-amount.display>
        </div>
        {% if entry.exchanged %}
        <div>
          <c-amount.display
            :amount="entry.exchanged.amount"
            :prefix="entry.exchanged.prefix"
            :suffix="entry.exchanged.suffix"
            :decimal_places="entry.exchanged.decimal_places"
            color="gray"></c-amount.display>
        </div>
        {% endif %}
      {% empty %}
        <div>-</div>
      {% endfor %}
    </div>
  </div>
  <div class="d-flex justify-content-between align-items-baseline mt-2">
    <div class="text-end font-monospace">
      <div class="tw-text-gray-400">{% translate 'projected expenses' %}</div>
    </div>
    <div class="dotted-line flex-grow-1"></div>
    <div class="text-end font-monospace">
      {% for entry in totals.expense_unpaid %}
        <div>
          <c-amount.display
              :amount="entry.amount"
              :prefix="entry.prefix"
              :suffix="entry.suffix"
              :decimal_places="entry.decimal_places"></c-amount.display>
        </div>
        {% if entry.exchanged %}
        <div>
          <c-amount.display
            :amount="entry.exchanged.amount"
            :prefix="entry.exchanged.prefix"
            :suffix="entry.exchanged.suffix"
            :decimal_places="entry.exchanged.decimal_places"
            color="gray"></c-amount.display>
        </div>
        {% endif %}
      {% empty %}
        <div>-</div>
      {% endfor %}
    </div>
  </div>
  <div class="d-flex justify-content-between align-items-baseline mt-2">
    <div class="text-end font-monospace">
      <div class="tw-text-gray-400">{% translate 'projected total' %}</div>
    </div>
    <div class="dotted-line flex-grow-1"></div>
    <div class="text-end font-monospace">
      {% for entry in totals.balance_unpaid %}
        <div>
          <c-amount.display
              :amount="entry.amount"
              :prefix="entry.prefix"
              :suffix="entry.suffix"
              :decimal_places="entry.decimal_places"
              color="{% if entry.amount > 0 %}green{% elif entry.amount < 0 %}red{% endif %}"></c-amount.display>
        </div>
        {% if entry.exchanged %}
        <div>
          <c-amount.display
            :amount="entry.exchanged.amount"
            :prefix="entry.exchanged.prefix"
            :suffix="entry.exchanged.suffix"
            :decimal_places="entry.exchanged.decimal_places"
            color="gray"></c-amount.display>
        </div>
        {% endif %}
      {% empty %}
        <div>-</div>
      {% endfor %}
    </div>
  </div>
  <hr class="my-3">
  <div class="d-flex justify-content-between align-items-baseline mt-2">
    <div class="text-end font-monospace">
      <div class="tw-text-gray-400">{% translate 'current income' %}</div>
    </div>
    <div class="dotted-line flex-grow-1"></div>
    <div class="text-end font-monospace">
      {% for entry in totals.income_paid %}
        <div>
        <c-amount.display
            :amount="entry.amount"
            :prefix="entry.prefix"
            :suffix="entry.suffix"
            :decimal_places="entry.decimal_places"></c-amount.display>
        </div>
        {% if entry.exchanged %}
        <div>
          <c-amount.display
            :amount="entry.exchanged.amount"
            :prefix="entry.exchanged.prefix"
            :suffix="entry.exchanged.suffix"
            :decimal_places="entry.exchanged.decimal_places"
            color="gray"></c-amount.display>
        </div>
        {% endif %}
      {% empty %}
        <div>-</div>
      {% endfor %}
    </div>
  </div>
  <div class="d-flex justify-content-between align-items-baseline mt-2">
    <div class="text-end font-monospace">
      <div class="tw-text-gray-400">{% translate 'current expenses' %}</div>
    </div>
    <div class="dotted-line flex-grow-1"></div>
    <div class="text-end font-monospace">
      {% for entry in totals.expense_paid %}
        <div>
          <c-amount.display
              :amount="entry.amount"
              :prefix="entry.prefix"
              :suffix="entry.suffix"
              :decimal_places="entry.decimal_places"></c-amount.display>
        </div>
        {% if entry.exchanged %}
        <div>
          <c-amount.display
            :amount="entry.exchanged.amount"
            :prefix="entry.exchanged.prefix"
            :suffix="entry.exchanged.suffix"
            :decimal_places="entry.exchanged.decimal_places"
            color="gray"></c-amount.display>
        </div>
        {% endif %}
      {% empty %}
        <div>-</div>
      {% endfor %}
    </div>
  </div>
  <div class="d-flex justify-content-between align-items-baseline mt-2">
    <div class="text-end font-monospace">
      <div class="tw-text-gray-400">{% translate 'current total' %}</div>
    </div>
    <div class="dotted-line flex-grow-1"></div>
    <div class="text-end font-monospace tw-text-yellow-400">
      {% for entry in totals.balance_paid %}
        <div>
          <c-amount.display
              :amount="entry.amount"
              :prefix="entry.prefix"
              :suffix="entry.suffix"
              :decimal_places="entry.decimal_places"
              color="{% if entry.amount > 0 %}green{% elif entry.amount < 0 %}red{% endif %}"></c-amount.display>
        </div>
        {% if entry.exchanged %}
        <div>
          <c-amount.display
            :amount="entry.exchanged.amount"
            :prefix="entry.exchanged.prefix"
            :suffix="entry.exchanged.suffix"
            :decimal_places="entry.exchanged.decimal_places"
            color="gray"></c-amount.display>
        </div>
        {% endif %}
      {% empty %}
        <div>-</div>
      {% endfor %}
    </div>
  </div>
  <hr class="my-3">
  <div class="d-flex justify-content-between align-items-baseline mt-2">
    <div class="text-end font-monospace">
      <div class="tw-text-gray-400">{% translate 'final total' %}</div>
    </div>
    <div class="dotted-line flex-grow-1"></div>
    <div class="text-end font-monospace">
      {% for entry in totals.balance_total %}
        <div>
          <c-amount.display
              :amount="entry.amount"
              :prefix="entry.prefix"
              :suffix="entry.suffix"
              :decimal_places="entry.decimal_places"
              color="{% if entry.amount > 0 %}green{% elif entry.amount < 0 %}red{% endif %}"></c-amount.display>
        </div>
        {% if entry.exchanged %}
        <div>
          <c-amount.display
            :amount="entry.exchanged.amount"
            :prefix="entry.exchanged.prefix"
            :suffix="entry.exchanged.suffix"
            :decimal_places="entry.exchanged.decimal_places"
            color="gray"></c-amount.display>
        </div>
        {% endif %}
      {% empty %}
        <div>-</div>
      {% endfor %}
    </div>
  </div>
</div>