{% extends 'base.html' %}

{% load i18n %}

{% block media %}
    {{ form.media }}
{% endblock %}

{% block content %}

<div id = 'main-content' class = 'clearfix {% block sectionclass %}{% endblock %}'>

    <form action="" name="purchaseorder" method="post" class = 'orderForm'>
    	{% csrf_token %}

    	{% if form %}
        <div class = 'form-wrapper clearfix'>

        <div class = 'required productEntryForm'>

            <h2>{% trans "Required" %}</h2>
            {{ form.non_field_errors }}

            <fieldset>
                {% for field in form %}
                    {% if field.field.required %}
                    <div class = '{{ field.name }} {{ field.field.widget.input_type }}'>
                        {% if field.label %}
                            {{ field.label_tag|safe }}
                        {% endif %}
                        {{ field.errors }}
                        {{ field|safe }}
                        {% if field.help_text %}<span class = 'help-text'>{{ field.help_text }}{% endif %}
                    </div>
                    {% endif %}
                {% endfor %}
            </fieldset>
                
        </div>
    	    
        <div class = 'optional'>        
            <h2>{% trans "Optional" %}</h2>                   
            <fieldset>	            
                {% for field in form %}
                    {% if not field.field.required %}
                    <div>
                        {{ field.label_tag|safe }} {{ field.errors }} {{ field|safe }}
                        {% if field.help_text %}<span class = 'help-text'>{{ field.help_text }}{% endif %}
                    </div>
                    {% endif %}
                {% endfor %}
            </fieldset>
        </div>

        </div>

        {% endif %}

        {% block formset %}
        
        {% if formset %}

            {# Using the form prefix as class for CSS targeting purposes #}

            {% if formset_form %}
                
                {# old formset style, should deprecate #}
                <div class = 'formset-wrapper formset-{{ formset.prefix }}'>
                    
                    <h4>Products</h4>
                    {{ formset.non_form_errors }}
                    {{ formset.management_form }}
                    
                    <ol id = 'productEntryList' class = '{{ formset_class }} {% if formset_form == 'generic/formset_form.html' %}formset{% endif %}'>
                        {% for form in formset.forms %}
                            <li>
                                {# Use different styling (without fieldset) for generic formset #}
                                {% if formset_form == 'generic/formset_form.html' %}
                                    {{ form.errors }}
                                    {# <div class = 'count'>{{ forloop.counter }}.</div> #}
                                    {% include formset_form %}
                                {% else %}
                                <fieldset>
                                    {{ form.errors }}
                                    {# <div class = 'count'>{{ forloop.counter }}</div> #}
                                    {% include formset_form %}
                                </fieldset>
                                {% endif %}
                            </li>
                        {% endfor %}
                    </ol>
                    
                </div>
                
                <ol id='empty_form_placeholder' style='display:none'>
                    <li>
                        <fieldset>
                            {{ form.errors }}
                            <div class = 'count'>.</div>
                            {% include formset_form with form=formset.empty_form %}
                        </fieldset>
                    </li>
                </ol>

            {% else %}
                
                {# this approach is more scalable #}
                <div class = 'formset-wrapper formset-{{ formset.prefix }} {{ formset_class }}'>
                    {% include 'generic/formset.html' %}
                </div>
            {% endif %}

        {% endif %}

        {% endblock %}

        <div class = 'clear'></div>
        <button class = 'button submit'><span>{% trans "Submit" %}</span></button>
        
    </form>

</div>

{% endblock %}