@if ($availableS3Storages->isEmpty())
    <section class="application-settings-section">
        <div class="application-settings-section-header">
            <div>
                <h2>S3 storage</h2>
                <p>Send volume backup archives to a validated object storage destination.</p>
            </div>
        </div>
        <div class="application-settings-section-body is-flush">
            <x-empty title="No validated S3 storage"
                description="Add and validate an S3 storage destination before enabling remote backups."
                icon-name="storages">
                <x-slot:contents>
                    <a class="button" {{ wireNavigate() }} href="{{ route('storage.index') }}">Open S3 storage</a>
                </x-slot:contents>
            </x-empty>
        </div>
    </section>
@else
    <form wire:submit="save">
        <x-unsaved-bar action="save" />

        <section class="application-settings-section">
            <div class="application-settings-section-header">
                <div>
                    <h2>S3 storage</h2>
                    <p>Choose where remote copies are stored and whether local archives are retained.</p>
                </div>
                @if (! $saveToS3)
                    <x-forms.button type="button" wire:click="toggleS3" wire:loading.attr="disabled"
                        wire:target="toggleS3" isHighlighted canGate="update" :canResource="$resource">
                        Enable S3
                    </x-forms.button>
                @else
                    <x-forms.button type="button" wire:click="toggleS3" wire:loading.attr="disabled"
                        wire:target="toggleS3" canGate="update" :canResource="$resource">
                        Disable S3
                    </x-forms.button>
                @endif
            </div>
            <div class="application-settings-section-body grid gap-4 sm:grid-cols-2">
                <x-forms.listbox id="s3StorageId" label="S3 storage" :required="$saveToS3"
                    :disabled="! auth()->user()?->can('update', $resource)"
                    :options="$availableS3Storages->map(fn ($s3Storage) => [
                        'value' => $s3Storage->id,
                        'label' => $s3Storage->name,
                    ])->values()->all()" />
                <x-forms.listbox id="disableLocalBackup" label="Local copy"
                    :disabled="! $saveToS3 || ! auth()->user()?->can('update', $resource)" :options="[
                        ['value' => false, 'label' => 'Keep local backup'],
                        ['value' => true, 'label' => 'Delete after S3 upload'],
                    ]" />
            </div>
        </section>
    </form>
@endif