{% extends "core/base.jinja" %}

{% block title %}
{% trans %}SAS{% endtrans %}
{% endblock %}

{% macro print_path(file) %}
{% if file and file.parent %}
{{ print_path(file.parent) }}
<a href="{{ url('sas:album', album_id=file.id) }}">{{ file.get_display_name() }}</a> >
{% endif %}
{% endmacro %}


{% block content %}
<a href="{{ url('sas:main') }}">SAS</a> > {{ print_path(album.parent) }} {{ album.get_display_name() }}
<h3>{{ album.get_display_name() }}</h3>
<a href="{{ url('sas:album_edit', album_id=album.id) }}">{% trans %}Edit{% endtrans %}</a><br>
<hr>
<div>
    {% for a in album.children.filter(is_folder=True).order_by('-id') %}
    {% if a.as_album.can_be_viewed_by(user) %}
    <a href="{{ url("sas:album", album_id=a.id) }}" style="display: inline-block">
        <div class="album{% if not a.is_moderated %} not_moderated{% endif %}">
        <div>
        {% if a.file %}
        <img src="{{ a.as_picture.get_download_url() }}" alt="{% trans %}preview{% endtrans %}">
        {% elif a.children.filter(is_folder=False, is_moderated=True).exists() %}
        <img src="{{ a.children.filter(is_folder=False).first().as_picture.get_download_thumb_url() }}" alt="{% trans %}preview{% endtrans %}">
        {% else %}
        <img src="{{ static('core/img/sas.jpg') }}" alt="{% trans %}preview{% endtrans %}">
        {% endif %}
        </div>
        {{ a.name }}
    </div>
    </a>
    {% endif %}
    {% endfor %}
</div>
<div>
    {% for p in album.children.filter(is_folder=False).order_by('id') %}
    {% if p.as_picture.can_be_viewed_by(user) %}
    <div class="picture{% if not p.is_moderated %} not_moderated{% endif %}">
        <a href="{{ url("sas:picture", picture_id=p.id) }}#pict">
            <img src="{{ p.as_picture.get_download_thumb_url() }}" alt="{{ p.get_display_name() }}" />
        </a>
    </div>
    {% endif %}
    {% endfor %}
</div>
<form action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p() }}
    <p><input type="submit" value="{% trans %}Upload{% endtrans %}" /></p>
</form>
{% endblock %}

{% block script %}
{{ super() }}
<script>
$("form").submit(function (event) {
    var formData = new FormData($(this)[0]);

    if(formData.get('album_name') === '' && formData.get('images').name === '')
        return false;

    if(formData.get('images').name === '') {
        return true;
    }

    event.preventDefault();

    var errorlist;
    if((errorlist = this.querySelector('ul.errorlist.nonfield')) === null) {
        errorlist = document.createElement('ul');
        errorlist.classList.add('errorlist', 'nonfield');
        this.insertBefore(errorlist, this.firstElementChild);
    }

    while(errorlist.childElementCount > 0)
        errorlist.removeChild(errorlist.firstElementChild);

    var progress;
    if((progress = this.querySelector('progress')) === null) {
        progress = document.createElement('progress');
        progress.value = 0;
        var p = document.createElement('p');
        p.appendChild(progress);
        this.insertBefore(p, this.lastElementChild);
    }

    var dataHolder;

    if(formData.get('album_name') !== '') {
        dataHolder = new FormData();
        dataHolder.set('csrfmiddlewaretoken', '{{ csrf_token }}');
        dataHolder.set('album_name', formData.get('album_name'));
        $.ajax({
            method: 'POST',
            data: dataHolder,
            processData: false,
            contentType: false,
            success: onSuccess
        });
    }

    var images = formData.getAll('images');
    var imagesCount = images.length;
    var completeCount = 0;

    var poolSize = 5;
    var imagePool = [];

    while(images.length > 0 && imagePool.length < poolSize) {
        var image = images.shift();
        imagePool.push(image);
        sendImage(image);
    }

    function sendImage(image) {
        dataHolder = new FormData();
        dataHolder.set('csrfmiddlewaretoken', '{{ csrf_token }}');
        dataHolder.set('images', image);

        $.ajax({
            method: 'POST',
            data: dataHolder,
            processData: false,
            contentType: false,
        })
            .done(onSuccess.bind(undefined, image))
            .always(next.bind(undefined, image));
    }

    function next(image, status, jqXHR) {
        var index;
        if(index = imagePool.indexOf(image) !== -1) {
            imagePool.splice(index, 1);
        }
        var nextImage;
        if(nextImage = images.shift()) {
            imagePool.push(nextImage);

            sendImage(nextImage);
        }
    }

    function onSuccess(image, data, status, jqXHR) {
        if ($(data).find('.errorlist.nonfield')[0])
            var errors = Array.from($(data).find('.errorlist.nonfield')[0].children);
        else
            var errors = []
        while(errors.length > 0)
            errorlist.appendChild(errors.shift());
        progress.value = ++completeCount / imagesCount;
        if(progress.value === 1 && errorlist.children.length === 0)
            document.location.reload(true)
    }
});
</script>
{% endblock %}