@props([
    'employee',
    'linkedUser' => null,
    'roles' => collect(),
    'unlinkedUserOptions' => [],
    'defaultRoleIds' => [],
])

<div class="card mb-3 border-0 shadow-sm">
    <div class="card-header bg-white">
        <strong>{{ __('employees.user_account.heading') }}</strong>
    </div>
    <div class="card-body">
        @if ($linkedUser)
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                <div>
                    <div class="fw-semibold">{{ $linkedUser->name }}</div>
                    <div class="text-muted small">{{ $linkedUser->email }}</div>
                </div>
                @can('settings.users.assign_roles')
                    <form method="POST" action="{{ route('hr.employees.user-account.unlink', $employee) }}"
                        onsubmit="return confirm(@js(__('employees.user_account.unlink_confirm')))">
                        @csrf
                        <x-ui.buttons.secondary type="submit" size="sm" icon="fe fe-link-2">
                            {{ __('employees.user_account.unlink') }}
                        </x-ui.buttons.secondary>
                    </form>
                @endcan
            </div>
        @else
            <p class="text-muted small mb-4">{{ __('employees.user_account.hint') }}</p>

            @can('settings.users.invite')
                <div class="border rounded p-3 mb-3">
                    <div class="fw-semibold mb-2">{{ __('employees.user_account.create') }}</div>
                    <form method="POST" action="{{ route('hr.employees.user-account.store', $employee) }}" novalidate>
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6">
                                <x-ui.form.input
                                    name="password"
                                    type="password"
                                    :label="__('rbac.users.password')"
                                    required
                                />
                            </div>
                            <div class="col-md-6">
                                <x-ui.form.input
                                    name="password_confirmation"
                                    type="password"
                                    :label="__('rbac.users.password_confirm')"
                                    required
                                />
                            </div>
                            <div class="col-12">
                                <label class="form-label">{{ __('rbac.users.columns.roles') }}</label>
                                <div class="d-flex flex-wrap gap-3">
                                    @foreach ($roles as $role)
                                        <label class="d-flex align-items-center gap-2 mb-0">
                                            <input type="checkbox" name="role_ids[]" value="{{ $role->id }}"
                                                class="form-check-input @error('role_ids') is-invalid @enderror"
                                                @checked(in_array($role->id, old('role_ids', $defaultRoleIds), true))>
                                            <span>{{ $role->name }}</span>
                                        </label>
                                    @endforeach
                                </div>
                                @error('role_ids')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12 text-end">
                                <x-ui.buttons.primary type="submit" size="sm" icon="fe fe-user-plus">
                                    {{ __('employees.user_account.create') }}
                                </x-ui.buttons.primary>
                            </div>
                        </div>
                    </form>
                </div>
            @endcan

            @can('settings.users.assign_roles')
                @if (count($unlinkedUserOptions) > 0)
                    <div class="border rounded p-3">
                        <div class="fw-semibold mb-2">{{ __('employees.user_account.link_existing') }}</div>
                        <form method="POST" action="{{ route('hr.employees.user-account.link', $employee) }}" novalidate>
                            @csrf
                            <div class="row g-3 align-items-end">
                                <div class="col-md-8">
                                    <x-ui.form.search-select
                                        name="user_id"
                                        :label="__('employees.user_account.select_user')"
                                        :options="$unlinkedUserOptions"
                                        :selected="old('user_id')"
                                        :placeholder="__('employees.user_account.select_user_placeholder')"
                                        required
                                    />
                                </div>
                                <div class="col-md-4 text-md-end">
                                    <x-ui.buttons.secondary type="submit" size="sm" icon="fe fe-link">
                                        {{ __('employees.user_account.link') }}
                                    </x-ui.buttons.secondary>
                                </div>
                            </div>
                        </form>
                    </div>
                @endif
            @endcan
        @endif
    </div>
</div>
