{% extends "base.html" %}
{% load static %}

{% block title %}Bulk Upload{% endblock %}
{% block extra_head %}
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet" />
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet" />
<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="{% static 'admin/js/core.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/jquery.init.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/SelectFilter2.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/SelectBox.js' %}"></script>

<link rel="stylesheet" type="text/css" href="{% static 'admin/css/widgets.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/base.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/forms.css' %}"/>
{% endblock %}
{% block content %}
<h1>Bulk Upload</h1>
<form action='/upload/' method="POST">
    {% csrf_token %}
    {{ form.as_p }}
    {{ form.media }}
    <input type="file"
	class="filepond"
	id="attachments"
	name="filepond"
	multiple
	>
    <input type="submit" value="Save">
</form>
{% endblock %}

{% block extra_scripts %}
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
        <script>
            function getCookie(name) {
                let cookieValue = null;
                if (document.cookie && document.cookie !== '') {
                    const cookies = document.cookie.split(';');
                    for (let i = 0; i < cookies.length; i++) {
                        const cookie = cookies[i].trim();
                        // Does this cookie string begin with the name we want?
                        if (cookie.substring(0, name.length + 1) === (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }
            const csrftoken = getCookie('csrftoken');
        </script>
<script>
FilePond.registerPlugin(
  FilePondPluginImagePreview,
);

// Select the file input and use 
// create() to turn it into a pond
const pond = FilePond.create(
    document.getElementById('attachments'), {
        onaddfilestart: (file) => { isLoadingCheck(); },
        onprocessfile: (files) => { isLoadingCheck(); } 
    }
);
function isLoadingCheck(){
    var isLoading = pond.getFiles().filter(x=>x.status !== 5).length !== 0,
        submitBtn = document.querySelector('form [type="submit"]')
    
    if(isLoading) {
        submitBtn.setAttribute("disabled", "disabled");
    } else {
        submitBtn.removeAttribute("disabled");
    }
}
FilePond.setOptions({
    server: {
	url: window.location.origin + '/fp',
	headers: {
	    'X-CSRFToken': csrftoken
	},
        process: '/process/',
        patch: '/patch/',
        revert: '/revert/',
        fetch: '/fetch/?target='
    },
});
</script>
{% endblock %}