{% load i18n %}

<h2 class="heading-first">{% trans 'Attachments' %}</h2>

{% if product.has_attachments %}
    <form id="product-attachments-update-form"
          action="{% url lfs_manage_update_attachments product.id %}"
          method="post">

        <table class="lfs-manage-table attachments">
            <tr>
                <th class="tiny">
                    <input type="checkbox"
                           class="select-all"
                           value="delete-attachments" />
                </th>
                <th class="small">
                    {% trans 'Title' %}
                </th>
                <th class="small">
                    {% trans 'Description' %}
                </th>
                <th class="right-padding">
                    {% trans 'Position' %}
                </th>
                <th class="small right-padding">
                    {% trans 'Manage' %}
                </th>
            </tr>
            {% for attachment in product.attachments.all %}
                <tr>
                    <td>
                        <input type="checkbox"
                               class="select-delete-attachments"
                               name="delete-{{ attachment.id }}"
                               style="float:left" />
                    </td>
                    <td>
                        <input type="text" name="title-{{ attachment.id }}" value="{{ attachment.title }}" style="width:300px" />
                    </td>
                    <td>
                        <textarea name="description-{{ attachment.id }}">{{ attachment.description }}</textarea>
                    </td>
                    <td class="right-padding">
                        <input type="text" name="position-{{ attachment.id }}" value="{{ attachment.position }}" size="3" />
                    </td>
                    <td class="right-padding">
                        {% if not forloop.first %}
                            <a class="up ajax-link"
                               href="{% url lfs_move_product_attachment attachment.id %}?direction=0"
                               title='{% trans "Move Up" %}'></a>
                        {% endif %}
                        {% if not forloop.last %}
                            <a class="down ajax-link"
                               href="{% url lfs_move_product_attachment attachment.id %}?direction=1"
                               title='{% trans "Move Down" %}'></a>
                        {% else %}
                            <span class="blank"></span>
                        {% endif %}
                    </td>

                </tr>
            {% endfor %}
        </table>
        <div class="buttons">
            <input class="ajax-save-button button"
                   type="submit" name="update" value="{% trans 'Update attachments' %}" />
            <input class="ajax-save-button button"
                   type="submit" name="delete" value="{% trans 'Delete attachments' %}" />
        </div>
    </form>
{% else %}
    <span>{% trans 'There are no attachments' %}</span>
{% endif %}

<h2 class="heading-middle">{% trans 'Add attachments' %}</h2>

<div id="content">
    <form id="attachment_upload" action="{% url lfs_manage_add_attachment product.id %}" method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <input class="button" type="file" name="file" multiple>
    </form>
    <table id="attachment_files" data="{% url lfs_manage_attachments product.id %}" msg='{% trans "Uploading attachments:" %}'></table>
</div>
<script>
    $(function () {
        $('#attachment_upload').fileUploadUI({
            uploadTable: $('#attachment_files'),
            multiFileRequest : true,
            buildUploadRow: function (attachment_files) {
                var fileNames = '';
                for (i = 0; i < attachment_files.length; i += 1) {
                    fileNames = fileNames + attachment_files[i].name + '<br>';
                }
                var msg = $("#attachment_files").attr("msg");
                return $(
                    '<tr>' +
                    '<td><div style="font-weight:bold; padding-bottom:10px">' + msg + '<img src="{{ STATIC_URL }}img/ajax-loader.gif" style="padding:8px 0 0 10px" /></div>' + fileNames + '<\/td>' +
                    '<\/tr>'
                );
            },
            onLoadAll: function(attachment_files) {
                var url = $("#attachment_files").attr("data");
                $.get(url, function(data) {
                    data = $.parseJSON(data);
                    $("#attachments").html(data["attachments"]);
                    $.jGrowl(data["message"]);
                });
            }
        });
    });
</script>
