{% extends "forms/field.html.twig" %}

{% block field %}
{% set value = (value is null ? field.default : value) %}
{% set pagemedia = config.get('plugins.admin.pagemedia') %}
{% set pagemedia_settings = {
    resolution: {
        min: {
            width: pagemedia.res_min_width ?: null,
            height: pagemedia.res_min_height ?: null
        },
        max: {
            width: pagemedia.res_max_width ?: null,
            height: pagemedia.res_max_height ?: null
        }
    },
    resizeWidth: pagemedia.resize_width ?: null,
    resizeHeight: pagemedia.resize_height ?: null,
    resizeQuality: pagemedia.resize_quality ?: 0.8
} %}


{% set route = admin ? admin.route : grav.uri.route() %}
<div class="pagemedia-field form-field grid vertical {% if field.classes is defined %}{{ field.classes }}{% endif %}">
    <div class="form-label">
        <label class="media-collapser">
            <i class="fa fa-fw small fa-chevron-{{ pageMediaStore.collapsed ? 'right' : 'down' }}"></i>
            {{ field.label|t }} <span data-pagemedia-count>({{ admin.page.media|length }})</span>
        </label>
        <div class="{{ pageMediaStore.collapsed ? 'hidden' : '' }}">
            <input type="range" min="70" step="10" max="200" value="{{ pageMediaStore.width }}" class="media-resizer">
        </div>
    </div>
    <div class="form-data form-uploads-wrapper">
        {% set uploadLimit = grav.config.system.media.upload_limit / 1024 / 1024 %}
        {% set dropzoneSettings = { maxFilesize: uploadLimit }|merge(pagemedia_settings) %}
        <div id="grav-dropzone"
             class="form-input-file dropzone"
             {% if admin %}
                 data-media-url="{{ base_url }}/media/{{ route|trim('/') }}.json"
                 data-media-local="{{ base_url_relative_frontend|rtrim('/') }}/{{ route|trim('/') }}"
                 data-media-path="{{ url(context.relativePagePath) }}"
                 data-media-uri="{{ context.mediaUri }}"
                 data-dropzone-options="{{ dropzoneSettings|json_encode|e('html_attr') }}"
                 data-dropzone-field="{{ (scope ~ field.name)|fieldName }}"
            {% else %}
                data-media-url="{{ base_url }}/{{ route|trim('/') }}.json"
                data-dropzone-options="{{ dropzoneSettings|json_encode|e('html_attr') }}"
                data-dropzone-field="{{ (scope ~ field.name)|fieldName }}"
            {% endif %}
        ></div>

        {% if not admin or admin.session.expert == '0' %}
        <input type="hidden" name="{{ (scope ~ field.name)|fieldName }}" value="{{ value|e }}" />
        {% endif %}
    </div>
</div>
    {% if grav.browser.browser == 'msie' and grav.browser.version < 12 %}
        {% do assets.addJs('plugin://form/assets/object.assign.polyfill.js') %}
    {% endif %}
    {% do assets.addJs('jquery', 101) %}
    {% do assets.addJs('plugin://form/assets/form.vendor.js', { 'loading': 'defer', 'group': 'bottom'  }) %}
    {% do assets.addJs('plugin://form/assets/form.min.js', { 'loading': 'defer', 'group': 'bottom'  }) %}
    {% do assets.addCss('plugin://form/assets/dropzone.min.css', { 'group': 'form'}) %}
    {{ assets.css('form')|raw }}
    {% do assets.addInlineJs("
    window.GravForm = window.GravForm || {};
    window.GravForm = Object.assign({}, window.GravForm, {
        translations: {
            PLUGIN_FORM: {
                'DROPZONE_CANCEL_UPLOAD': " ~ 'PLUGIN_FORM.DROPZONE_CANCEL_UPLOAD'|t|json_encode ~ ",
                'DROPZONE_CANCEL_UPLOAD_CONFIRMATION': " ~ 'PLUGIN_FORM.DROPZONE_CANCEL_UPLOAD_CONFIRMATION'|t|json_encode ~ ",
                'DROPZONE_DEFAULT_MESSAGE': " ~ 'PLUGIN_FORM.DROPZONE_DEFAULT_MESSAGE'|t|json_encode ~ ",
                'DROPZONE_FALLBACK_MESSAGE': " ~ 'PLUGIN_FORM.DROPZONE_FALLBACK_MESSAGE'|t|json_encode ~ ",
                'DROPZONE_FALLBACK_TEXT': " ~ 'PLUGIN_FORM.DROPZONE_FALLBACK_TEXT'|t|json_encode ~ ",
                'DROPZONE_FILE_TOO_BIG': " ~ 'PLUGIN_FORM.DROPZONE_FILE_TOO_BIG'|t|json_encode ~ ",
                'DROPZONE_INVALID_FILE_TYPE': " ~ 'PLUGIN_FORM.DROPZONE_INVALID_FILE_TYPE'|t|json_encode ~ ",
                'DROPZONE_MAX_FILES_EXCEEDED': " ~ 'PLUGIN_FORM.DROPZONE_MAX_FILES_EXCEEDED'|t|json_encode ~ ",
                'DROPZONE_REMOVE_FILE': " ~ 'PLUGIN_FORM.DROPZONE_REMOVE_FILE'|t|json_encode ~ ",
                'DROPZONE_REMOVE_FILE_CONFIRMATION': " ~ 'PLUGIN_FORM.DROPZONE_REMOVE_FILE_CONFIRMATION'|t|json_encode ~ ",
                'DROPZONE_RESPONSE_ERROR': " ~ 'PLUGIN_FORM.DROPZONE_RESPONSE_ERROR'|t|json_encode ~ ",
                'RESOLUTION_MIN': " ~ 'PLUGIN_FORM.RESOLUTION_MIN'|t|json_encode ~ ",
                'RESOLUTION_MAX': " ~ 'PLUGIN_FORM.RESOLUTION_MAX'|t|json_encode ~ "
            }
        }
    });
    ", { 'group': 'bottom', 'position': 'before' }) %}

{% if not config.flex.pagemedia.dropzone.template %}
    {% do config.set('flex.pagemedia.dropzone.template', true) %}
    <div id="dropzone-media-template" style="display:none;">
        {% include 'forms/fields/pagemedia/template.html.twig' %}
    </div>
{% endif %}
{% endblock %}