<div class="application-settings-form flex flex-col gap-6">
    <form wire:submit="submit" class="flex flex-col gap-6">
        <x-unsaved-bar action="submit" />

        <x-application.settings-section id="database-details-section" title="Database details"
            description="Manage the identity and container image for this PostgreSQL database.">
            <x-slot:actions>
                <x-modal-input title="Resource details" buttonTitle="Details">
                    <livewire:project.shared.resource-details :resource="$database" />
                </x-modal-input>
            </x-slot:actions>
            <div class="grid gap-4 lg:grid-cols-2">
                <x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
                <x-forms.input label="Description" id="description" canGate="update" :canResource="$database" />
                <div class="lg:col-span-2">
                    <x-forms.input label="Image" id="image" required canGate="update" :canResource="$database"
                        helper="Use a published PostgreSQL image from Docker Hub." />
                </div>
            </div>
        </x-application.settings-section>

        <x-application.settings-section id="credentials-section" title="Credentials"
            description="Keep these values aligned with the credentials configured inside PostgreSQL.">
            @if ($database->started_at)
                <x-callout type="warning" title="Keep credentials synchronized">
                    Changing values here does not update PostgreSQL. Update PostgreSQL first, then synchronize the
                    values here so backups and other automations continue working.
                </x-callout>
            @endif
            <div class="{{ $database->started_at ? 'mt-4 ' : '' }}grid gap-4 lg:grid-cols-2">
                <x-forms.input label="Username" id="postgresUser" placeholder="If empty: postgres"
                    canGate="update" :canResource="$database" />
                @if ($isPasswordHiddenForMember)
                    <x-forms.input label="Password" disabled value="Hidden (only admins can view)" />
                @else
                    <x-forms.input label="Password" id="postgresPassword" type="password" required
                        canGate="update" :canResource="$database" />
                @endif
                <x-forms.input label="Initial database" id="postgresDb"
                    placeholder="If empty, it will match the username."
                    :readonly="(bool) $database->started_at" canGate="update" :canResource="$database"
                    helper="{{ $database->started_at ? 'You can only change this in the database.' : null }}" />
            </div>
        </x-application.settings-section>

        <x-application.settings-section id="initialization-section" title="Initialization"
            description="Configure the options used when PostgreSQL creates its initial data directory.">
            <div class="grid gap-4 lg:grid-cols-2">
                <x-forms.input label="Initial database arguments" id="postgresInitdbArgs"
                    placeholder="Leave empty to use the image default." canGate="update" :canResource="$database" />
                <x-forms.input label="Host authentication method" id="postgresHostAuthMethod"
                    placeholder="Leave empty to use the image default." canGate="update" :canResource="$database" />
            </div>
        </x-application.settings-section>

        <x-application.settings-section id="runtime-network-section" title="Runtime and network"
            description="Configure Docker runtime options and host port mappings.">
            <div class="grid gap-4 lg:grid-cols-2">
                <div class="lg:col-span-2">
                    <x-forms.input
                        helper="Add supported docker run options used when the container starts. Unsupported options can interfere with Coolify automation."
                        placeholder="--cap-add SYS_ADMIN --device=/dev/fuse"
                        id="customDockerRunOptions" label="Custom Docker options" canGate="update"
                        :canResource="$database" />
                </div>
                <x-forms.input placeholder="3000:5432" id="portsMappings" label="Port mappings"
                    helper="Comma-separated host-to-container mappings, for example 3000:5432."
                    canGate="update" :canResource="$database" />
            </div>
            <div class="mt-4">
                <livewire:project.database.postgresql.status-info :database="$database" />
            </div>
        </x-application.settings-section>

        <x-application.settings-section id="public-access-section" title="Public access" class="relative"
            description="Expose this database through the managed TCP proxy.">
            <x-slot:actions>
                @if ($isPublic)
                    <x-process-dialog closeWithX size="xl">
                        <x-slot:title>Proxy logs</x-slot:title>
                        <x-slot:content>
                            <livewire:project.shared.get-logs :server="$server" :resource="$database"
                                container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
                        </x-slot:content>
                        <x-forms.button @click="processDialogOpen = true">View logs</x-forms.button>
                    </x-process-dialog>
                @endif
            </x-slot:actions>
            <x-table.loading target="instantSave" text="Updating public access..." />
            <div class="grid gap-4 lg:grid-cols-2">
                <div wire:key="public-access-{{ $publicPort ?: 'unset' }}">
                    <x-forms.listbox id="isPublic" label="Access" live onChange="instantSave"
                        :disabled="! auth()->user()->can('update', $database)" :options="[
                            ['value' => false, 'label' => 'Private'],
                            ['value' => true, 'label' => blank($publicPort) ? 'Public through TCP proxy (set public port first)' : 'Public through TCP proxy', 'disabled' => blank($publicPort)],
                        ]" />
                </div>
                <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}" id="publicPort"
                    label="Public port" canGate="update" :canResource="$database" />
                <x-forms.input type="number" placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
                    label="Proxy timeout" helper="Timeout in seconds. The default is 3600."
                    canGate="update" :canResource="$database" />
            </div>
        </x-application.settings-section>

        <x-application.settings-section id="configuration-section" title="Configuration"
            description="Override the PostgreSQL configuration used by this container.">
            <x-forms.textarea label="Custom PostgreSQL configuration" rows="10" id="postgresConf"
                canGate="update" :canResource="$database" />
        </x-application.settings-section>

        <x-application.settings-section id="log-delivery-section" title="Log delivery"
            description="Forward container logs to the drain configured on the server.">
            <x-forms.listbox id="isLogDrainEnabled" label="Log drain" live onChange="instantSaveAdvanced"
                :disabled="! auth()->user()->can('update', $database)" :options="[
                    ['value' => false, 'label' => 'Do not forward logs'],
                    ['value' => true, 'label' => 'Forward logs to the server drain'],
                ]" />
        </x-application.settings-section>
    </form>

    <x-application.settings-section id="initialization-scripts-section" title="Initialization scripts"
        description="Run SQL files in order when PostgreSQL initializes for the first time." flush>
        <x-slot:actions>
            @can('update', $database)
                <x-modal-input buttonTitle="+ Add" title="New initialization script">
                    <form class="flex w-full flex-col gap-4" wire:submit="save_new_init_script">
                        <x-forms.input placeholder="create_test_db.sql" id="new_filename" label="Filename" required />
                        <x-forms.textarea rows="16" placeholder="CREATE DATABASE test;" id="new_content"
                            label="Content" required />
                        <div class="flex justify-end border-t border-neutral-200 pt-4 dark:border-white/[0.08]">
                            <x-forms.button type="submit">Add script</x-forms.button>
                        </div>
                    </form>
                </x-modal-input>
            @endcan
        </x-slot:actions>
        <div class="divide-y divide-neutral-200 dark:divide-border-subtle">
            @forelse($initScripts ?? [] as $script)
                <livewire:project.database.init-script :database="$database" :script="$script"
                    :wire:key="$script['index']" />
            @empty
                <x-empty title="No initialization scripts"
                    description="Add a SQL file to run during the first PostgreSQL initialization." />
            @endforelse
        </div>
    </x-application.settings-section>
</div>
