{{-- File Server uploader import --}}
<div class="form-group level" x-data="FSUploader()" x-init="init(@js($oldFilesArray))">

    <x-form-group-title label="Download Files" icon="upload-cloud" />
    <div class="form-group">
        <x-form-field-title name="Files" helper="test" required="true" />
        <div class="form-upload" x-ref="uploadTarget" :class="{ 'disabled': isUploading }">
            <input type="file" multiple :disabled="isUploading" @change="handleSubmitFile($event)">
            <div class="form-upload-placeholder level">
                <i data-lucide="file-archive" size="36" style="margin-bottom:15px;color:var(--text2)"></i>
                <div style="font-size: 1.1rem;color:var(--text);margin-bottom:5px;">
                    Click or drag'n drop files here.
                </div>
            </div>
        </div>
        <x-form-error-text message="For patches .zip is preferred .7z/.rar accepted. Don't submit ROMs" />

        {{-- Client-side Errors --}}
        <div class="form-error-text" x-show="errorKey === 'noFiles' || errorKey === 'uploadError' || errorKey === 'notAllFilesDone'" x-text="errorMessage"></div>

        {{-- Server-side Errors --}}
        @error('file_ids')
            <x-form-error-text message="{{ $message }}" />
        @enderror

    </div>

    {{--
        File listing. Used for editions or server-side errors.
     --}}
    <div class="upload-list" x-show="numberOfFiles > 0" x-cloak style="margin-bottom: 15px">
        <template x-for="(file,i) in files" :key="i">
            <div class="upload-item" :class="
            {
                'upload-item-uploading': !file.done && !file.error,
                'upload-item-done': file.done,
                'upload-item-error': file.error
            }">

                <div class="file-status-icons">
                    <i x-show="!file.done && !file.error" data-lucide="loader-2" class="spin"></i>

                    <i x-show="file.error" data-lucide="alert-circle"></i>

                    <i x-show="file.done && file.state === 'public'" data-lucide="eye" class="file-state-icon file-state-icon--public"></i>

                    <i x-show="file.done && file.state === 'private'" data-lucide="eye-off" class="file-state-icon file-state-icon--private"></i>

                    <i x-show="file.done && file.state === 'archived'" data-lucide="archive" class="file-state-icon file-state-icon--archived"></i>
                </div>

                <div class="upload-item-info">
                    <span class="upload-item-name" x-text="file.name"></span>
                    <div class="progress" x-show="!file.done && !file.error">
                        <div class="progress-bar" :style="{width: file.progressValue + '%' }">
                            <span class="progress-bar-label" x-text="file.progressValue + '% - chunk' + file.currentChunk + ' / ' + file.totalChunks"></span>
                        </div>
                    </div>
                    <span class="upload-item-error" x-show="file.error" x-text="file.error"></span>
                </div>
                @if($isEdit)
                    <div class="upload-item-state" x-show="file.done" x-data="{ confirmArchive: false }">
                        <select class="form-select" :disabled="file.state === 'archived'" @change="
                            if( $event.target.value === 'archived'){
                                confirmArchive = true;
                                $event.target.value = file.state;
                            } else {
                                $wire ? $wire.dispatch('fileStateChanged') : null;
                                changeFileState(i, $event.target.value);
                            }
                        " :value="file.state">
                            <option value="public" :selected="file.state === 'public'">Public</option>
                            <option value="private" :selected="file.state === 'private'">Private</option>
                            <option value="archived" :selected="file.state === 'archived'">Archived</option>
                        </select>
                        <div class="modal-overlay" x-cloak x-show="confirmArchive" x-transition.opacity.duration.300ms @click.self="confirmArchive = false" @keydown.escape.window="confirmArchive = false">
                            <div class="modal-window" x-show="confirmArchive" x-transition>
                                <div class="modal-header">
                                    <span class="modal-title">
                                        <i data-lucide="archive" size="16"></i>
                                        Archive file
                                    </span>
                                    <button type="button" class="modal-close" @click="confirmArchive = false">
                                        <i data-lucide="x" size="20"></i>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <p>Archiving a file is <b>irreversible</b>.</p>
                                    <div class="queue-mod-actions" style="margin-top: 15px">
                                        <button type="button" class="btn" @click="confirmArchive = false">
                                            Cancel
                                        </button>
                                        <button type="button" class="btn danger" @click="changeFileState(i,'archived'); confirmArchive = false;">
                                            <i data-lucide="archive" size="14"></i>
                                            Confirm archive
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                <div class="upload-item-actions" x-data="{ showMetadata: false, showFileExplorer: false }">
                    <button type="button" class="btn" x-show="file.download_url" @click="handleDownloadFile(i)">
                        <i data-lucide="download"></i>
                    </button>
                    <button type="button" class="btn" x-show="file.file_explorer" @click="handleFileExplorer(i); showFileExplorer = true;">
                        <i data-lucide="package-open"></i>
                    </button>
                    <template x-if="file.file_explorer" x-teleport="body">
                        <div class="modal-overlay"
                             x-cloak
                             x-show="showFileExplorer"
                             x-transition.opacity.duration.300ms
                             @click.self="showFileExplorer = false"
                             @keydown.escape.window="showFileExplorer = false">
                            <div class="modal-window" x-show="showFileExplorer" x-transition>

                                <div class="modal-header">
                                    <span class="modal-title" style="display: flex; align-items: center; gap: 8px;">
                                        File explorer: <span x-text="file.name" style="color: var(--rhpz-orange);"></span>
                                    </span>
                                    <button type="button" class="modal-close" @click="showFileExplorer = false">
                                        <i data-lucide="x" size="20"></i>
                                    </button>
                                </div>

                                <div class="modal-content">
                                    <ul>
                                        <template x-for="(f,j) in file.file_explorer_files" :key="j">
                                            <li><span x-text="f"></span></li>
                                        </template>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </template>
                    <button type="button" class="btn" x-show="file.error" @click="handleRetryFile(i)">
                        <i data-lucide="refresh-cw"></i>
                    </button>
                    @if($isEdit)
                        <button type="button" class="btn" x-show="file.done" @click="showMetadata = true">
                            <i data-lucide="settings"></i>
                        </button>
                    @endif
                    <button type="button" class="btn" x-show="(file.done || file.error) && file.state !== 'archived'" @click="handleRemoveFile(i)">
                        <i data-lucide="x"></i>
                    </button>
                    <template x-teleport="body">
                        <div class="modal-overlay"
                             x-cloak
                             x-show="showMetadata"
                             x-transition.opacity.duration.300ms
                             @click.self="showMetadata = false"
                             @keydown.escape.window="showMetadata = false">
                            <div class="modal-window" x-show="showMetadata" x-transition>

                                <div class="modal-header">
                                    <span class="modal-title" style="display: flex; align-items: center; gap: 8px;">
                                        File Settings: <span x-text="file.name" style="color: var(--rhpz-orange);"></span>
                                    </span>
                                    <button type="button" class="modal-close" @click="showMetadata = false">
                                        <i data-lucide="x" size="20"></i>
                                    </button>
                                </div>

                                <div class="modal-content">
                                    @if( section_must_be( ['translations', 'romhacks'], $section ) )
                                        <template x-if="file.can_be_online_patched">
                                            <div class="form-group">
                                                <x-form-group-title label="Online patcher" />
                                                <label>
                                                    <input type="checkbox" class="form-checkbox" x-model="file.meta_online_patcher">
                                                    Enable it
                                                </label>
                                            </div>
                                        </template>
                                    @endif
                                    @if( section_must_be( ['translations', 'romhacks', 'homebrew' ], $section ) )
                                        <template x-if="file.can_be_online_patched">
                                            <div class="form-group">
                                                <x-form-group-title label="Play online" />
                                                <label>
                                                    <input type="checkbox" class="form-checkbox" x-model="file.meta_play_online">
                                                    Enable it
                                                </label>
                                                <div class="form-group level" x-show="file.meta_play_online">
                                                    @include('submissions.play-online-core-select')
                                                    <label>
                                                        <input type="checkbox" class="form-checkbox" x-model="file.meta_play_online_threads">
                                                        Enable Threads
                                                    </label>
                                                </div>
                                            </div>
                                        </template>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
                <input type="hidden" name="files_uuid[]" :value="file.uuid" x-show="file.done">
                @if($isEdit)
                    <input type="hidden" name="files_state[]" :value="file.state" x-show="file.done">
                    <template x-if="file.done">
                        <div>
                            @if( section_must_be( ['translations', 'romhacks'], $section ) )
                                <input type="hidden"
                                       :name="'files_metadata[' + file.uuid + '][online_patcher]'"
                                       :value="file.meta_online_patcher ? 1 : 0">

                                <input type="hidden"
                                       :name="'files_metadata[' + file.uuid + '][secondary_online_patcher]'"
                                       :value="(file.meta_online_patcher && file.meta_secondary_online_patcher) ? 1 : 0">
                            @endif
                            @if( section_must_be( ['translations', 'romhacks', 'homebrew'], $section ) )
                                <input type="hidden"
                                       :name="'files_metadata[' + file.uuid + '][play_online]'"
                                       :value="file.meta_play_online ? 1 : 0">
                                <input type="hidden"
                                        :name="'files_metadata[' + file.uuid + '][play_online_core]'"
                                        :value="file.meta_play_online_core ? file.meta_play_online_core : ''">
                                <input type="hidden"
                                        :name="'files_metadata[' + file.uuid + '][play_online_threads]'"
                                        :value="file.meta_play_online_threads ? 1 : 0">
                            @endif
                        </div>
                    </template>
                @endif
            </div>
        </template>
</div>
