<Overlay
    @onLoad={{this.setOverlayContext}}
    @onOpen={{this.onOpen}}
    @onClose={{this.onClose}}
    @onToggle={{this.onToggle}}
    @position="right"
    @noBackdrop={{true}}
    @fullHeight={{true}}
    @isResizable={{or this.isResizable @isResizable}}
    @width={{or this.width @width "570px"}}
>
    <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i">
        <div class="flex flex-row items-center justify-between w-full mb-4">
            <div class="flex flex-1 space-x-2">
                <Button @type="default" @icon="pen" @helpText={{t "fleet-ops.component.vendor-panel.edit"}} @onClick={{this.onEdit}} @permission="fleet-ops update vendor" />
            </div>
            <div class="flex flex-1 justify-end">
                <Button @type="default" @icon="times" @helpText={{t "fleet-ops.component.vendor-panel.close"}} @onClick={{this.onPressCancel}} />
            </div>
        </div>
        <div class="flex flex-row justify-between w-full">
            <div class="flex flex-1 flex-row">
                <div class="w-14">
                    <div class="w-12 h-12 flex items-center justify-start rounded-lg">
                        <Image
                            src={{this.vendor.logo_url}}
                            @fallbackSrc={{config "defaultValues.vendorImage"}}
                            alt={{this.vendor.name}}
                            height="48"
                            width="48"
                            class="h-12 w-12 rounded-lg shadow-sm"
                        />
                        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
                            <InputInfo @text={{this.vendor.name}} />
                        </Attach::Tooltip>
                    </div>
                </div>
                <div class="flex flex-col">
                    <h1 class="text-gray-900 dark:text-white text-2xl truncate">
                        {{#if this.vendor.id}}
                            {{this.vendor.name}}
                        {{else}}
                            <span>{{t "fleet-ops.component.vendor-panel.new-vendor"}}</span>
                        {{/if}}
                    </h1>
                    <div class="-mt-1">
                        <div class="flex flex-row items-center">
                            <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{n-a (smart-humanize this.vendor.type)}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Overlay::Header>
    <Overlay::Body class="no-padding">
        <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
            <div class="ui-tabs mt-4">
                <nav>
                    {{#each this.tabs as |tab|}}
                        <a href="javascript:;" class="ui-tab {{if (eq this.tab.slug tab.slug) 'active'}}" {{on "click" (fn this.onTabChanged tab.slug)}}>
                            <FaIcon @icon={{tab.icon}} class="mr-1" />
                            <span>{{tab.title}}</span>
                        </a>
                    {{/each}}
                </nav>
            </div>
        </div>
        <div class="tab-content tab-{{this.tab.slug}}">
            {{component this.tab.component vendor=this.vendor tabOptions=this.tab options=this.tab.componentParams}}
        </div>
        <Spacer @height="300px" />
    </Overlay::Body>
</Overlay>