{% extends "layouts/base.html" %}
{% load currency_display %}
{% load crispy_forms_tags %}
{% load i18n %}
{% load month_name %}
{% load static %}
{% load webpack_loader %}

{% block title %}{% translate 'Net Worth' %}{% endblock %}

{% block content %}
<div class="container px-md-3 py-3 column-gap-5">
  <div class="row gx-xl-4 gy-3">
    <div class="col-12 col-xl-5">
      <div class="row row-cols-1 g-4 mb-3">
        <div class="col">
          <div class="card tw-relative h-100 shadow">
            <div class="tw-absolute tw-h-8 tw-w-8 tw-right-2 tw-top-2 tw-bg-yellow-300 tw-text-yellow-800 text-center
            align-items-center d-flex justify-content-center rounded-2">
              <i class="fa-solid fa-coins"></i>
            </div>
            <div class="card-body">
              <h5 class="tw-text-yellow-400 fw-bold mb-3">{% translate 'By currency' %}</h5>
              {% for currency in currency_net_worth %}
              <div class="d-flex justify-content-between mt-2">
                  <div class="d-flex align-items-baseline w-100">
                      <div class="currency-name text-start font-monospace tw-text-gray-300">{{ currency.name }}</div>
                      <div class="dotted-line flex-grow-1"></div>
                      <div class="{% if currency.amount > 0 %}tw-text-green-400{% elif currency.amount < 0 %}tw-text-red-400{% endif %}">
                        <c-amount.display
                              :amount="currency.amount"
                              :prefix="currency.prefix"
                              :suffix="currency.suffix"
                              :decimal_places="currency.decimal_places"
                              text-end></c-amount.display>
                      </div>
                  </div>
              </div>
              {% endfor %}
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card tw-relative h-100 shadow">
          <div class="tw-absolute tw-h-8 tw-w-8 tw-right-2 tw-top-2 tw-bg-blue-300 tw-text-blue-800 text-center
          align-items-center d-flex justify-content-center rounded-2">
            <i class="fa-solid fa-wallet"></i>
          </div>
          <div class="card-body">
            <h5 class="tw-text-blue-400 fw-bold mb-3">{% translate 'By account' %}</h5>
            {% for group_id, group_data in account_net_worth.items %}
              {% if group_id %}
                <div class="d-flex justify-content-between mt-2">
                  <div class="d-flex align-items-baseline w-100">
                      <div class="text-start font-monospace tw-text-gray-300"><span class="badge text-bg-primary">
                        {{ group_data.name }}</span></div>
                  </div>
                </div>
                {% for account_id, account_data in group_data.accounts.items %}
                  <div class="d-flex justify-content-between mt-2">
                    <div class="d-flex align-items-baseline w-100">
                        <div class="text-start font-monospace tw-text-gray-300">
                          <span class="hierarchy-line-icon"></span>{{ account_data.name }}</div>
                        <div class="dotted-line flex-grow-1"></div>
                        <div class="{% if account_data.balance > 0 %}tw-text-green-400{% elif account_data.balance < 0 %}tw-text-red-400{% endif %}">
                          <c-amount.display
                            :amount="account_data.balance"
                            :prefix="account_data.currency.prefix"
                            :suffix="account_data.currency.suffix"
                            :decimal_places="account_data.currency.decimal_places"></c-amount.display>
                        </div>
                    </div>
                  </div>
                  {% if account_data.exchange %}
                    <c-amount.display
                          :amount="account_data.exchange.amount"
                          :prefix="account_data.exchange.prefix"
                          :suffix="account_data.exchange.suffix"
                          :decimal_places="account_data.exchange.decimal_places"
                          color="grey"
                          text-end></c-amount.display>
                  {% endif %}
                {% endfor %}
              {% else %}
                {% for account_id, account_data in group_data.accounts.items %}
                  <div class="d-flex justify-content-between mt-2">
                    <div class="d-flex align-items-baseline w-100">
                        <div class="currency-name text-start font-monospace tw-text-gray-300">{{ account_data.name }}</div>
                        <div class="dotted-line flex-grow-1"></div>
                        <div class="{% if account_data.balance > 0 %}tw-text-green-400{% elif account_data.balance < 0 %}tw-text-red-400{% endif %}">
                          <c-amount.display
                            :amount="account_data.balance"
                            :prefix="account_data.currency.prefix"
                            :suffix="account_data.currency.suffix"
                            :decimal_places="account_data.currency.decimal_places"></c-amount.display>
                        </div>
                    </div>
                </div>
                {% if account_data.exchange %}
                      <c-amount.display
                        :amount="account_data.exchange.amount"
                        :prefix="account_data.exchange.prefix"
                        :suffix="account_data.exchange.suffix"
                        :decimal_places="account_data.exchange.decimal_places"
                        color="grey"
                        text-end></c-amount.display>
                {% endif %}
                {% endfor %}
              {% endif %}
              {% endfor %}
          </div>
        </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-xl-7 h-100">
      <canvas id="currencyBalanceChart"></canvas>
      <canvas id="accountBalanceChart"></canvas>
    </div>
  </div>
</div>

<script>
  var chartData = JSON.parse('{{ chart_data_currency_json|safe }}');
  var currencies = {{ currencies|safe }};

  var ctx = document.getElementById('currencyBalanceChart').getContext('2d');
  new Chart(ctx, {
      type: 'line',
      data: chartData,
      options: {
          responsive: true,
          interaction: {
              mode: 'index',
              intersect: false,
          },
          plugins: {
              title: {
                  display: true,
                  text: '{% translate 'Evolution by currency' %}'
              },
              tooltip: {
                  mode: 'index',
                  intersect: false
              }
          },
          scales: {
              x: {
                  display: true,
                  title: {
                      display: false,
                  }
              },
              ...Object.fromEntries(currencies.map((currency, i) => [
                  `y${i}`,
                  {
                      type: 'linear',
                      display: true,
                      grid: {
                          drawOnChartArea: i === 0,
                      },
                      ticks: {
                          display: false
                      },
                      border: {
                          display: false
                      }
                  }
              ]))
          }
      }
  });
</script>

<script>
  var chartData = JSON.parse('{{ chart_data_accounts_json|safe }}');
  var accounts = {{ accounts|safe }};

  var ctx = document.getElementById('accountBalanceChart').getContext('2d');
  new Chart(ctx, {
      type: 'line',
      data: chartData,
      options: {
          responsive: true,
          interaction: {
              mode: 'index',
              intersect: false,
          },
          stacked: false,
          plugins: {
              title: {
                  display: true,
                  text: '{% translate "Evolution by account" %}'
              },
              tooltip: {
                  mode: 'index',
                  intersect: false
              }
          },
          scales: {
              x: {
                  display: true,
                  title: {
                      display: false,
                  }
              },
              ...Object.fromEntries(accounts.map((account, i) => [
                  `y-axis-${i}`,
                  {
                      type: 'linear',
                      display: true,
                      position: i % 2 === 0 ? 'left' : 'right',
                      grid: {
                          drawOnChartArea: i === 0,
                      },
                      ticks: {
                          display: false
                      },
                      border: {
                          display: false
                      }
                  }
              ]))
          }
      }
  });
</script>

{% endblock %}