{% extends 'layout.html' %}

{% block content %}
<div class="geruecht">
    <div class="g-item auto-width">
        <b>Username</b>
    </div>
    <div class="g-item auto-width">
        <b>Januar</b>
    </div>
    <div class="g-item auto-width">
        <b>Februar</b>
    </div>
    <div class="g-item auto-width">
        <b>März</b>
    </div>
    <div class="g-item auto-width">
        <b>April</b>
    </div>
    <div class="g-item auto-width">
        <b>Mai</b>
    </div>
    <div class="g-item auto-width">
        <b>Juni</b>
    </div>
    <div class="g-item auto-width">
        <b>July</b>
    </div>
    <div class="g-item auto-width">
        <b>August</b>
    </div>
    <div class="g-item auto-width">
        <b>September</b>
    </div>
    <div class="g-item auto-width">
        <b>Oktober</b>
    </div>
    <div class="g-item auto-width">
        <b>November</b>
    </div>
    <div class="g-item auto-width">
        <b>Dezember</b>
    </div>
    <div class="g-item auto-width">
        <b>Schulden</b>
    </div>
    <div class="g-item auto-width">
        <b>Ausgleich</b>
    </div>
</div>
    {% for user in users %}
        <div class="geruecht">
            <div class="g-item auto-width">
                <p>{{ user.username }}</p>
            </div>
            <div class="g-item auto-width">
                <p id="{{ user.id }}-jan" class="schulden">{{ "%.2f"%user.jan }} €</p>
                <p id="{{ user.id }}-jan-sub" class="bezahlt">{{ "%.2f"%user.jan_sub }} €</p>
            </div>
            <div class="g-item auto-width">
                <p id="{{ user.id }}-feb" class="schulden">{{ "%.2f"%user.feb }} €</p>
                <p id="{{ user.id }}-feb-sub" class="bezahlt">{{ "%.2f"%user.feb_sub }} €</p>
            </div>
            <div class="g-item auto-width">
                <p id="{{ user.id }}-maer" class="schulden">{{ "%.2f"%user.maer }} €</p>
                <p id="{{ user.id }}-maer-sub" class="bezahlt">{{ "%.2f"%user.maer_sub }} €</p>
            </div>
            <div class="g-item auto-width">
                <p id="{{ user.id }}-apr" class="schulden">{{ "%.2f"%user.apr }} €</p>
                <p id="{{ user.id }}-apr-sub" class="bezahlt">{{ "%.2f"%user.apr_sub }} €</p>
            </div>
            <div class="g-item auto-width">
                <p id="{{ user.id }}-mai" class="schulden">{{ "%.2f"%user.mai }} €</p>
                <p id="{{ user.id }}-mai-sub" class="bezahlt">{{ "%.2f"%user.mai_sub }} €</p>
            </div>
            <div class="g-item auto-width">
                <p id="{{ user.id }}-jun" class="schulden">{{ "%.2f"%user.jun }} €</p>
                <p id="{{ user.id }}-jun-sub" class="bezahlt">{{ "%.2f"%user.jun_sub }} €</p>
            </div>
            <div class="g-item auto-width">
                <p id="{{ user.id }}-jul" class="schulden">{{ "%.2f"%user.jul }} €</p>
                <p id="{{ user.id }}-jul-sub" class="bezahlt">{{ "%.2f"%user.jul_sub }} €</p>
            </div>
            <div class="g-item auto-width">
                <p id="{{ user.id }}-aug" class="schulden">{{ "%.2f"%user.aug }} €</p>
                <p id="{{ user.id }}-aug-sub" class="bezahlt">{{ "%.2f"%user.aug_sub }} €</p>
            </div>
            <div class="g-item auto-width">
                <p id="{{ user.id }}-sep" class="schulden">{{ "%.2f"%user.sep }} €</p>
                <p id="{{ user.id }}-sep-sub" class="bezahlt">{{ "%.2f"%user.sep_sub }} €</p>
            </div>
            <div class="g-item auto-width">
                <p id="{{ user.id }}-okt" class="schulden">{{ "%.2f"%user.okt }} €</p>
                <p id="{{ user.id }}-okt-sub" class="bezahlt">{{ "%.2f"%user.okt_sub }} €</p>
            </div>
            <div class="g-item auto-width">
                <p id="{{ user.id }}-nov" class="schulden">{{ "%.2f"%user.nov }} €</p>
                <p id="{{ user.id }}-nov-sub" class="bezahlt">{{ "%.2f"%user.nov_sub }} €</p>
            </div>
            <div class="g-item auto-width">
                <p id="{{ user.id }}-dez" class="schulden">{{ "%.2f"%user.dez }} €</p>
                <p id="{{ user.id }}-dez-sub" class="bezahlt">{{ "%.2f"%user.dez_sub }} €</p>
            </div>
            <div class="g-item auto-width">
                <p id="{{ user.id }}-sum">{{ "%.2f"%user.getsum() }} €</p>
            </div>
            <div class="g-item auto-width">
                <input class="g-item width-auto" type="text" id="{{ user.id }}-input">
            </div>
        </div>
    {% endfor %}
{% endblock %}
{% block bottombar %} <!-- , [[{% for user in users %} {{ user.id }}, {% endfor %} None], [{% for user in users %} $('#{{ user.id }}-input').attr('value'), {% endfor %} None]] -->
<!-- document.getElementById('1-input').value -->

    <div id="btn" class="right blue-button buttombar-element" textref="javascript://" onclick="Sijax.request('supply', [[{% for user in users %} {{ user.id }}, {% endfor %} null], [{% for user in users %}document.getElementById('{{ user.id }}-input').value, {% endfor %} null]]);">
      Anwenden
    </div>
{% endblock %}