{% extends "wagtailadmin/generic/base.html" %}
{% load static i18n wagtailadmin_tags %}

{% block extra_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'wagtail_admin_files/css/waf.css' %}">
{% endblock %}

{% block extra_js %}
{{ block.super }}
<script src="https://cdn.jsdelivr.net/npm/macy@2"></script>
<script src="{% static 'wagtail_admin_files/js/waf-upload.js' %}"></script>
{% endblock %}

{% block main_content %}
<template id="file-uploaded-template">
    <div class="waf-file-preview">
        <div class="waf-file-toolbar">
            <button type="button" class="waf-file-toolbar-button waf-file-remove-button">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/>
                </svg>
            </button>
        </div>
        <div class="waf-preview-render">

        </div>
        <div class="waf-preview-label" contenteditable="true"></div>
        <input type="hidden" name="form-__PREFIX__-title" id="id_form-__PREFIX__-title"/>
        <input type="file" name="form-__PREFIX__-file" id="id_form-__PREFIX__-file"/>
    </div>
</template>


{% help_block status="warning" %}
    <p>
        {% blocktrans trimmed %}
            Some files might not be available for viewing until they are uploaded.
        {% endblocktrans %}
    </p>
{% endhelp_block %}


<form id="file-upload-form" action="{% url "wagtail_admin_files:add" %}" method="POST" enctype="multipart/form-data" novalidate
    data-no-file-preview="{% static 'wagtail_admin_files/img/not_available_squared.jpg' %}"
    data-zip-file-preview="{% static 'wagtail_admin_files/img/zip_file_preview.svg' %}">
    {% csrf_token %}
    {{ formset.management_form }}

    <div class="waf-upload-to">
        <input type="file" id="file-input" multiple style="display: none;">

        <div class="waf-upload-to-text">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="waf-upload-to-icon" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708z"/>
                <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383m.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/>
            </svg>
            <p>{% trans "Drag and drop files here or click to upload." %}</p>
        </div>
    </div>

    <div class="waf-upload-display">

    </div>
</form>

{% block footer %}
    <footer class="footer w-grid md:w-grid-flow-col">
        <nav class="actions actions--primary footer__container" aria-label="{% trans 'Actions' %}">
            {% block actions %}
                {% fragment as main_action %}
                    {% block main_action %}
                        <button
                            type="submit"
                            form="file-upload-form"
                            class="waf-button-full button button-longrunning"
                            data-controller="w-progress w-kbd"
                            data-action="w-progress#activate"
                            data-w-kbd-key-value="mod+s"
                            data-w-kbd-scope-value="global"
                            data-w-progress-active-value="{% trans 'Saving...' %}"
                        >
                            {% icon name="spinner" %}
                            <em data-w-progress-target="label">{% trans "Save" %}</em>
                        </button>
                    {% endblock %}
                {% endfragment %}
                    
                {% if WAGTAIL_VERSION >= 6 %}
                    {% include "wagtailadmin/shared/action_menu/menu.html" with show_menu=extra_actions default_menu_item=main_action menu_items_fragment=extra_actions %}
                {% else %}
                    {{ main_action }}
                {% endif %}
            {% endblock %}
        </nav>
        {% if WAGTAIL_VERSION >= 6 %}
            {% block unsaved_changes_warning %}
                {% include "wagtailadmin/shared/unsaved_changes_warning.html" %}
            {% endblock %}
        {% endif %}
    </footer>
{% endblock %}


{% endblock %}