{% extends "wagtailadmin/base.html" %}
{% load i18n %}
{% load l10n %}
{% load static %}
{% load wagtailadmin_tags wagtailimages_tags %}
{% block titletag %}{% trans "Import from Drive" %}{% endblock %}
{% block extra_css %}
    {{ block.super }}

    {{ form_media.css }}

    <link rel="stylesheet" href="{% versioned_static 'wagtailimages/css/add-multiple.css' %}" type="text/css" />
    <link rel="stylesheet" href="{% static 'wagtail_image_import/css/import.css' %}" type="text/css" />
{% endblock %}

{% block content %}
    {% trans "Import from Drive" as add_str %}
    {% include "wagtailadmin/shared/header.html" with title=add_str icon="image" %}

    {% csrf_token %}
    {% url 'wagtailadmin_tag_autocomplete' as autocomplete_url %}
    <div id="importer" data-app-id="{{ app_id }}" data-picker-api-key="{{ picker_api_key }}" data-client-id="{{ client_id }}" data-duplicate-review-url="{% url 'wagtail_image_import:find_duplicates' %}" data-collections="{{ collections }}" data-autocomplete-url="{{ autocomplete_url|addslashes }}" data-drive-parent="{{ drive_parent }}" data-index-url="{% url 'wagtailimages:index' %}">

    </div>
{% endblock %}

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

    {{ form_media.js }}

    <!-- this exact order of plugins is vital -->
    <script src="{% versioned_static 'wagtailimages/js/vendor/load-image.min.js' %}"></script>
    <script src="{% versioned_static 'wagtailimages/js/vendor/canvas-to-blob.min.js' %}"></script>
    <script src="{% versioned_static 'wagtailadmin/js/vendor/jquery.iframe-transport.js' %}"></script>
    <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-image.js' %}"></script>
    <script src="{% versioned_static 'wagtailimages/js/vendor/jquery.fileupload-validate.js' %}"></script>
    <script src="{% versioned_static 'wagtailadmin/js/vendor/tag-it.js' %}"></script>
    <script src="https://apis.google.com/js/api.js"></script>
    <!-- Main script -->
    <script defer src="{% static 'wagtail_image_import/js/importer.js' %}" ></script>

{% endblock %}