{% extends "base.html" %}
{% load gravatar %}
{% block header %}
        {% include "nav.html" with active="deposit" %}
{% endblock %}

{% block content %}
<section id="deposit" class="row-fluid">
    {% if messages %}
    <section class="row-fluid">
        <div class="span4">
            {% 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 %}
    <form id="order" method="post" class="form-stacked" autocomplete="off">
        {% csrf_token %}
        <fieldset>
            <section id="customer" class="row-fluid">
            <h2>Hvem skal sette inn penger?</h2>
            <!-- Typeahead customer field -->
            <input name="customer_name" id="id_customer_typeahead" value="" data-provide="typeahead" data-source="{{users_js}}" />
            <!-- Actual customer select field (hidden) -->
            <div style="display:none;">{{form.user }}</div>
            <ul class="well">
                {% for user in users %}
                <li class="customer">
                {% if user.get_profile.image %}
                    <img class="profile" src="{{ user.get_profile.image }}" /><br />
                {% else %}
                    <img class="profile" src="{% gravatar_for_user user 50 %}" /><br />
                {% endif %}
                <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>
                </li>
                </li>
                {% endfor %}
            </ul>
            </section>
            <section id="amount">
            <h2>Hvor mye?</h2>
            {{form.amount}}
            {{form.amount.errors}}
            </section>
        </fieldset>
        <div class="form-actions">
                <button type="submit" class="btn btn-large btn-primary" name="submit_order">Sett inn</button>
                <a href="{% url register %}" class="btn">Avbryt</a>
        </div>
    </form>
</section>
{% endblock %}
{% block tailinc %}
    <script src="{{ STATIC_URL }}js/bootstrap-typeahead.js"></script>
    <script src="{{ STATIC_URL }}js/deposit.js"></script>
{% endblock %}