{% extends 'base.html' %}
{% block main_title %}
Accounts
{% endblock %}
{% block content %}

{% if not accounts_chart %}

<div class="{{classes_warning_box}}" role="alert">
  <p>File {{CWD}}/accounts_chart.json was not found. Find examples in the doc (TODO).
  </p>
</div>

{% else %}

{% if not accounts_chart.accounts %}

{% if accounts_chart.accounts_csv_file_error %}
<div class="{{classes_warning_box}}" role="alert">
  <p>File {{CWD}}/{{accounts_chart.accounts_csv_file}}, referred by {{CWD}}/accounts_chart.json, was not found.
  </p>
</div>
{%endif%}

No accounts found. Refer to pome's doc for example accounts charts.

{%endif%}

<header class="w-full flex justify-end">
  <a href="/transactions/new">
    <div class="btn btn-success text-lg font-bold">New Transaction</div>
  </a>
</header>

{% if not accounts_chart.are_all_accounts_used() %}
<div class="my-2">
  <input type="checkbox" id="show-unused-accounts" class="scale-150" onchange="toggleUnusedAccounts()" />
  <label for="show-unused-accounts" class="select-none cursor-pointer">Show unused accounts</label>
</div>
{% endif %}

{% for section_prefix in accounts_chart.section_prefixes_map %}
{% set accounts_of_section = accounts_chart.section_account_code_map[section_prefix] %}
{% set account_level = accounts_chart.prefix_level(section_prefix) %}
<div style="padding-left: {{3*account_level}}rem">
  {% set title_size = "text-base" %}
  {% set text_size = "text-base" %}
  {% set title_mb = "mb-0" %}
  {% if account_level == 0 %}
  {% set title_size = "text-2xl" %}
  {% set text_size = "text-xl" %}
  {% set title_mb = "mb-2" %}
  {% endif %}
  {% if account_level == 1 %}
  {% set title_size = "text-xl" %}
  {% set text_size = "text-xl" %}
  {% set title_mb = "mb-1" %}
  {% endif %}
  <h1 class="{{title_size}} {{title_mb}}">{{section_prefix}} -
    {{accounts_chart.section_prefixes_map[section_prefix].name}}</h1>
  {% if accounts_of_section%}
  <div class="pt-2 pb-5 pl-5 {{text_size}} {% if not
    accounts_chart.at_least_one_account_used_in_section(section_prefix) %}hidden {%endif%}" {% if not
    accounts_chart.at_least_one_account_used_in_section(section_prefix) %} data-unused {%endif%}>
    <table class="w-full">
      <thead class="text-left">
        <th>Code</th>
        <th>Name</th>
        <th>Balance</th>
      </thead>
      <tbody>
        {% for account_code in accounts_of_section %}
        {% set acc = accounts_chart.account_codes[account_code]%}
        <tr class="{% if not acc.is_used() %} hidden {% endif %}" {% if not acc.is_used() %} data-unused {%endif%}>
          <td>{{acc.code}}</td>
          <td style="width: 490px;"><a href="/accounts/{{acc.code}}" class="normal-link">{{acc.name}}</a></td>
          <td><span class="cursor-default"
              title="{{acc.balance(formatted=True, algebrised=False)}}">{{acc.balance(formatted=True,
              algebrised=True)}}</span>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {%endif%}
</div>

{% endfor %}



{% endif %}

<script lang="js">
  function toggleUnusedAccounts() {
    const checkbox = document.getElementById("show-unused-accounts")
    const unused_accounts = document.querySelectorAll("[data-unused]")
    console.log(checkbox)
    console.log(unused_accounts)
    if (checkbox.checked) {
      for (acc of unused_accounts) {
        acc.classList.remove("hidden")
      }
    } else {
      for (acc of unused_accounts) {
        acc.classList.add("hidden")
      }
    }
  }
</script>

{% endblock %}