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

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

{% block js %}
    {{ super() }}
    <script type="text/javascript" src="{{ "js/show.js" | static_url }}"></script>
{% endblock %}

{% block content %}
    {% for e in exps %}
        {% if exps | length > 1 %}<h2>{{e|date}}</h2>{% endif %}
        <div style="margin-bottom: 10px">
        <div style="display:inline-block; width:270px; vertical-align: top">
        {% for c in e.catexps | sort(attribute="cat.name") %}
            {% call(exp) detail(name=c.cat.name, sum=c.expense, 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="Constant", 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 style="display:inline-block; height:250px; margin-left:50px">
            <object type="image/svg+xml" height="100%" data="{{ url_for("svg.month", month = e.date.month, year = e.date.year) }}"></object>
        </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 %}