{% load i18n %}
{% load lfs_tags %}
{% load reviews_tags %}

<form id="product-form"
      action="{% url lfs.catalog.views.product_form_dispatcher %}"
      data="{% url lfs_select_variant_from_properties %}"
      method="post">

    <div class="product-images">
        <div class="main-image">
            {% if variant.get_image %}
                <a href="{{ variant.get_image.url_400x400 }}"
                   class="product-image">
                    <img src="{{ variant.get_image.url_200x200 }}"
                         alt="{{ variant.get_name}}" />
                </a>
            {% endif %}
        </div>
        <div class="sub-images">
            {% for image in variant.get_sub_images %}
                <a href="{{ image.image.url_400x400 }}"
                   class="product-image">
                    <img src="{{ image.image.url_60x60 }}"
                         title="{{ image.title }}"
                         alt="{{ image.title }}" />
                </a>
            {% endfor %}
        </div>
    </div>

    <h1 class="product-title">
        {{ variant.get_name }}
    </h1>

    {# Displayed properties #}
    <div class="product-properties">
        {% for property in variant.get_displayed_properties %}
            <div>
                {{ property.title }}: {{ property.value }} {{ property.unit|safe }}
            </div>
        {% endfor %}
    </div>

    {% shipping variant %}

    {% average_for_instance variant %}

    {# Prices #}
    <div class="prices">
        {% if variant.get_for_sale %}
            <div>
                <span class="for-sale-standard-price" nowrap="nowrap">
                    <span class="for-sale-standard-price-value">
                        {{ variant.get_standard_price|currency }}
                    </span>
                    * {% if product.price_unit %}/ {{ product.price_unit }}{% endif %}</span>
                <span class="for-sale-price" nowrap="nowrap">
                    <span class="for-sale-price-value">
                        {{ variant.get_price|currency }}
                    </span>
                    * {% if product.price_unit %}/ {{ product.price_unit }}{% endif %}
                </span>
            </div>
            <div class="price-disclaimer">
                {% trans '*inc. VAT' %}
            </div>
        {% else %}
            <div class="standard-price"
                  nowrap="nowrap">
                  <span class="standard-price-value">{{ variant.get_price|currency }}</span>* {% if product.price_unit %}/ {{ product.price_unit }}{% endif %}
            </div>
            <div class="price-disclaimer">
                {% trans '*inc. VAT' %}
            </div>
        {% endif %}

    </div>

    {# Configurable properties #}
    {% if product.is_configurable_product %}

        <table class="cp-properties"
               id="cp-url"
               data="{% url lfs_calculate_price product.id %}">

            {% for property in properties %}
                <tr>
                    {% if property.obj.is_select_field %}
                        <td class="property-label">
                            {{ property.title }}:
                        </td>
                        <td>
                            <select class="cp-property"
                                    name="property-{{ property.id }}">
                                {% if not property.obj.required %}
                                    <option>---</option>
                                {% endif %}
                                {% for option in property.options %}
                                    <option value="{{ option.id }}"
                                        {% if option.selected %}selected="selected"{% endif %}>
                                        {{ option.name }}

                                        {% if property.display_price %}
                                         / {{ option.price|currency }}
                                        {% endif %}
                                    </option>
                                {% endfor %}
                            </select>
                        </td>
                        <td></td>
                    {% else %}
                        <td class="property-label">
                            {{ property.title }}:
                        </td>
                        <td class="right">
                            <input class="right product-input-field" type="input" size="6" name="property-{{ property.id }}" value = "{{ property.value }}" />
                        </td>
                        <td>
                            {{ property.unit }}
                        </td>
                    {% endif %}
                </tr>
            {% endfor %}
        </table>
    {% endif %}

    <br clear="both">
    {% if variant.is_deliverable %}
        <table align="right" class="buttons">
            <tr>
                <td>
                {% if product.active_packing_unit %}
                    <div class="product-quantity packing-unit"
                        id="packing-url"
                        data="{% url lfs_calculate_packing product.id %}">
                        <input class="number product-quantity"
                               name="quantity"
                               size="3"
                               type="text"
                               value="1" /> {{ product.unit }}
                    </div>
                </td>
                {% else %}
                    <td>
                        {% if product.unit %}
                            {{ product.unit }}:
                        {% else %}
                            {% trans "Quantity" %}:
                        {% endif %}
                    </td>
                    <td class="product-quantity">
                        <input name="quantity"
                               size="3"
                               type="text"
                               value="1" />
                    </td>
                {% endif %}
                <td nowrap="nowrap">
                    <button class="emphasized"
                           type="submit"
                           name="add-to-cart">{% trans 'Add to cart' %}</button>
                </td>
            </tr>
        </table>
        <div class="packing-result">
            {{ packing_result }}
        </div>
    {% else %}
        <button class="emphasized"
                onclick="window.location='{% url contact_form %}'; return false"
                name="">{% trans 'Send request' %}</button>
    {% endif %}

    <p class="product-description">
        {{ variant.get_description|safe}}
    </p>

    {# Product with variants #}

    {% if product.is_product_with_variants %}

        <div class="variants">
            <h1 class="section">{% trans 'Variants' %}</h1>

            {# List #}
            {% ifequal product.variants_display_type 0 %}
                <table class="product-variants lfs-default"
                       data="{% url lfs_select_variant %}">
                    <tr>
                        <th></th>
                        <th>
                            {% trans 'Name' %}
                        </th>
                        {% for property in properties %}
                            <th>
                                {{ property.title }}
                            </th>
                        {% endfor %}
                        <th class="number">
                            {% trans 'Price' %}
                        </th>
                    </tr>
                    {% for product_variant in variants %}
                        <tr>
                            <td class="select">
                                <input type="radio"
                                       class="variant"
                                       name="variant_id"
                                       value="{{ product_variant.id }}"
                                       {% ifequal product_variant.id variant.id %}checked="checked"{% endifequal %}  />
                            </td>
                            <td>
                                {{ product_variant.get_name }}
                            </td>
                            {% for property in product_variant.get_variant_properties %}
                                <td>
                                    {{ property.value }}
                                </td>
                            {% endfor %}
                            <td class="number"
                                nowrap="nowrap">
                                {{ product_variant.get_price|currency }}
                            </td>
                        </tr>
                    {% endfor %}
                </table>
            {% endifequal %}

            {# Select field #}
            {% ifequal product.variants_display_type 1 %}

                <div>
                    {% for property in properties %}
                        <div>
                            <div class="property-label">
                                {{ property.title }}:
                            </div>
                            <select class="property"
                                    name="property_{{ property.id }}">
                                {% for option in property.options %}
                                    <option value="{{ option.id }}"
                                            {% if option.selected %}selected="selected"{% endif %}>
                                        {{ option.name }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                    {% endfor %}
                </div>
            {% endifequal %}
        </div>
    {% endif %}

    {# Accessories #}
    {% if product_accessories %}
        <div class="accessories">
            <h1 class="section">{% trans 'Accessories' %}</h1>
            <table class="product-accessories lfs-default">
                <tr>
                    <th></th>
                    <th>{% trans 'Name' %}</th>
                    <th class="number">{% trans 'Quantity' %}</th>
                    <th class="number">{% trans 'Price' %}</th>
                    <th class="number last">{% trans 'Total' %}</th>
                </tr>
                {% for product_accessory in product_accessories %}
                    <tr>
                        <td class="checkbox-left">
                            <input type="checkbox"
                                   name="accessory-{{ product_accessory.accessory.id }}"/>
                        </td>
                        <td>
                            <a href="{{ product_accessory.accessory.get_absolute_url }}">
                                {{ product_accessory.accessory.get_name|truncatewords_html:5 }}
                            </a>
                        </td>
                        <td class="number">
                            <input type="hidden"
                                   name="quantity-{{ product_accessory.accessory.id }}"
                                   value="{{ product_accessory.quantity }}" />
                            {{ product_accessory.quantity|quantity }}
                        </td>
                        <td class="number"
                            nowrap="nowrap">
                            {{ product_accessory.accessory.get_price|currency }}
                        </td>
                        <td class="number"
                             nowrap="nowrap">
                            {{ product_accessory.get_price|currency }}
                        </td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    {% endif %}

    <input type="hidden"
           name="product_id"
           value="{{ product.id }}" />

    <input type="hidden"
           name="variant_id"
           value="{{ variant.id }}" />

</form>
