<x-ui.modal :title="$uuid === '' ? __('finance.targets_add') : __('finance.targets_edit')">
    <div class="space-y-4">
        <x-ui.input name="name" wire:model="name" :label="__('finance.target.name')" placeholder="Büro-NAS" />

        <div>
            <label class="text-sm font-medium text-body" for="driver">{{ __('finance.target.driver') }}</label>
            <select id="driver" wire:model.live="driver"
                    class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-body">
                <option value="local">{{ __('finance.target.driver_local') }}</option>
                <option value="sftp">{{ __('finance.target.driver_sftp') }}</option>
            </select>
            <p class="mt-1 text-xs text-muted">{{ __('finance.target.driver_hint') }}</p>
        </div>

        <x-ui.input name="path" wire:model="path" :label="__('finance.target.path')"
                    :hint="$driver === 'local' ? __('finance.target.path_local_hint') : __('finance.target.path_sftp_hint')"
                    :placeholder="$driver === 'local' ? '/mnt/rechnungen' : '/rechnungen'" />

        <div class="grid gap-4 sm:grid-cols-2">
            <div>
                <label class="text-sm font-medium text-body" for="layout">{{ __('finance.target.layout') }}</label>
                <select id="layout" wire:model="layout"
                        class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-body">
                    <option value="year">{{ __('finance.target.layout_year') }}</option>
                    <option value="day">{{ __('finance.target.layout_day') }}</option>
                </select>
                <p class="mt-1 text-xs text-muted">{{ __('finance.target.layout_hint') }}</p>
            </div>
            <x-ui.input name="keepDays" wire:model="keepDays" type="number"
                        :label="__('finance.target.keep_days')" :hint="__('finance.target.keep_days_hint')" placeholder="30" />
        </div>

        @if ($driver === 'sftp')
            <div class="grid gap-4 sm:grid-cols-3">
                <div class="sm:col-span-2"><x-ui.input name="host" wire:model="host" :label="__('finance.target.host')" placeholder="backup.example.com" /></div>
                <x-ui.input name="port" wire:model="port" type="number" :label="__('finance.target.port')" />
            </div>
            <x-ui.input name="username" wire:model="username" :label="__('finance.target.username')" />
            <x-ui.input name="password" wire:model="password" type="password" autocomplete="new-password"
                        :label="__('finance.target.password')"
                        :hint="$hasPassword ? __('finance.target.password_stored') : __('finance.target.password_hint')" />
        @endif

        <div class="rounded-lg border border-line bg-surface-2 p-4">
            <x-ui.checkbox name="active" wire:model="active" :label="__('finance.target.active_label')" />
            <p class="mt-1.5 pl-7 text-xs text-muted">{{ __('finance.target.active_hint') }}</p>
        </div>
    </div>

    <x-slot:footer>
        <div class="flex justify-end gap-3">
            <x-ui.button variant="secondary" x-on:click="Livewire.dispatch('closeModal')">{{ __('finance.cancel') }}</x-ui.button>
            <x-ui.button variant="primary" wire:click="save" wire:loading.attr="disabled">{{ __('finance.save') }}</x-ui.button>
        </div>
    </x-slot:footer>
</x-ui.modal>
