{% load main_extras statement_extras history_extras %}
{% load i18n %}
<div class="plot">
  <table class="full-width">
    <colgroup>
      <col class="desc">
      <col class="value">
      <col span="2" class="bar">
      <col class="value">
    </colgroup>
    <thead>
      <tr>
        <th scope="col">{% translate "Category" %}</th>
        <th scope="col" colspan="2">{% translate "Expenses" %}</th>
        <th scope="col" colspan="2">{% translate "Income" %}</th>
      </tr>
    </thead>
    <tbody>
      {% spaceless %}
        {% for cat in categories %}
          <tr>
            <th scope="row" class="l wi">
              {% if cat.category %}
                {% if year %}
                  <a href="{% history_url year=year category=cat.category account=account.id %}">{{ cat.category__icon|remix }}{{ cat.category__name }}</a>
                {% elif month %}
                  <a href="{% url_get "transactions" start_date=month end_date=month|end_of_month account=account.id category=cat.category %}">{{ cat.category__icon|remix }}{{ cat.category__name }}</a>
                {% elif statement %}
                  <a href="{% url_get "transactions" account=statement.account.id statement=statement.id category=cat.category %}">{{ cat.category_.icon|remix }}{{ cat.category__name }}</a>
                {% elif account %}
                  <a href="{% url_get "transactions" account=account.id category=cat.category %}">{{ cat.category__icon|remix }}{{ cat.category__name }}</a>
                {% else %}
                  {{ cat.category__icon|remix }}{{ cat.category__name }}
                {% endif %}
              {% endif %}
            </th>
            <td class="value">{{ cat.sum_m|pmvalue }}</td>
            <td class="bar m">
              {% if cat.sum_m %}
                <div style="width: {% widthratio cat.sum_m max -100 %}%"></div>
              {% endif %}
              {% if cat.sum < 0 %}
                <div class="tot" style="width:{% widthratio cat.sum max -100 %}%">
                  <span>{{ cat.sum|pmvalue }}</span>
                </div>
              {% endif %}
            </td>
            <td class="bar p">
              {% if cat.sum_p %}
                <div style="width: {% widthratio cat.sum_p max 100 %}%"></div>
              {% endif %}
              {% if cat.sum > 0 %}
                <div class="tot" style="width:{% widthratio cat.sum max 100 %}%">
                  <span>{{ cat.sum|pmvalue }}</span>
                </div>
              {% endif %}
            </td>
            <td class="value">{{ cat.sum_p|pmvalue }}</td>
          </tr>
        {% empty %}
          <tr>
            <td class="empty" colspan="5">{% translate "No transaction" %}</td>
          </tr>
        {% endfor %}
      {% endspaceless %}
    </tbody>
    <tfoot>
      {% if categories %}
        <tr>
          <th scope="row" class="l">{% translate "Total" %}</th>
          <td class="value">{{ total_m|pmvalue }}</td>
          <td class="bar m">
            <div style="width: {% widthratio total_m max -100 %}%"></div>
            {% if total < 0 %}
              <div class="tot" style="width:{% widthratio total max -100 %}%">
                <span>{{ total|pmvalue }}</span>
              </div>
            {% endif %}
          </td>
          <td class="bar p">
            <div style="width: {% widthratio total_p max 100 %}%"></div>
            {% if total > 0 %}
              <div class="tot" style="width:{% widthratio total max 100 %}%">
                <span>{{ total|pmvalue }}</span>
              </div>
            {% endif %}
          </td>
          <td class="value">{{ total_p|pmvalue }}</td>
        </tr>
      {% endif %}
      {% if statement and statement.diff != statement.sum %}
        <tr>
          <th scope="row" class="l">{% translate "Expected total" %}</th>
          <td class="c">{{ total|check:statement.diff }}</td>
          <td class="bar m">
            {% if statement.diff < 0 %}
              <div class="tot" style="width:{% widthratio statement.diff max -100 %}%">
                <span>{{ statement.diff|pmvalue }}</span>
              </div>
            {% endif %}
          </td>
          <td class="bar p">
            {% if statement.diff >= 0 %}
              <div class="tot" style="width:{% widthratio statement.diff max 100 %}%">
                <span>{{ statement.diff|pmvalue }}</span>
              </div>
            {% endif %}
          </td>
          <td></td>
        </tr>
      {% endif %}
    </tfoot>
  </table>
</div>
