{% extends 'frontend.html.twig' %}

{% block content %}
    {% include 'nordmindArtistBundle:Default:profileHeader.html.twig' with {user: user, categories: categories} %}
    <div class="row clearfix">
        <div class="col-md-2">
            <p class="main-text">&#9632; {{ user.city }} {# user.country #}
            <p>
            <p class="grey-text">
                <a href="{{ user.website }}" target="_blank">{{ user.website }}</a>
            </p>
            <p class="grey-text">
                <a href="mailto:{{ user.email}}" target="_blank">{{ user.email}}</a>
            </p>
            <p class="grey-text">
                <a href="tel:{{ user.phone }}" target="_blank">{{ user.phone }}</a>
            </p>
        </div>
        {% if app.user.canUploadPhotos %}
            <div class="col-md-10">
                <div class="registration-panel portfolio">
                    <form action="{{ path("nordmind_artist_upload") }}" id="frmFileUpload" class="dropzone"
                          method="post" enctype="multipart/form-data">
                        <div class="dz-message">
                            <div class="drag-icon-cph">
                                <i class="material-icons">add</i>
                            </div>
                            <h3>Drop here or click to upload.</h3>
                        </div>
                        <div class="fallback">
                            <input name="file" type="file" multiple/>
                        </div>
                    </form>
                </div>
                <div class="grid grid-profile" id="grid-profile">

                </div>
            </div>
        {% elseif app.user.canAddVideo %}
            <div class="col-md-10">
                <div class="row clearfix">
                    <div class="col-md-6">
                        <style>.embed-container {
                                position: relative;
                                padding-bottom: 56.25%;
                                height: 0;
                                overflow: hidden;
                                max-width: 100%;
                                height: auto;
                            }

                            .embed-container iframe, .embed-container object, .embed-container embed {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                            }</style>
                        <div class='embed-container'>
                            <iframe src='https://player.vimeo.com/video/11712103' frameborder='0' webkitAllowFullScreen
                                    mozallowfullscreen allowFullScreen></iframe>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <style>.embed-container {
                                position: relative;
                                padding-bottom: 56.25%;
                                height: 0;
                                overflow: hidden;
                                max-width: 100%;
                                height: auto;
                            }

                            .embed-container iframe, .embed-container object, .embed-container embed {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                            }</style>
                        <div class='embed-container'>
                            <iframe src='https://player.vimeo.com/video/11712103' frameborder='0' webkitAllowFullScreen
                                    mozallowfullscreen allowFullScreen></iframe>
                        </div>
                    </div>
                </div>
            </div>

        {% endif %}
    </div>
{% endblock content %}
{% block search %}
    <section>
        <!-- Right Sidebar -->

            <aside id="rightsidebar" class="right-sidebar">

                <!-- Button to close the overlay navigation -->
                <a href="javascript:void(0)" class="closebtn" onclick="closeRightSidebar()">&times;</a>
                <div class="row clearfix photoBoxEdit">
                    <div id="photoEditBox">

                    </div>
                </div>

            </aside>
        <!-- #END# Right Sidebar -->
    </section>
{% endblock %}
            {% block searchNavigation %}
                <a class="searchOpen" data-close="true" href="{{ path('nordmind_artist_after_upload') }}">EDIT ALL</a>
            {% endblock searchNavigation %}
{% block javascript %}
{{ parent() }}
<script type="text/javascript">
    $().ready(function () {

    //         $('.edit-photo').on('click', function (e) {
    //     e.preventDefault();
    //     showConfirmMessage($(this).attr('href'));
    // });
        Dropzone.options.frmFileUpload = {
            paramName: "file",
            maxFilesize: 2,
            acceptedFiles: "image/*",
            addRemoveLinks: true,
            init: function () {
                    this.on("error", function(file, message) {
                    this.removeFile(file);
                    showNotification("alert-danger", "Photo is too big", "bottom", "left");
                });
                this.on("complete", function (file) {
                    if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0 && this.getAcceptedFiles().length != 0) {
                        window.location.href = "{{path('nordmind_artist_after_upload')}}";
                    }
                });
            }
        };
        var $grid;
        $.ajax({
            url: "{{path('nordmind_artist_work_photo')}}",
            type: 'post',
            data: {
            },
            success: function (html) {

                var $container = $('.grid');
                var $html = $(html);
                $container.append($html);
                $grid = $('.grid').imagesLoaded(function () {
                    // init Packery after all images have loaded
                    $grid.packery({
                        // options
                        itemSelector: '.grid-item',
                    });
                    var $items = $grid.find('.grid-item').draggable();
                    $grid.packery('bindUIDraggableEvents', $items);

    {#                $grid.on('layoutComplete', orderItems); #}
                        $grid.on('dragItemPositioned', orderItems);
                    });
                    $grid.packery('appended', $html);
                    $('.confirm-button').on('click', function (e) {
                        e.preventDefault();
                        showConfirmMessage($(this).attr('href'));
                    });

                }
            });


            function orderItems() {
                var itemElems = $grid.packery('getItemElements');
                var itemsIds = [];
                $(itemElems).each(function (i, itemElem) {
                    itemsIds[i] = $(itemElem).data('id');
                });
                $.post("{{path('nordmind_artist_photo_sort')}}", {'ids': itemsIds});
            }
        })
</script>
{% endblock javascript %}