{% extends "base.html" %}
{% block title %}Vgg Input Upload {% endblock %}

{% block imports %}
    <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 src="https://unpkg.com/filepond/dist/filepond.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
{% endblock %}

{% block content %}
<h1 class="ui" style="text-align:center;">Input Image for VGG19</h1>
<form method="POST">
{% csrf_token %}
<input type="file" name="filepond">
<div style="text-align:center;">
    <button class="ui left labeled large icon button secondary" onclick="edit_student_detail()">
        <i class="file upload icon"></i>
        Upload
    </button>
</div>
</form>
{% endblock %}

{% block scripts %}
FilePond.registerPlugin(
  FilePondPluginImagePreview,
  FilePondPluginFileValidateType,
);

FilePond.setOptions({
        imagePreviewHeight : 650,
        acceptedFileTypes: ['image/*'],
	    server: {
	        url: 'http://127.0.0.1:8000/fp',
	        process: '/process/',
	        patch: '/patch/',
	        revert: '/revert/',
	        fetch: '/fetch/?target=',
	        load: '/load/?id='
	    }
	});
	window.pond = FilePond.create( document.querySelector('input[type="file"]') ,
	{
		maxFiles: 1,
} );
{% if messages %}
		{% for message in messages %}
			$('body')
			.toast({
			  class: "error",
			  title: "Error uploading FIle",
			  displayTime: 5000,
			  closeIcon: true,
			  position: "top center",
			  showIcon: "exclamation",
			  message: "{{ message }}",
			});
		{% endfor %}
	{% endif %}
{% endblock %}