{% extends "layout.html" %}
{% load ocyan_thumbnail i18n %}

{% block content %}
<section class="quotation">
	<div class="container">
	    <div class="row">
	    	<div class="col-12">
	            <span class="h2 quotation-header">{% trans 'Quotation request' %}</span>
	    	</div>
	    	<div class="col-xl-2 col-sm-6">
	    		<article class="product">
		            <div>{% lazy_picture product.primary_image.original "400x400" %}</div>
					<div class="product-description-wrapper">
			            <div class="product-title">{{product.get_title}}</div>
			            <div class="product-description">{{product.long_description|striptags|truncatechars:100}}</div>
		        	</div>
		        </article>
	    	</div>
			<div class="col-xl-10 col-sm-6 quotation-form-wrapper">
		        <form action="{% url 'quotation' pk=product.pk %}" method="post" class="quotation-form">
		            {% csrf_token %}
		            {% block form_fields %}
		        	<div class="row">
		            	<div class="col-xl-6">
		            		{% include 'oscar/partials/form_field.html' with field=form.product_pk %}
			                {% include 'oscar/partials/form_field.html' with field=form.quantity %}
			                {% include 'oscar/partials/form_field.html' with field=form.email %}
			                {% include 'oscar/partials/form_field.html' with field=form.name %}
			                {% include 'oscar/partials/form_field.html' with field=form.company %}
							{% if form.captcha %}
								{% include 'oscar/partials/form_field.html' with field=form.captcha %}
							{% endif %}
		            	</div>
		            	<div class="col-xl-6">
		                {% include 'oscar/partials/form_field.html' with field=form.note %}
		            	</div>
		            </div>
		            {% endblock %}
		            <div class="form-group mt-auto">
		            	<div class="w-100 d-flex justify-content-end">
			                <div class="quotation-button-wrapper">
			                    <button class="btn btn-primary btn-lg" type="submit" data-loading-text="{% trans 'Saving...' %}">{% trans "Quotation request" %}</button>
			                </div>
		            	</div>
		            </div>
		        </form>
	    	</div>
	    </div>
	</div>
</section>
{% endblock %}