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

{% load tools %}
{% load i18n %}
<div class="col card bg-base-100 shadow card-border">
  <div class="card-body">
    <h5 class="card-title mb-4">
      {{ currency.currency.name }}
    </h5>
    <div class="card-data-section">
      <div class="card-data-row">
        <span class="card-data-label">{% translate 'projected income' %}</span>
        <div class="card-data-values">
          {% if currency.income_projected != 0 %}
            <c-amount.display
                :amount="currency.income_projected"
                :prefix="currency.currency.prefix"
                :suffix="currency.currency.suffix"
                :decimal_places="currency.currency.decimal_places"
                color="green"></c-amount.display>
            {% if currency.exchanged and currency.exchanged.income_projected %}
              <c-amount.display
                  :amount="currency.exchanged.income_projected"
                  :prefix="currency.exchanged.currency.prefix"
                  :suffix="currency.exchanged.currency.suffix"
                  :decimal_places="currency.exchanged.currency.decimal_places"
                  color="gray"></c-amount.display>
            {% endif %}
          {% else %}
            <span class="font-semibold">-</span>
          {% endif %}
        </div>
      </div>
      <div class="card-data-row">
        <span class="card-data-label">{% translate 'projected expenses' %}</span>
        <div class="card-data-values">
          {% if currency.expense_projected != 0 %}
            <c-amount.display
                :amount="currency.expense_projected"
                :prefix="currency.currency.prefix"
                :suffix="currency.currency.suffix"
                :decimal_places="currency.currency.decimal_places"
                color="red"></c-amount.display>
            {% if currency.exchanged and currency.exchanged.expense_projected %}
              <c-amount.display
                  :amount="currency.exchanged.expense_projected"
                  :prefix="currency.exchanged.currency.prefix"
                  :suffix="currency.exchanged.currency.suffix"
                  :decimal_places="currency.exchanged.currency.decimal_places"
                  color="gray"></c-amount.display>
            {% endif %}
          {% else %}
            <span class="font-semibold">-</span>
          {% endif %}
        </div>
      </div>
      <div class="card-data-row">
        <span class="card-data-label">{% translate 'projected total' %}</span>
        <div class="card-data-values">
          <c-amount.display
              :amount="currency.total_projected"
              :prefix="currency.currency.prefix"
              :suffix="currency.currency.suffix"
              :decimal_places="currency.currency.decimal_places"
              color="{% if currency.total_projected > 0 %}green{% elif currency.total_projected < 0 %}red{% endif %}"></c-amount.display>
          {% if currency.exchanged.total_projected and currency.exchanged.total_projected %}
            <c-amount.display
                :amount="currency.exchanged.total_projected"
                :prefix="currency.exchanged.currency.prefix"
                :suffix="currency.exchanged.currency.suffix"
                :decimal_places="currency.exchanged.currency.decimal_places"
                color="gray"></c-amount.display>
          {% endif %}
        </div>
      </div>
    </div>
    <hr class="card-data-divider" />
    <div class="card-data-section">
      <div class="card-data-row">
        <span class="card-data-label">{% translate 'current income' %}</span>
        <div class="card-data-values">
          {% if currency.income_current != 0 %}
            <c-amount.display
                :amount="currency.income_current"
                :prefix="currency.currency.prefix"
                :suffix="currency.currency.suffix"
                :decimal_places="currency.currency.decimal_places"
                color="green"></c-amount.display>
            {% if currency.exchanged and currency.exchanged.income_current %}
              <c-amount.display
                  :amount="currency.exchanged.income_current"
                  :prefix="currency.exchanged.currency.prefix"
                  :suffix="currency.exchanged.currency.suffix"
                  :decimal_places="currency.exchanged.currency.decimal_places"
                  color="gray"></c-amount.display>
            {% endif %}
          {% else %}
            <span class="font-semibold">-</span>
          {% endif %}
        </div>
      </div>
      <div class="card-data-row">
        <span class="card-data-label">{% translate 'current expenses' %}</span>
        <div class="card-data-values">
          {% if currency.expense_current != 0 %}
            <c-amount.display
                :amount="currency.expense_current"
                :prefix="currency.currency.prefix"
                :suffix="currency.currency.suffix"
                :decimal_places="currency.currency.decimal_places"
                color="red"></c-amount.display>
            {% if currency.exchanged and currency.exchanged.expense_current %}
              <c-amount.display
                  :amount="currency.exchanged.expense_current"
                  :prefix="currency.exchanged.currency.prefix"
                  :suffix="currency.exchanged.currency.suffix"
                  :decimal_places="currency.exchanged.currency.decimal_places"
                  color="gray"></c-amount.display>
            {% endif %}
          {% else %}
            <span class="font-semibold">-</span>
          {% endif %}
        </div>
      </div>
      <div class="card-data-row">
        <span class="card-data-label">{% translate 'current total' %}</span>
        <div class="card-data-values">
          <c-amount.display
              :amount="currency.total_current"
              :prefix="currency.currency.prefix"
              :suffix="currency.currency.suffix"
              :decimal_places="currency.currency.decimal_places"
              color="{% if currency.total_current > 0 %}green{% elif currency.total_current < 0 %}red{% endif %}"></c-amount.display>
          {% if currency.exchanged and currency.exchanged.total_current %}
            <c-amount.display
                :amount="currency.exchanged.total_current"
                :prefix="currency.exchanged.currency.prefix"
                :suffix="currency.exchanged.currency.suffix"
                :decimal_places="currency.exchanged.currency.decimal_places"
                color="gray"></c-amount.display>
          {% endif %}
        </div>
      </div>
    </div>
    <hr class="card-data-divider" />
    <div class="card-data-section">
      <div class="card-data-row">
        <span class="card-data-label">{% translate 'final total' %}</span>
        <div class="card-data-values">
          <c-amount.display
              :amount="currency.total_final"
              :prefix="currency.currency.prefix"
              :suffix="currency.currency.suffix"
              :decimal_places="currency.currency.decimal_places"
              color="{% if currency.total_final > 0 %}green{% elif currency.total_final < 0 %}red{% endif %}"></c-amount.display>
          {% if currency.exchanged and currency.exchanged.total_final %}
            <c-amount.display
                :amount="currency.exchanged.total_final"
                :prefix="currency.exchanged.currency.prefix"
                :suffix="currency.exchanged.currency.suffix"
                :decimal_places="currency.exchanged.currency.decimal_places"
                color="gray"></c-amount.display>
          {% endif %}
        </div>
      </div>
    </div>
    {% with p=percentages|get_dict_item:currency_id %}
      <div class="my-3">
        <c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
      </div>
    {% endwith %}
  </div>
</div>