@props([
    'url' => route('files.upload'),
    'btnId' => null,
    'folderId' => null,
    'modelType' => null,
    'modelId' => null,
    'allfolders' => []
])

@php
    $attributes = $attributes->class([
        'dropzone',
        'dz-upload',
        'dropzone-queue'
    ])->merge([
        //
    ]);
@endphp

<div id="dropzone-{{ uniqid() }}"
    {{ $attributes }}
    action='{{ $url }}'
    x-data="alpineDropzoneMultiple('{{ $btnId }}', {{ $folderId }}, '{{ $modelType}}', {{ $modelId }}, '{{ uniqid() }}', {{ json_encode($allfolders) }})"
    style="min-height: 15vh">
    <!--begin::Controls-->
    <span class="dropzone-panel mb-lg-0 mb-2">
        <span class="dropzone-info badge bg-light br-2 me-1">Cliquez ou glissez des fichiers</span>
        <button class="dropzone-remove-all btn btn-sm btn-light-primary cursor-pointer">Tout supprimer</button>
    </span>
    <!--end::Controls-->
    <!--begin::Items-->
    <div class="dropzone-items wm-200px">
        <div class="dropzone-item" style="display:none">
            @if($allfolders)
            <!--begin::FolderSelect-->
            <div class="dropzone-folder me-2">
                <select class="folder-select form-control">
                    @foreach($allfolders as $optionValue => $optionLabel)
                        <option value="{{ $optionValue }}" @selected($optionValue === $folderId)>{{ $optionLabel }}</option>
                    @endforeach
                </select>
                {{-- <x-ui.select :options="$allfolders" :placeholder="__('Select a folder')"/> --}}
            </div>
            <!--end::FolderSelect-->
            @endif
            <!--begin::File-->
            <div class="dropzone-file">
                <div class="dropzone-filename" title="">
                    <span data-dz-name=""></span>
                    <strong>(<span data-dz-size=""></span>)</strong>
                </div>
                <div class="dropzone-error" data-dz-errormessage=""></div>
            </div>
            <!--end::File-->
            <!--begin::Progress-->
            <div class="dropzone-progress">
                <div class="progress">
                    <div class="progress-bar bg-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress=""></div>
                </div>
            </div>
            <!--end::Progress-->
            <!--begin::Toolbar-->
            <div class="dropzone-toolbar">
                <span class="dropzone-start">
                    <x-ui.nicon name="play-fill cursor-pointer"/>
                </span>
                <span class="dropzone-delete" data-dz-remove="">
                    <x-ui.nicon name="cross cursor-pointer"/>
                </span>
                <span class="dropzone-success" style="display: none;">
                    <x-ui.nicon name="check" class="text-success"/>
                </span>
            </div>
            <!--end::Toolbar-->
        </div>
    </div>
    <!--end::Items-->
</div>