{% extends "core/base.html" %}

{% block navi %}
    <a href="{% url 'core:subjects' %}">subjects</a>
    |
    <a href="{% url 'admin:index' %}">admin</a>
    |
    <a href="{% url 'logout' %}">logout</a>
{% endblock %}

{% block content %}

    <h1>balance prediction</h1>

    <form id="amount-form" method="get" action="{% url 'core:balance' %}">
        <label for="amount-textbox"></label>
        <input id="amount-textbox" name="amount" type="number" step="0.01" placeholder="amount">
        <input id="amount-button" type="submit" value="predict"/>
        {% if amount_error %}
            <p>try a number, stupid</p>
        {% endif %}
    </form>

    <p>starting with <b>{{ amount }}€</b> ...</p>

    {% if future_transactions %}
        <div id="transaction-list">
            {% for transaction in future_transactions %}
                <div class="transaction-block" style="
                        background: linear-gradient(90deg, transparent 10%, {{ transaction.color }} 100%);
                        border-left: 2px solid {{ transaction.color }};
                        ">
                    <div class="transaction-block-first">
                        <div class="date-block" {% if transaction.predicted %}style="color: #77AAEE;"{% endif %}>
                            {% if transaction.predicted %}&#x1F52E;{% else %}&#x1F5D2;{% endif %}
                            {{ transaction.date|date:"d.m.Y" }}
                        </div>
                        <div class="subject-block">
                            {{ transaction.subject }}
                        </div>
                    </div>
                    <div class="transaction-block-second">
                        <div class="amount-block">
                            {{ transaction.amount }}
                        </div>
                        <div class="balance-block">
                            {{ transaction.balance }}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <p>no data to show :/</p>
    {% endif %}

{% endblock %}