WYGIWYH/app/templates/yearly_overview/fragments/currency_data.html

{% 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_projected.values %}
        <div>
          <c-amount.display
              :amount="entry.income_projected"
              :prefix="entry.currency.prefix"
              :suffix="entry.currency.suffix"
              :decimal_places="entry.currency.decimal_places"
              color="green"></c-amount.display>
        </div>
        {% if entry.exchanged and entry.exchanged.income_projected %}
        <div>
          <c-amount.display
            :amount="entry.exchanged.income_projected"
            :prefix="entry.exchanged.currency.prefix"
            :suffix="entry.exchanged.currency.suffix"
            :decimal_places="entry.exchanged.currency.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_projected.values %}
        <div>
          <c-amount.display
              :amount="entry.expense_projected"
              :prefix="entry.currency.prefix"
              :suffix="entry.currency.suffix"
              :decimal_places="entry.currency.decimal_places"
              color="red"></c-amount.display>
        </div>
        {% if entry.exchanged and entry.exchanged.expense_projected %}
        <div>
          <c-amount.display
            :amount="entry.exchanged.expense_projected"
            :prefix="entry.exchanged.currency.prefix"
            :suffix="entry.exchanged.currency.suffix"
            :decimal_places="entry.exchanged.currency.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.total_projected.values %}
        <div>
          <c-amount.display
              :amount="entry.total_projected"
              :prefix="entry.currency.prefix"
              :suffix="entry.currency.suffix"
              :decimal_places="entry.currency.decimal_places"
              color="{% if entry.total_projected > 0 %}green{% elif entry.total_projected < 0 %}red{% endif %}"></c-amount.display>
        </div>
        {% if entry.exchanged and entry.exchanged.total_projected %}
        <div>
          <c-amount.display
            :amount="entry.exchanged.total_projected"
            :prefix="entry.exchanged.currency.prefix"
            :suffix="entry.exchanged.currency.suffix"
            :decimal_places="entry.exchanged.currency.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_current.values %}
        <div>
          <c-amount.display
              :amount="entry.income_current"
              :prefix="entry.currency.prefix"
              :suffix="entry.currency.suffix"
              :decimal_places="entry.currency.decimal_places"
              color="green"></c-amount.display>
        </div>
        {% if entry.exchanged and entry.exchanged.income_current %}
        <div>
          <c-amount.display
            :amount="entry.exchanged.income_current"
            :prefix="entry.exchanged.currency.prefix"
            :suffix="entry.exchanged.currency.suffix"
            :decimal_places="entry.exchanged.currency.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_current.values %}
        <div>
          <c-amount.display
              :amount="entry.expense_current"
              :prefix="entry.currency.prefix"
              :suffix="entry.currency.suffix"
              :decimal_places="entry.currency.decimal_places"
              color="red"></c-amount.display>
        </div>
        {% if entry.exchanged and entry.exchanged.expense_current %}
        <div>
          <c-amount.display
            :amount="entry.exchanged.expense_current"
            :prefix="entry.exchanged.currency.prefix"
            :suffix="entry.exchanged.currency.suffix"
            :decimal_places="entry.exchanged.currency.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">
      {% for entry in totals.total_current.values %}
        <div>
          <c-amount.display
              :amount="entry.total_current"
              :prefix="entry.currency.prefix"
              :suffix="entry.currency.suffix"
              :decimal_places="entry.currency.decimal_places"
              color="{% if entry.total_current > 0 %}green{% elif entry.total_current < 0 %}red{% endif %}"></c-amount.display>
        </div>
        {% if entry.exchanged and entry.exchanged.total_current %}
        <div>
          <c-amount.display
            :amount="entry.exchanged.total_current"
            :prefix="entry.exchanged.currency.prefix"
            :suffix="entry.exchanged.currency.suffix"
            :decimal_places="entry.exchanged.currency.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.total_final.values %}
        <div>
          <c-amount.display
              :amount="entry.total_final"
              :prefix="entry.currency.prefix"
              :suffix="entry.currency.suffix"
              :decimal_places="entry.currency.decimal_places"
              color="{% if entry.total_final > 0 %}green{% elif entry.total_final < 0 %}red{% endif %}"></c-amount.display>
        </div>
        {% if entry.exchanged and entry.exchanged.total_final %}
        <div>
          <c-amount.display
            :amount="entry.exchanged.total_final"
            :prefix="entry.exchanged.currency.prefix"
            :suffix="entry.exchanged.currency.suffix"
            :decimal_places="entry.exchanged.currency.decimal_places"
            color="gray"></c-amount.display>
        </div>
        {% endif %}
      {% empty %}
        <div>-</div>
      {% endfor %}
    </div>
  </div>
</div>