{% extends "wagtailadmin/base.html" %}
{% load i18n %}
{% load l10n %}
{% load wagtailadmin_tags wagtailimages_tags static %}
{% block titletag %}
    {% blocktranslate trimmed with title=page.get_admin_display_title %}
        Upload Vector {{ title }}
    {% endblocktranslate %}
{% endblock %}

{% block extra_css %}
    {{ block.super }}
    {{ form_media.css }}

    <link rel="stylesheet" href="{% static 'geomanager/css/upload.css' %}">
{% endblock %}


{% block content %}
    {% trans "Upload Vector Files" as upload_str %}

    {% if dataset %}
        {% include "wagtailadmin/shared/header.html" with title=upload_str|add:" - "|add:dataset.title subtitle=page.get_admin_display_title icon="upload" %}
    {% else %}
        {% include "wagtailadmin/shared/header.html" with title=upload_str icon="upload" %}
    {% endif %}
    <div class="nice-padding">
        <div class="action-buttons">
            <div class="go-to-datasets">
                <a href="{% if layers_index_url %}{{ layers_index_url }}{% else %}{{ datasets_index_url }}{% endif %}"
                   class="button bicolor button--icon button-secondary">
                    <span class="icon-wrapper">
                        <svg class="icon icon-arrow-left icon" aria-hidden="true">
                            <use href="#icon-arrow-left"></use>
                        </svg>
                    </span>
                    {% if layers_index_url %}
                        {% translate "Back to Layers" %}
                    {% else %}
                        {% translate "Back to Datasets" %}
                    {% endif %}
                </a>
            </div>
            <div class="preview">
                <a href="{% if layer_preview_url %}{{ layer_preview_url }}
                            {% else %}{{ dataset_preview_url }}{% endif %}"
                   class="button bicolor button--icon">
                    <span class="icon-wrapper">
                        <svg class="icon icon-view icon" aria-hidden="true">
                            <use href="#icon-view"></use>
                        </svg>
                    </span>
                    {% translate "Go to Map preview" %}

                </a>
            </div>
        </div>
        <div class="drop-zone">
            <p>{% translate "Drag and drop a vector file into this area to upload immediately." %}</p>
            <p>{{ help_text }}</p>
            {% if layer %}
                {% url 'geomanager_dataset_upload_vector' dataset.pk layer.pk as upload_url %}
            {% else %}
                {% url 'geomanager_dataset_upload_vector' dataset.pk as upload_url %}
            {% endif %}

            <form action="{{ upload_url }}" method="POST" enctype="multipart/form-data">
                <div class="replace-file-input">
                    <button class="button bicolor button--icon">
                        {% icon name="plus" wrapped=1 %}{% translate "Or choose from your computer" %}</button>
                    <input id="fileupload" type="file" name="files[]" data-url="{{ upload_url }}">
                </div>
                {% csrf_token %}
            </form>
        </div>

        <div id="overall-progress" class="progress progress-secondary">
            <div class="bar" style="width: 0%;">0%</div>
        </div>

        <ul id="upload-list" class="upload-list multiple"></ul>
    </div>

    <script id="upload-list-item" type="text/template">
        <li class="row">
            <div class="left col3">
                <div class="preview">
                    <div class="thumb icon icon-image"></div>
                    <div class="progress">
                        <div class="bar" style="width: 0%;"></div>
                    </div>
                </div>
            </div>
            <div class="right col9">
                <p class="status-msg success">{% translate "Upload successful. Please update this file with required details and publish. You may also delete the file completely if the upload wasn't required." %}</p>
                <p class="status-msg failure">{% translate "Sorry, upload failed." %}</p>
                <p class="status-msg server-error">
                    <strong>{% translate "Server Error" %}</strong>
                    {% trans "Report this error to your website administrator with the following information:" %}
                    <br/><span class="error-text"></span> - <span class="error-code"></span>
                </p>
                <p class="status-msg update-success">{% translate "File updated." %}</p>
                <p class="status-msg failure error_messages"></p>
            </div>
        </li>
    </script>
{% endblock %}

{% block extra_js %}
    {{ block.super }}

    {{ form_media.js }}

    <!-- this exact order of plugins is vital -->
    <script src="{% versioned_static 'wagtailadmin/js/vendor/jquery.fileupload.js' %}"></script>
    <script src="{% versioned_static 'wagtailadmin/js/vendor/jquery.fileupload-process.js' %}"></script>
    <script src="{% versioned_static 'wagtailimages/js/vendor/jquery.fileupload-validate.js' %}"></script>

    <!-- Main script -->
    <script src="{% static 'geomanager/js/add-multiple.js' %}"></script>

    <script>
        window.fileupload_opts = {
            simple_upload_url: "{% url 'geomanager_dataset_upload_vector' dataset.pk %}",
            accepted_file_types: /\.({{ allowed_extensions|join:"|" }})$/i, //must be regex
            max_file_size: {{ max_filesize|stringformat:"s"|default:"null" }}, //numeric format
            errormessages: {
                max_file_size: "{{ error_max_file_size|escapejs }}",
                accepted_file_types: "{{ error_accepted_file_types|escapejs }}"
            }
        }
    </script>
{% endblock %}