{% load i18n %}
<h2>{% trans 'Files' %}</h2>

{% if static_block.files.all %}
    <form id="product-files-update-form"
          action="{% url lfs_manage_update_files_sb static_block.id %}"
          method="post">

        <table class="lfs-manage-table">
            <tr>
                <th class="tiny">
                    <input type="checkbox" 
                           class="select-all"
                           value="delete-files" />
                </th>
                <th>
                    {% trans 'Title' %}
                </th>
                <th class="right-padding">
                    {% trans 'Position' %}
                </th>
            </tr>
            {% for file in static_block.files.all %}
                <tr>
                    <td>
                        <input type="checkbox"
                               class="select-delete-files"
                               name="delete-{{ file.id }}"
                               style="float:left" />                
                    </td>
                    <td>
                        <input type="text" name="title-{{ file.id }}" value="{{ file.title }}" />                
                    </td>
                    <td class="right-padding">
                        <input type="text" name="position-{{ file.id }}" value="{{ file.position }}" size="3" />
                    </td>
                </tr>
            {% endfor %}    
        </table>
        <div class="buttons">
            <input class="button ajax-save-button"
                   type="submit" name="update" value="{% trans 'Update' %}" />
            <input class="button ajax-save-button"
                   type="submit" name="delete" value="{% trans 'Delete' %}" />
        </div>
    </form>    
{% else %}
    <span>{% trans 'There are no files' %}</span>
{% endif %}

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

<div id="content">
    <form id="file_upload" action="{% url lfs_add_files_to_static_block static_block.id %}" method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <input class="button" type="file" name="file" multiple>
    </form>
    <table id="files_table" data="{% url lfs_reload_files static_block.id %}" msg='{% trans "Uploading images:" %}'></table>
</div>

<script>
    $(function () {
        $('#file_upload').fileUploadUI({
            uploadTable: $('#files'),
            multiFileRequest : true,
            buildUploadRow: function (files) {
                var fileNames = '';
                for (i = 0; i < files.length; i += 1) {
                    fileNames = fileNames + files[i].name + '<br>';
                }                
                var msg = $("#files_table").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(files) {
                var url = $("#files_table").attr("data");
                $.get(url, function(data) {
                    data = $.parseJSON(data);
                    $("#files").html(data["files"]);
                    $.jGrowl(data["message"]);
                });
            }
        });
    });
</script>