<div id="{{(string) $attribute->getKey()}}-wrapper" class="entity-attribute entity-attribute-documents @if($errors->has((string) $attribute->getKey())) error @endif {!!$attribute->getStyleClass()!!}"
     data-uk-tooltip="{pos:'bottom-right'}" title="{!! $attribute->getErrors[0] or '' !!}">

    <label for="files">{{ $attribute->getLabelText() }}</label>

    <ul class="files @if($attribute->hasSmallDragAndDropArea()) small-first-input @endif "></ul>

    <div class="drag-and-drop-area @if($attribute->hasSmallDragAndDropArea()) small @endif ">
        <span class="icon"></span>
        <p>@lang('kms/documents.drag-and-drop.area')</p>
        <span class="or">@lang('kms/documents.drag-and-drop.or')</span>
        <span class="button">@lang('kms/documents.drag-and-drop.button')</span>
    </div>

    <div class="hidden-input">
        <input type="hidden" name="{{(string) $attribute->getKey()}}-data">
    </div>

</div>

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        let accept = "{{ $attribute->getAccept() }}";
        let extensionThumbsFolder = "{{ $attribute->getExtensionThumbsFolder() }}";
        let key = "{{ $attribute->getKey() }}";
        let enablePreviewsIfPossible = "{{ $attribute->getEnablePreviewsIfPossible() }}";
        let isSortable = "{{ $attribute->getIsSortable() }}";
        let jsonString = '{!! $attribute->getValue() !!}'.replace(/\\/g, '\\\\'); //Escape \ because json.parse does not work if you don't escape it
        let uploadedDocuments = JSON.parse(jsonString);

        let form = document.getElementById('entity-form');
        let wrapper = document.querySelector("#{{(string) $attribute->getKey()}}-wrapper");
        let maxUploadSizeInBytes = form.dataset.maxUploadSize;

        let documentManager = new DocumentManager(wrapper, key, accept, maxUploadSizeInBytes, enablePreviewsIfPossible, isSortable, extensionThumbsFolder);
        documentManager.initialize(uploadedDocuments);
    });
</script>