{% extends "base.html" %}
{% load widget_tweaks %}
{% block active_deposit %}active{% endblock %}

{% block content %}
<section id="deposit" class="row">
    {% if messages %}
    <section class="row">
        <div class="col-xs-4">
            {% for message in messages %}
                <div {% if message.tags %} class="alert alert-{{ message.tags }}"{% endif %}>{{ message }}<a class="close" data-dismiss="alert">×</a></div>
            {% endfor %}
        </div>
    </section>
    {% endif %}
    {% if not perms.main.can_add_transaction and limit_deposits %}
    <section class="row">
        <div class="col-xs-4">
            <p class="alert alert-warning">Du har ikke tilgang til å sette inn penger.</p>
            <p>Spør en av disse om de kan hjelpe deg:</p>
            <ul>
            {% for u in allowed_users %}
                <li style="padding-bottom: 8px;"><img src="{{u.get_profile.image }}" />{{u.first_name }} {{u.last_name }}</li>
            {% endfor %}
            </ul>
        </div>
    </section>

    {% else %}
    <form id="order" method="post" class="form-stacked" autocomplete="off">
        {% csrf_token %}
        <section id="customer">
            <div class="row">
                <div class="col-md-12">
                    <h2>Hvem skal sette inn penger?</h2>
                </div>
            </div>
            <div class="row">
                <!-- Typeahead customer field -->
                <div class="col-md-3">
                    <input name="customer_name" id="id_customer_typeahead" type="text" value="" data-provide="typeahead" data-source="{{users_js}}" class="form-control" /><br />
                    <!-- Actual customer select field (hidden) -->
                    <div style="display:none;">{{form.user }}</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <ul class="well">
                        {% for user in users %}
                        <li class="customer">{% spaceless %}
                        <img class="profile" src="{{ user.get_profile.profile_image_url }}" alt="Profile picture"/><br />
                        <span class="name">{{ user.first_name }} {{ user.last_name|slice:":1"}}</span><br />
                        <span class="balance">{{ user.get_profile.balance }}</span>
                        <span class="id" style="display:none;">{{ user.id }}</span>
                        {% endspaceless %}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </section>
        <section id="amount">
            <div class="row">
                <div class="col-md-12">
                    <h2>Hvor mye?</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    {{form.amount|add_class:"form-control"}}
                    {{form.amount.errors}}<br />
                </div>
            </div>
        </section>
        <div class="row">
            <div class="col-md-12">
                <button type="submit" class="btn btn-lg btn-primary" name="submit_order">Sett inn</button>
                <a href="{% url 'register' %}" class="btn btn-default">Avbryt</a>
            </div>
        </div>
    </form>
    {% endif %}
</section>
{% endblock %}