{% load i18n widget_tweaks cosinnus_tags %}

{% comment %}  
    Cosinnus Field Framework Template
        To be used for *ALL* fields in all forms inside cosinnus. Most fields can be templated using this, but there are specific 
        implementations for fields like checkboxes or inline formsets (check the fields template folder).
    
    Parameters:
        - field: supply the formfield you want to render
        - *or* field_html: supply some html to be displayed inside the field. ``field`` can additionally be passed, but will only be used
                for error and optional status display
        - label: the <label> for the field
        - legend: a descriptive text, shown as an explanation for the field
        - placeholder: the field placeholder content
        
    Extra Options:
        - first: indicates this is the first field in the form, removing the top margin
        - large-field: removes the 40px height constraint and wraps around the content. used for larger (or smaller) fields
        - unstyled: will apply no styles to field-input, so that custom ``field_html`` is not affected by the default styles
        - field_classes: extra CSS classes to apply to the input area
        - extra_html: extra HTML that will be placed after the field
        - help_popup: if supplied, add a Help-Button next to the label which will popup a help field using the supplied id string

{% endcomment %}

{% if field or field_id %}{% captureas for_id %}{% if field %}{{ field.id_for_label }}{% else %}{{ field_id }}{% endif %}{% endcaptureas %}{% endif %}

<div class="cosinnus-field {% if label and not field and not field_html %}header-only{% endif %}">
	
	{% if label %}
		<label {% if for_id %}for="{{ for_id }}"{% endif %} {% if first %}class="first"{% endif %}>
		    {{ label }}
		    {% if field and not field.field.required %}
                ({% trans "optional" context "written next to optional form fields" %})
            {% endif %}
            {% if help_popup %}
                {% include 'cosinnus/common/help_button_for_popup.html' with help_text_id=help_popup %}
            {% endif %}
		</label>
	{% endif %}
	
	{% if legend %}
	    <div class="field-description no-select">{{ legend }}</div>
	{% endif %}
	
	{% if field and field.errors %}
	   {{ field.errors }}
	{% endif %}
	
	{% if field or field_html %}
		<div class="{% if not unstyled %}cosinnus-field-input{% endif %} {% if not large_field %}regular-field{% endif %} {% if field_classes %}{{ field_classes }}{% endif %}">
	        {% if field_html %}
	            {{ field_html|safe }}
	        {% elif field %}
	            {% render_field field placeholder=placeholder autocomplete="off" %}
	        {% endif %}
	    </div>
    {% endif %}
    
    {% if extra_html %}
       {{ extra_html|safe }}
    {% endif %}
</div>
