{% extends "base.html" %}

{% block content %}
<h2>{{ _("Upload File from Local Computer") }}</h2>
<ul>
    <li>{{ _("The largest file size accepted in this form is %(max_file_size)s MiB. Use other file transfer means for larger files.", max_file_size=max_file_size) }}</li>
    <li>{{ _("Disk Images") }} = {{ env["image_dir"] }}</li>
    {% if file_server_dir_exists %}
    <li>{{ _("Shared Files") }} = {{ FILE_SERVER_DIR }}</li>
    {% endif %}
    <li>{{ _("PiSCSI Config") }} = {{ CFG_DIR }}</li>
</ul>

<form name="dropper" action="/files/upload" method="post" class="dropzone dz-clickable" enctype="multipart/form-data" id="dropper">
    <fieldset>
    <legend>{{ _("Destination") }}</legend>
    <input type="radio" name="destination" id="disk_images" value="disk_images" checked="checked">
    <label for="disk_images">{{ _("Disk Images") }}</label>
    <label for="images_subdir" class="hidden">{{ _("Directory") }}</label>
    <select name="images_subdir" id="images_subdir">
    {% for dir in images_subdirs %}
    <option value="{{dir}}">{{dir}}</option>
    {% endfor %}
    <option value="" selected>/</option>
    </select>
    {% if file_server_dir_exists %}
    <input type="radio" name="destination" id="shared_files" value="shared_files">
    <label for="shared_files">{{ _("Shared Files") }}</label>
    <label for="shared_subdir" class="hidden">{{ _("Directory") }}</label>
    <select name="shared_subdir" id="shared_subdir">
    {% for dir in shared_subdirs %}
    <option value="{{dir}}">{{dir}}</option>
    {% endfor %}
    <option value="" selected>/</option>
    </select>
    {% endif %}
    <input type="radio" name="destination" id="piscsi_config" value="piscsi_config">
    <label for="piscsi_config">{{ _("PiSCSI Config") }}</label>
    </fieldset>
</form>

<script
    type="application/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"
    integrity="sha384-PwiT+fWTPpIySx6DrH1FKraKo+LvVpOClsjx0TSdMYTKi7BR1hR149f4VHLUUnfA"
    crossorigin="anonymous"
></script>

<script type="application/javascript">
    Dropzone.options.dropper = {
        paramName: 'file',
        url: '/files/upload',
        maxFilesize: {{ max_file_size }}, // max allowed file size in MiB
        chunking: true,
        forceChunking: true,
        parallelChunkUploads: false,
        chunkSize: 1048576, // 1 MiB
        retryChunks: true,
        retryChunksLimit: 3,
        createImageThumbnails: false,
        addRemoveLinks: true,
        dictDefaultMessage: "{{ _("Drop files here to upload") }}",
        dictFallbackMessage: "{{ _("Your browser does not support drag'n'drop file uploads.") }}",
        dictFallbackText: "{{ _("Please use the fallback form below to upload your files like in the olden days.") }}",
        dictFileTooBig: "{{ _("File is too big: {{filesize}}MiB. Max filesize: {{maxFilesize}}MiB.") }}",
        dictInvalidFileType: "{{ _("You can't upload files of this type.") }}",
        dictResponseError: "{{ _("Server responded with code: {{statusCode}}") }}",
        dictCancelUpload:" {{ _("Cancel upload") }}",
        dictUploadCanceled: "{{ _("Upload canceled.") }}",
        dictCancelUploadConfirmation: "{{ _("Are you sure you want to cancel this upload?") }}",
        dictRemoveFile: "{{ _("Dismiss") }}",
        dictMaxFilesExceeded: "{{ _("You can not upload any more files.") }}",
        dictFileSizeUnits: {
            tb: "{{ _("TiB") }}",
            gb: "{{ _("GiB") }}",
            mb: "{{ _("MiB") }}",
            kb: "{{ _("KiB") }}",
            b: "{{ _("B") }}"
        }
    }
</script>

<noscript>
    <div class="noscriptmsg">
        {{ _("The file uploading functionality requires JavaScript.") }}
    </div>
</noscript>

{% endblock content %}