{% extends "layout.jinja" %}
{% from "macros.jinja" import left_arrow, right_arrow, colorize %}

{% set JSFunction = "showJS" %}
{% set additionalJS = "highstock" %}

{% block heading %}
    {% if exps | length > 1 -%}
        Aktuelle Kosten
    {%- else -%}
        Kosten für {{exps[0]|date}}
    {% endif %}
{% endblock %}

{% block content %}
    {% for e, p in zip(exps,pies) %}
        {%+ if exps | length > 1 %}<h2>{{e|date}}</h2>{% endif %}
        <div>
        <div class="month_exp">
        {% for c in e.catexps | sort(attribute="cat.name") %}
            {% call(exp) detail(name=c.cat.name, sum=c.sum, set=c.all) -%}
                <a href="{{ url_for(".edit", id = exp.id) }}">{{exp.day}}.{{exp.month}}. -- {{exp.description}}: {{exp.expense | eur }}</a>
            {%- endcall %}
        {% endfor %}

        {% call(exp) detail(name="Konstant", sum=e.constsum, set=e.consts) -%}
            <a href="{{ url_for("consts.show", id = exp.id) }}">{{exp.monthly}} -- {{exp.description}}</a>
        {%- endcall %}
    
        {% call(exp) detail(name="In Summa", sum=e.sum, set=e.all, color="#ff2d2d") -%}
            <a href="{{ url_for(".edit", id = exp.id) }}">{{exp.day}}.{{exp.month}}. -- {{exp.description}}: {{exp.expense | eur}}</a>
        {%- endcall %}
        </div>
        <div class="pie" data-pie='{{ p | tojson }}'></div>
        </div>
    {% endfor %}

    {# Note: exps are given _reversed_, i.e. "exps | last" is
       the _first_ on the timeline #}
    {% set d = exps | last | prev_date | date %}
    {{ left_arrow(url_for(".show_date_str", p = d), d) }}

    {% set first = exps | first %}
    {% if not first is last_date %}
        {% set d = first | next_date | date %}
        {{ right_arrow(url_for(".show_date_str", p = d), d) }}
    {% endif %}
{% endblock content %}

{% macro detail(name, sum, set, color=None) %}
    <div class="detail">
        <img class="mark" src="{{ "images/closed.png" | static_url }}">
        {% call colorize(fgcolor=color) -%}
            <span class="heading">{{name}}:</span> <span class="sum">{{sum | eur}}</span><br>
        {%- endcall %}
        <div class="details">
            <ul>
                {% for exp in set %}
                    <li class="expense">{{ caller(exp) }}</li>
                {% endfor %}
            </ul>
        </div>
    </div>
{% endmacro %}