WYGIWYH/app/templates/cotton/ui/account_card.html

{% load tools %}
{% load i18n %}
<div class="col tw:card tw:bg-base-100 tw:shadow-xl">
  <div class="tw:card-body">
    {% if account.account.group %}
      <div class="tw:text-sm tw:mb-2">
        <span class="tw:badge tw:badge-primary">{{ account.account.group }}</span>
      </div>
    {% endif %}
    <h5 class="tw:card-title">
      {{ account.account.name }}
    </h5>
    <div class="tw:flex tw:justify-between tw:items-baseline tw:mt-2">
      <div class="tw:text-end tw:font-mono">
        <div class="tw:text-gray-400">{% translate 'projected income' %}</div>
      </div>
      <div class="dotted-line tw:flex-grow"></div>
      {% if account.income_projected != 0 %}
      <div class="tw:text-end tw:font-mono tw:text-green-400">
        <c-amount.display
            :amount="account.income_projected"
            :prefix="account.currency.prefix"
            :suffix="account.currency.suffix"
            :decimal_places="account.currency.decimal_places"></c-amount.display>
      </div>
      {% else %}
        <div class="tw:text-end tw:font-mono">-</div>
      {% endif %}
    </div>
    {% if account.exchanged and account.exchanged.income_projected %}
      <div class="tw:text-end tw:font-mono tw:text-gray-500">
        <c-amount.display
            :amount="account.exchanged.income_projected"
            :prefix="account.exchanged.currency.prefix"
            :suffix="account.exchanged.currency.suffix"
            :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
      </div>
    {% endif %}
    <div class="tw:flex tw:justify-between tw:items-baseline tw:mt-2">
      <div class="tw:text-end tw:font-mono">
        <div class="tw:text-gray-400">{% translate 'projected expenses' %}</div>
      </div>
      <div class="dotted-line tw:flex-grow"></div>
      <div>
        {% if account.expense_projected != 0 %}
        <div class="tw:text-end tw:font-mono tw:text-red-400">
          <c-amount.display
              :amount="account.expense_projected"
              :prefix="account.currency.prefix"
              :suffix="account.currency.suffix"
              :decimal_places="account.currency.decimal_places"></c-amount.display>
        </div>
        {% else %}
          <div class="tw:text-end tw:font-mono">-</div>
        {% endif %}
      </div>
    </div>
    {% if account.exchanged and account.exchanged.expense_projected %}
      <div class="tw:text-end tw:font-mono tw:text-gray-500">
        <c-amount.display
            :amount="account.exchanged.expense_projected"
            :prefix="account.exchanged.currency.prefix"
            :suffix="account.exchanged.currency.suffix"
            :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
      </div>
    {% endif %}
    <div class="tw:flex tw:justify-between tw:items-baseline tw:mt-2">
      <div class="tw:text-end tw:font-mono">
        <div class="tw:text-gray-400">{% translate 'projected total' %}</div>
      </div>
      <div class="dotted-line tw:flex-grow"></div>
      <div
          class="tw:text-end tw:font-mono">
        <c-amount.display
            :amount="account.total_projected"
            :prefix="account.currency.prefix"
            :suffix="account.currency.suffix"
            :decimal_places="account.currency.decimal_places"
            color="{% if account.total_projected > 0 %}green{% elif account.total_projected < 0 %}red{% endif %}"></c-amount.display>
      </div>
    </div>
    {% if account.exchanged.total_projected and account.exchanged.total_projected %}
      <div class="tw:text-end tw:font-mono tw:text-gray-500">
        <c-amount.display
            :amount="account.exchanged.total_projected"
            :prefix="account.exchanged.currency.prefix"
            :suffix="account.exchanged.currency.suffix"
            :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
      </div>
    {% endif %}
    <hr class="tw:my-3">
    <div class="tw:flex tw:justify-between tw:items-baseline tw:mt-2">
      <div class="tw:text-end tw:font-mono">
        <div class="tw:text-gray-400">{% translate 'current income' %}</div>
      </div>
      <div class="dotted-line tw:flex-grow"></div>
      {% if account.income_current != 0 %}
      <div class="tw:text-end tw:font-mono tw:text-green-400">
        <c-amount.display
            :amount="account.income_current"
            :prefix="account.currency.prefix"
            :suffix="account.currency.suffix"
            :decimal_places="account.currency.decimal_places"></c-amount.display>
      </div>
      {% else %}
        <div class="tw:text-end tw:font-mono">-</div>
      {% endif %}
    </div>
    {% if account.exchanged and account.exchanged.income_current %}
      <div class="tw:text-end tw:font-mono tw:text-gray-500">
        <c-amount.display
            :amount="account.exchanged.income_current"
            :prefix="account.exchanged.currency.prefix"
            :suffix="account.exchanged.currency.suffix"
            :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
      </div>
    {% endif %}
    <div class="tw:flex tw:justify-between tw:items-baseline tw:mt-2">
      <div class="tw:text-end tw:font-mono">
        <div class="tw:text-gray-400">{% translate 'current expenses' %}</div>
      </div>
      <div class="dotted-line tw:flex-grow"></div>
      {% if account.expense_current != 0 %}
      <div class="tw:text-end tw:font-mono tw:text-red-400">
        <c-amount.display
            :amount="account.expense_current"
            :prefix="account.currency.prefix"
            :suffix="account.currency.suffix"
            :decimal_places="account.currency.decimal_places"></c-amount.display>
      </div>
      {% else %}
        <div class="tw:text-end tw:font-mono">-</div>
      {% endif %}
    </div>
    {% if account.exchanged and account.exchanged.expense_current %}
      <div class="tw:text-end tw:font-mono tw:text-gray-500">
        <c-amount.display
            :amount="account.exchanged.expense_current"
            :prefix="account.exchanged.currency.prefix"
            :suffix="account.exchanged.currency.suffix"
            :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
      </div>
    {% endif %}
    <div class="tw:flex tw:justify-between tw:items-baseline tw:mt-2">
      <div class="tw:text-end tw:font-mono">
        <div class="tw:text-gray-400">{% translate 'current total' %}</div>
      </div>
      <div class="dotted-line tw:flex-grow"></div>
      <div class="tw:text-end tw:font-mono">
        <c-amount.display
            :amount="account.total_current"
            :prefix="account.currency.prefix"
            :suffix="account.currency.suffix"
            :decimal_places="account.currency.decimal_places"
            color="{% if account.total_current > 0 %}green{% elif account.total_current < 0 %}red{% endif %}"></c-amount.display>
      </div>
    </div>
    {% if account.exchanged and account.exchanged.total_current %}
      <div class="tw:text-end tw:font-mono tw:text-gray-500">
        <c-amount.display
            :amount="account.exchanged.total_current"
            :prefix="account.exchanged.currency.prefix"
            :suffix="account.exchanged.currency.suffix"
            :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
      </div>
    {% endif %}
    <div>
      <hr class="tw:my-3">
      <div class="tw:flex tw:justify-between tw:items-baseline tw:mt-2">
        <div class="tw:text-end tw:font-mono">
          <div class="tw:text-gray-400">{% translate 'final total' %}</div>
        </div>
        <div class="dotted-line tw:flex-grow"></div>
        <div class="tw:text-end tw:font-mono">
          <c-amount.display
              :amount="account.total_final"
              :prefix="account.currency.prefix"
              :suffix="account.currency.suffix"
              :decimal_places="account.currency.decimal_places"
              color="{% if account.total_final > 0 %}green{% elif account.total_final < 0 %}red{% endif %}"></c-amount.display>
        </div>
      </div>
      {% if account.exchanged and account.exchanged.total_final %}
        <div class="tw:text-end tw:font-mono tw:text-gray-500">
          <c-amount.display
              :amount="account.exchanged.total_final"
              :prefix="account.exchanged.currency.prefix"
              :suffix="account.exchanged.currency.suffix"
              :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
        </div>
      {% endif %}
    </div>
    {% with p=percentages|get_dict_item:account_id %}
      <div class="tw:my-3">
        <c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
      </div>
    {% endwith %}
  </div>
</div>