@if(count($attachments) > 0)
    <div class="mb3">
        <div class="lfd-input-heading">Uploaded attachments</div>
        <ul class="lfd-file-attachments sm-col sm-col-12 lg-col-10">
            @foreach($attachments as $index => $attachment)
                <li>
                    <span>{{ $attachment['original_name'] }}</span>
                    <button type="button" class="lfd-remove-button" wire:click="removeAttachment({{ $index }})">
                        Remove
                        <img src="/imgs/lfd/delete.svg" alt="error" class="ml1 m0 border-none">
                    </button>
                </li>
            @endforeach
        </ul>
    </div>
@endif

<div class="mb3">
    <div class="lfd-input-heading">{{ $label }}</div>
    @isset($help)
        <div class="lfd-input-help">
            {{ $help }}
        </div>
    @endisset
    <div class="lfd-input-file-wrapper primary-4 sm-col sm-col-12 lg-col-10">
        <input
            class="lfd-input-file lfd-button-hidden"
            type="file"
            wire:model="{{ $wire_model }}"
            x-on:livewire-upload-start="loading = true"
            x-on:livewire-upload-finish="attachmentCount++; loading = false"
            multiple
        >
        <template x-if="loading">
            <div>
                <div class="lfd-spinner"></div>
                <p>Uploading...</p>
            </div>
        </template>

        <template x-if="!loading">
            <div id="lfd-drag-area">
                <h5 class="m0 mb1 font-primary" x-show="attachmentCount === 0">Click to upload or drag and drop</h5>
                <h5 class="m0 mb1 font-primary" x-show="attachmentCount > 0">File upload successful</h5>
                <h5 class="m0 mb1 font-primary" x-show="attachmentCount > 0">Click, or drag and drop, to upload more</h5>
                <p class="h5 primary-0">Maximum file size: 30mb</p>
                <button class="lfd-button-alt">Browse file</button>
            </div>
        </template>
    </div>
    @error('$wire_model.*')<div class="error">{{ $message }}</div> @enderror
</div>