@props([    
    'id' => null,
    'requirements' => null,
    'size' => null,
    'accept' => '',
    'disabled' => false
])

@php
    $attributes = $attributes
        ->merge([
            'data-disabled' => $disabled
        ])
        ->class([
            'dropzone'
        ]);
@endphp

<div {{ $attributes }} @if($accept) accept="{{ $accept }}" @endif>
    <div class="dropzone__inner">
        <x-bs-featured-icon 
            class="mb-3" 
            icon="upload" 
            size="md"
            variant="circle"
        />
        <p class="text-body-tertiary"><a class="font-semi-bold text-link" href="#">Click to upload</a> or drag and drop</p>
        @if($requirements)
            <p class="text-gray-500" style="font-size:70%;">If your image exceeds 2560 pixels wide and fails,<br>please use your art software to reduce the maximum dimensions of your image and re-try.</p>
            <p class="text-gray-500">{{ $requirements }} (Max Size {{ Clevercherry\Backslash4\Backslash4::format_file_upload_max_size() }})</p>
        @endif
    </div>

    <div class="sr-only">
        <input class="drop-zone__input" {{ $id ? "id=$id" : '' }} type="file" @if($accept) accept="{{ $accept }}" @endif multiple="" autocomplete="off" tabindex="-1">
    </div>
    @if( \App\Models\MediaManager::overwriteSwitch() )
    <div>
        <x-bs-form.switch
            id="mediamanager-overwrite-switch" 
            value="1" 
            switch="0"
            label="Overwrite images with same original filename"
            hint="(because images are stored on a CDN/cached server, replacing an image may take a minute to be refreshed visually)"
            />
    </div>
    @endif
</div>
