<div class="details-wrapper" ...attributes>
    <ContentPanel @title="Personnel" @open={{true}} @wrapperClass="bordered-top">
        <div class="space-y-3">
            <div class="flex flex-col space-y-2 lg:flex-row lg:items-center lg:justify-between lg:space-y-0">
                <div>
                    <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Vendor personnel</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Manage contacts assigned to this vendor account.</p>
                </div>
                <div class="inline-flex overflow-hidden rounded-md border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800">
                    <button
                        type="button"
                        class="inline-flex w-36 items-center justify-center whitespace-nowrap border-r border-gray-200 px-3 py-2 text-xs font-semibold dark:border-gray-700 {{if this.isAddingExistingContact 'bg-blue-600 text-white' 'text-gray-700 dark:text-gray-200'}}"
                        {{on "click" (fn this.setMode "existing")}}
                    >
                        <FaIcon @icon="address-book" class="mr-1.5" />
                        Existing contact
                    </button>
                    <button
                        type="button"
                        class="inline-flex w-36 items-center justify-center whitespace-nowrap px-3 py-2 text-xs font-semibold {{if this.isCreatingContact 'bg-blue-600 text-white' 'text-gray-700 dark:text-gray-200'}}"
                        {{on "click" (fn this.setMode "new")}}
                    >
                        <FaIcon @icon="user-plus" class="mr-1.5" />
                        New contact
                    </button>
                </div>
            </div>

            <form {{on "submit" (perform this.addPersonnel)}} class="rounded-md border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                <div class="space-y-3">
                    {{#if this.isAddingExistingContact}}
                        <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
                        <InputGroup @name="Contact" @wrapperClass="mb-0i">
                            <ModelSelect
                                @modelName="contact"
                                @selectedModel={{this.selectedContact}}
                                @placeholder="Select existing customer contact"
                                @query={{hash type="customer"}}
                                @triggerClass="form-select form-input"
                                @infiniteScroll={{false}}
                                @renderInPlace={{true}}
                                @onChange={{this.selectContact}}
                                as |model|
                            >
                                <div class="flex flex-row items-center">
                                    <div class="mr-2 w-6">
                                        <Image src={{model.photo_url}} @fallbackSrc={{config "defaultValues.contactImage"}} alt={{model.name}} class="h-6 w-6 rounded-md" />
                                    </div>
                                    <div class="min-w-0">
                                        <div class="truncate font-semibold">{{model.name}}</div>
                                        <div class="truncate text-xs text-gray-500">{{n-a model.email}}</div>
                                    </div>
                                </div>
                            </ModelSelect>
                        </InputGroup>

                    <InputGroup @name="Role" @wrapperClass="mb-0i">
                        <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                            <PowerSelect
                                @options={{this.roleOptions}}
                                @selected={{this.selectedRole}}
                                @onChange={{this.selectRole}}
                                @placeholder="Select role"
                                @triggerClass="form-select form-input"
                                as |role|
                            >
                                <div class="text-sm">
                                    <div class="font-semibold normalize-in-trigger">{{role.label}}</div>
                                    <div class="hide-from-trigger">{{role.description}}</div>
                                </div>
                            </PowerSelect>
                        </div>
                    </InputGroup>
                        </div>
                    {{else}}
                        <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
                            <InputGroup @name="Name" @wrapperClass="mb-0i" @value={{this.name}} @placeholder="Personnel name" />
                            <InputGroup @name="Email" @wrapperClass="mb-0i" @type="email" @value={{this.email}} @placeholder="email@example.com" />
                        </div>
                        <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
                            <InputGroup @name="Phone" @wrapperClass="mb-0i">
                                <PhoneInput @value={{this.phone}} @onInput={{fn (mut this.phone)}} class="form-input w-full" />
                            </InputGroup>
                            <InputGroup @name="Role" @wrapperClass="mb-0i">
                                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                                    <PowerSelect
                                        @options={{this.roleOptions}}
                                        @selected={{this.selectedRole}}
                                        @onChange={{this.selectRole}}
                                        @placeholder="Select role"
                                        @triggerClass="form-select form-input"
                                        as |role|
                                    >
                                        <div class="text-sm">
                                            <div class="font-semibold normalize-in-trigger">{{role.label}}</div>
                                            <div class="hide-from-trigger">{{role.description}}</div>
                                        </div>
                                    </PowerSelect>
                                </div>
                            </InputGroup>
                        </div>
                    {{/if}}

                    <div>
                        <Checkbox @value={{this.createLogin}} @onToggle={{this.toggleCreateLogin}}>Create login</Checkbox>
                    </div>

                    <div class="flex justify-end">
                        <Button
                            @buttonType="submit"
                            @type="primary"
                            @icon="plus"
                            @text="Add Personnel"
                            @isLoading={{this.addPersonnel.isRunning}}
                            @disabled={{not this.canSubmit}}
                        />
                    </div>
                </div>
            </form>

            <div class="overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
                <div class="grid grid-cols-12 border-b border-gray-200 bg-gray-50 px-3 py-2 text-xs font-semibold text-gray-800 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100">
                    <div class="col-span-6">Contact</div>
                    <div class="col-span-2">Role</div>
                    <div class="col-span-2">Status</div>
                    <div class="col-span-2 text-right">Actions</div>
                </div>

                {{#if this.loadPersonnel.isRunning}}
                    <div class="flex items-center justify-center p-4 text-sm text-gray-500 dark:text-gray-300">
                        <Spinner @iconClass="text-sky-500" />
                        <span class="ml-2">Loading personnel...</span>
                    </div>
                {{else if this.hasPersonnel}}
                    {{#each this.personnels as |personnel|}}
                        <div class="grid grid-cols-12 items-center border-b border-gray-100 px-3 py-2 text-xs last:border-b-0 dark:border-gray-700 dark:text-gray-100">
                            <div class="col-span-6 flex min-w-0 items-center">
                                <Image src={{personnel.photo_url}} @fallbackSrc={{config "defaultValues.contactImage"}} alt={{personnel.name}} class="mr-2 h-7 w-7 rounded-md" />
                                <div class="min-w-0">
                                    <div class="truncate font-semibold">{{or personnel.name personnel.public_id}}</div>
                                    <div class="truncate text-gray-500 dark:text-gray-400">{{n-a personnel.email}} {{n-a personnel.phone}}</div>
                                </div>
                            </div>
                            <div class="col-span-2 capitalize">{{personnel.role}}</div>
                            <div class="col-span-2">
                                <Badge @status={{or personnel.status "active"}} />
                            </div>
                            <div class="col-span-2 flex justify-end">
                                <Button
                                    @type="danger"
                                    @size="xs"
                                    @icon="trash"
                                    @text="Remove"
                                    @onClick={{perform this.removePersonnel personnel}}
                                    @isLoading={{this.removePersonnel.isRunning}}
                                />
                            </div>
                        </div>
                    {{/each}}
                {{else}}
                    <div class="p-4 text-sm text-gray-500 dark:text-gray-400">No personnel added yet.</div>
                {{/if}}
            </div>
        </div>
    </ContentPanel>
</div>
