{% load i18n lfs_tags %}

<div id="accessories-inline">
    <form id="add-accessories-form"
          action="{% url lfs.manage.views.add_accessories product.id %}"
          method="post">

        {% if page.has_previous %}
            <a class="accessories-page-link"
               href="{% url lfs.manage.views.manage_accessories_inline product.id%}?page=1">First</a>
            <a class="accessories-page-link"
               href="{% url lfs.manage.views.manage_accessories_inline product.id%}?page={{page.previous_page_number}}">Previous</a>
        {% else %}
            <span>{% trans 'First' %}</span>
            <span>{% trans 'Previous' %}</span>
        {% endif %}

        {{page.number}} / {{paginator.num_pages}}

        {% if page.has_next %}
            <a class="accessories-page-link"
               href="{% url lfs.manage.views.manage_accessories_inline product.id%}?page={{page.next_page_number}}">Next</a>
            <a class="accessories-page-link"
               href="{% url lfs.manage.views.manage_accessories_inline product.id%}?page={{paginator.num_pages}}">Last</a>

        {% else %}
            <span>{% trans 'Next' %}</span>
            <span>{% trans 'Last' %}</span>
        {% endif %}

        <div>
            <table class="lfs-manage-table middle">
                <tr>
                    <th class="checkbox">
                        <input type="checkbox"
                               class="select-all-1" />
                    </th>
                    <th>
                        {% trans 'Name' %}
                    </th>
	                <th class="middle">
	                    {% trans 'SKU' %}
	                </th>
	                <th class="small">
	                    {% trans 'Active' %}
	                </th>
                	<th class="middle">
                        {% trans 'Sub type' %}
                    </th>
                    <th class="small number">
                        {% trans 'Price' %}
                    </th>
                    <th class="tiny right">
						{% trans "Edit" %}
                    </th>
                </tr>
                {% for product in page.object_list %}
                    <tr class="{% cycle 'even' 'odd' %}">
                        <td>
                            <input type="checkbox"
                                   name="product-{{product.id}}"
                                   class="select-1" />
                        </td>
                        <td>
                            {{ product.get_name }}
                        </td>
                        <td>
                            {{ product.get_sku }}
                        </td>
                        <td>
							{% if product.is_active %}
								<img src="{{ MEDIA_URL }}/lfs/icons/tick.png" />
							{% else %}
								<img src="{{ MEDIA_URL }}/lfs/icons/cross.png" />
							{% endif %}
                        </td>
                        <td>
                            {{ product.sub_type|sub_type_name }}
                        </td>
                        <td class="number">
                            {{ product.price|currency }}
                        </td>
						<td class="right">
							<a href="{% url lfs_product product.slug %}">
		                        <img src="{{ MEDIA_URL }}lfs/icons/zoom.png"
		                             alt="Edit"
		                             title="{% trans 'Edit product' %}" />
							</a>
							<a href="{% url lfs_manage_product product.id %}">
		                        <img src="{{ MEDIA_URL }}lfs/icons/pencil.png"
		                             alt="Edit"
		                             title="{% trans 'Edit product' %}" />
							</a>
						</td>
                    </tr>
                {% endfor %}
            </table>
        </div>
        <input type="hidden"
               name="keep-filters"
               value="1" />

        <input type="submit"
               id="add-accessories-button"
               value="{% trans 'Add to accessories' %}" />

    </form>

    <h2 class="heading-middle">{% trans 'Accessories' %}</h2>
        <form id="accessories-update-form"
              action="{% url lfs.manage.views.remove_accessories product.id %}"
              method="post">
            <table class="lfs-manage-table">
                <tr>
                    <th class="checkbox">
                        <input type="checkbox"
                               class="select-all-2" />
                    </th>
                    <th>
                        {% trans 'Name' %}
                    </th>
                    <th class="tiny">
                        {% trans 'Position' %}
                    </th>
                    <th class="small">
                        {% trans 'Quantity' %}
                    </th>
	                <th class="middle">
	                    {% trans 'SKU' %}
	                </th>
	                <th class="small">
	                    {% trans 'Active' %}
	                </th>
                    <th class="middle">
                        {% trans 'Sub type' %}
                    </th>
                    <th class="small number">
                        {% trans 'Price' %}
                    </th>
                    <th class="tiny right">
                        {% trans 'Edit' %}
                    </th>
                </tr>

                {% for product_accessory in product_accessories %}
                    <tr>
                        <td>
                            <input type="checkbox"
                                   name="accessory-{{product_accessory.accessory.id}}"
                                   class="select-2"/>
                        </td>
                        <td>
                            {{product_accessory.accessory.get_name}}
                        </td>
                        <td>
                            <input class="number"
                                   type="text"
                                   size="3"
                                   name="position-{{product_accessory.accessory.id}}"
                                   value="{{product_accessory.position}}" />
                        </td>
                        <td>
                            <input class="number"
                                   type="text"
                                   size="5"
                                   name="quantity-{{product_accessory.accessory.id}}"
                                   value="{{product_accessory.quantity}}" />
                        </td>
						<td>
							{{ product_accessory.accessory.get_sku }}
						</td>
						<td>
							{% if product_accessory.accessory.is_active %}
								<img src="{{ MEDIA_URL }}/lfs/icons/tick.png" />
							{% else %}
								<img src="{{ MEDIA_URL }}/lfs/icons/cross.png" />
							{% endif %}
						</td>
                        <td>
                            {{product_accessory.accessory.sub_type|sub_type_name}}
                        </td>
                        <td class="number">
                            {{product_accessory.accessory.get_price|currency}}
                        </td>
						<td class="right">
							<a href="{% url lfs_product product.slug %}">
		                        <img src="{{ MEDIA_URL }}lfs/icons/zoom.png"
		                             alt="Edit"
		                             title="{% trans 'Edit product' %}" />
							</a>
							<a href="{% url lfs_manage_product product.id %}">
		                        <img src="{{ MEDIA_URL }}lfs/icons/pencil.png"
		                             alt="Edit"
		                             title="{% trans 'Edit product' %}" />
							</a>
						</td>
                    </tr>
                {% endfor %}
            </table>

            <input type="hidden"
                   name="keep-filters"
                   value="1" />

            <input type="submit"
                   class="accessories-update-button"
                   name="save"
                   value="{% trans 'Save accessories' %}" />

            <input type="submit"
                   class="accessories-update-button"
                   name="remove"
                   value="{% trans 'Remove from accessories' %}" />
        </form>
</div>