{% extends 'partials/base.html' %}

{% load thumbnail %}


{% block content %}
    {% include 'partials/header.html' %}
    <h1>Test file</h1>
    <div class="gal-pluss">
        <div class="inset-gp">
            <p class="title-gp">Дипломы / Сертификаты</p>
            <div class="upload2 up-l3">

                <input type="file" name="upload" id="diplom-upload" class="diplom-upload">
                <p>Загрузить файл</p>

            </div>
            <div class="galleryWork2 gal-iss disTab">

                {% for diplom in diploms %}
                    <div class="col-lg-4">
                        <div class="insetCol box-sizing disTab">
                            {% thumbnail diplom.img "210x334" crop="center" as im %}
                                <div class="imgGal"
                                     style="background: url('{{ im.url }}') no-repeat center;">
                                    <div class="imgFigure"></div>
                                </div>
                            {% endthumbnail %}
                        </div>
                        <div class="insetCol2 box-sizing disTab">
                            <p>
                                {{ diplom.title }}
                            </p>
                            <div class="buttonsImg" distab="">
                                <div class="insetBI insetBI2">
                                    <i class="fa fa-times"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                {% endfor %}

                <div id="progress" class="progress">
        <div class="progress-bar progress-bar-success"></div>
    </div>


            </div>
        </div>
    </div>
{% endblock %}


{% block js_block %}
    <script type="text/javascript">

    'use_strict';
    function csrfSafeMethod(method) {
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }


        $(function () {
            var url = '/work_sell/basic/';
            var csrftoken = $.cookie('csrftoken');
            alert(csrftoken);
            $('#diplom-upload').fileupload({
                url: url,
                crossDomain: false,
                beforeSend: function (xhr, settings) {
                    $('#progress .progress-bar').css(
                            'width',
                            '0%'
                    );
                    if (!csrfSafeMethod(settings.type)) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                },
                dataType: 'json',
                done: function (e, data) {
                    alert(data);
                    console.log(data);
                    $.each(data.result.files, function (index, file) {
                        var img = $('<img style="width:200px;height:200px;margin:10px;">').attr('src', file.url).appendTo('.galleryWork2');
                        console.log(file);
                        {#                        var currentValue = $("#upload-files-pk").val();#}
                        {#                        currentValue += file.id + ';';#}
                        {#                        $("#upload-files-pk").val(currentValue);#}

                    });
                },
                error: function(e, data){
                    alert(e);
                    console.log(e);
                    console.log(data);
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    console.log(progress);
                    $('#progress .progress-bar').css(
                            'width',
                            progress + '%'
                    );
                }
            }).prop('disabled', !$.support.fileInput)
                    .parent().addClass($.support.fileInput ? undefined : 'disabled');
        });


    </script>
{% endblock %}