{% extends "base.html" %}
{% load staticfiles %}
{% block active_register %}active{% endblock %}

{% block content %}
<section id="register" 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 %}
    <form id="order" class="form-stacked" method="post" autocomplete="off">
        <fieldset>
            {% csrf_token %}
            <!-- Formset validation fields -->
            <input type="hidden" name="form-TOTAL_FORMS" value="{{ products|length }}" id="id_form-TOTAL_FORMS" />
            <input type="hidden" name="form-INITIAL_FORMS" value="{{ products|length }}" id="id_form-INITIAL_FORMS" />
            <input type="hidden" name="form-MAX_NUM_FORMS" id="id_form-MAX_NUM_FORMS" />

            <section id="customer">
                {% if users %}
                <div class="row">
                    <div class="col-md-12">
                        <h2 title="Sortert etter hvem som kjøpte noe sist.">Hvem kjøper?</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <!-- Typeahead customer field -->
                        <input name="customer_name" type="text" id="id_customer_typeahead" value="" data-provide="typeahead" data-source="{{users_js}}" class="form-control" />
                        <!-- Actual customer select field (hidden) -->
                        <div style="display:none;">{{orderform.customer }}</div>
                        <br />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <ul class="well">
                            <li class="customer">{% spaceless %}
                                <img class="profile" src="{% static "dist/images/unknown_person.png" %}" alt="Profile picture" /><br />
                                <span class="name">Ekstern</span><br />
                                <span class="balance">&nbsp;</span>
                            {% endspaceless %}</li>
                            {% for user in users %}<li class="customer{% if user.profile.last_purchase_date < half_a_year_ago and not user.profile.last_purchase == None %} infrequent hidden{% endif %}">{% spaceless %}
                                <img class="profile" src="{{ user.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.profile.balance }}</span>
                                <span class="id" style="display:none;">{{ user.id }}</span>
                                {% endspaceless %}</li>{% endfor %}
                        </ul>
                        <div class="users-description pull-right">
                            <small>Viser: De med minst <strong>{{ cheapest_product_price }}</strong> i saldo<span class="infrequent-users"> og mer enn ett kjøp siden <strong>{{ half_a_year_ago }}</strong></span>. <a href="#" class="toggle-infrequent-users">Vis alle</a></small>
                        </div>
                    </div>
                </div>
                {%else%}
                <div class="row">
                    <div class="col-md-3">
                        <h2>Hvem kjøper?</h2>
                        <div class="alert alert-error">Ingen har positiv saldo i BBS.</div><a href="{% url 'deposit' %}" class="btn">Sett inn penger</a>
                    </div>
                </div>
                {%endif%}
            </section>

            <section id="products" class="row">
                <div class="col-md-12">
                    <h2>Kjøper hva?</h2>
                    <ul class="well">
                        {% for product in products %}
                                <li id="form-{{forloop.counter0}}" class="product"><input type="hidden" name="form-{{ forloop.counter0 }}-product" value="{{product.id }}" />
                                <input type="hidden" id="form-{{ forloop.counter0 }}-amount" name="form-{{ forloop.counter0 }}-amount" value="0" class="span2" size="2" />
                                <input type="hidden" name="form-{{ forloop.counter0 }}-unit_price_int" value="{{product.sale_price_int }}" />
                                <input type="hidden" name="form-{{ forloop.counter0 }}-unit_price_ext" value="{{product.sale_price_ext }}" />
                                <span class="qty">0</span>
                                {% if product.image %}
                                        <img class="product" src="{{ product.image.url }}" /><br />
                                {% else %}
                                        <img class="product" src="{% static "dist/images/product.png" %}" /><br />
                                {% endif %}
                                <span class="name">{{ product.name }}</span> - <span class="sale_price_ext">{{product.sale_price_ext|floatformat:0}}</span>/<span class="sale_price_int">{{product.sale_price_int|floatformat:0}}</span>
                                </li>
                        {% endfor %}
                    </ul>
                </div>
            </section>
        </fieldset>
        <div class="form-actions">
                <div class="col-xs-3 total">
                    <h2>Totalt: <span class="total_text"></span></h2>
                </div>
                <button type="submit" class="btn btn-lg btn-primary" name="submit_order">Kjøp</button>
                <button type="reset" class="btn btn-default">Start på nytt</button>
        </div>
    </form>
</section>
{% endblock %}