@php
    if(! $this->fileId || ! $readyToLoad || $error) {
        echo '<div></div>';
        return;
    }
@endphp

<div class="wide-xl mx-auto">
    <div class="card">
        <div class="card-header">
            <h4 class="overline-title">Éditer le document ({{ $pageCount }} page{{ $pageCount === 1 ? '' : 's' }})</h4>
        </div>
        <div class="card-body">
            @if($error)
                <span class="text-info bold my-4">{{ $error }}</span>
            @else
                <div x-data="{tab: @entangle('currentAction').defer}">
                    <x-ui.tabs :tabs="$this->availableActionsTabs" index="type" class="mb-3 px-0" />
                    <div x-show="tab == 'delete_pages'">
                        <x-ui.select :id="uniqid()" model="actions.delete_pages.selected" label="Sélectionner les numéros des pages à supprimer" :options="$this->pagesRange" multiple />
                    </div>
                    <div x-show="tab == 'extract_pages'" x-cloak>
                        <x-ui.select :id="uniqid()" model="actions.extract_pages.selected" label="Sélectionner les numéros des pages à extraire" :options="$this->pagesRange" multiple />
                        <x-ui.select :id="uniqid()" wire:model="actions.extract_pages.target_folder" x-model="target_folder" label="Vers la pochette" :options="$this->possibleFolders" />
                        <div @class(['d-none' => ! $this->canSelectTargetFilename])>
                            <x-ui.input model="actions.extract_pages.target_filename" label="Nom du document" />
                        </div>
                    </div>
                    <div x-show="tab == 'reorder_pages'" x-cloak>
                        <x-ui.select :id="uniqid()" model="actions.reorder_pages.selected" label="Sélectionner le numéro de la page à réorganiser" :options="$this->pagesRange" />
                        <x-ui.select :id="uniqid()" model="actions.reorder_pages.target_position" label="Sélectionner la nouvelle position" :options="$this->pagesRange" />
                    </div>
                    <div x-show="tab == 'merge_files'" x-cloak>
                        <x-ui.select :id="uniqid()" model="actions.merge_files.selected" label="Sélectionner les fichiers à fusionner avec ce document" :options="$this->allClientFiles" multiple />
                    </div>
                    <x-ui.button click="save" :label="__('Save')" class="mt-3" />
                </div>
            @endif
        </div>
    </div>
</div>