<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
        @title={{if this.issue.public_id this.issue.name (t "fleet-ops.component.issue-form-panel.issue")}}
        @status={{this.issue.public_id}}
        @hideStatusDot={{true}}
        @createdAt={{this.issue.createdAt}}
        @titleWrapperClass="leading-5"
    >
        <div class="flex flex-1 justify-end">
            <Button
                @icon={{if this.issue.id "save" "check"}}
                @type="primary"
                @text={{if this.issue.id (t "fleet-ops.component.issue-form-panel.save-issue") (t "fleet-ops.component.issue-form-panel.create-issue")}}
                @onClick={{perform this.save}}
                @isLoading={{this.save.isRunning}}
                @wrapperClass="mr-2"
            />
            {{#if this.issue.id}}
                <Button @type="default" @icon="circle-exclamation" @helpText={{t "fleet-ops.component.issue-form-panel.view-details"}} @onClick={{this.onViewDetails}} @wrapperClass="mr-2" />
            {{/if}}
            <Button
                @type="default"
                @icon="times"
                @helpText={{if this.issue.id (t "fleet-ops.component.issue-form-panel.cancel-edit-issue") (t "fleet-ops.component.issue-form-panel.cancel-new-issue")}}
                @onClick={{this.onPressCancel}}
            />
        </div>
    </Overlay::Header>

    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 pt-4">
        <div class="grid grid-cols-1 text-xs dark:text-gray-100">
            <InputGroup @name={{t "fleet-ops.component.issue-form-panel.reported-by"}}>
                <ModelSelect
                    @modelName="user"
                    @selectedModel={{this.issue.reporter}}
                    @placeholder={{t "fleet-ops.component.issue-form-panel.select-reporter"}}
                    @triggerClass="form-select form-input"
                    @infiniteScroll={{false}}
                    @renderInPlace={{true}}
                    @onChange={{fn (mut this.issue.reporter)}}
                    @onChangeId={{fn (mut this.issue.reported_by_uuid)}}
                    as |model|
                >
                    {{model.name}}
                </ModelSelect>
            </InputGroup>

            <InputGroup @name={{t "fleet-ops.component.issue-form-panel.assigned"}}>
                <ModelSelect
                    @modelName="user"
                    @selectedModel={{this.issue.assignee}}
                    @placeholder={{t "fleet-ops.component.issue-form-panel.select-assign"}}
                    @triggerClass="form-select form-input"
                    @infiniteScroll={{false}}
                    @renderInPlace={{true}}
                    @onChange={{fn (mut this.issue.assignee)}}
                    @onChangeId={{fn (mut this.issue.assigned_to_uuid)}}
                    as |model|
                >
                    {{model.name}}
                </ModelSelect>
            </InputGroup>

            <InputGroup @name={{t "fleet-ops.common.driver"}}>
                <ModelSelect
                    @modelName="driver"
                    @selectedModel={{this.issue.driver}}
                    @placeholder={{t "fleet-ops.component.issue-form-panel.select-driver"}}
                    @triggerClass="form-select form-input"
                    @infiniteScroll={{false}}
                    @renderInPlace={{true}}
                    @onChange={{fn (mut this.issue.driver)}}
                    as |model|
                >
                    {{model.name}}
                </ModelSelect>
            </InputGroup>

            <InputGroup @name={{t "fleet-ops.common.vehicle"}}>
                <ModelSelect
                    @modelName="vehicle"
                    @selectedModel={{this.issue.vehicle}}
                    @placeholder={{t "fleet-ops.component.issue-form-panel.select-vehicle"}}
                    @triggerClass="form-select form-input"
                    @infiniteScroll={{false}}
                    @renderInPlace={{true}}
                    @onChange={{fn (mut this.issue.vehicle)}}
                    as |model|
                >
                    {{model.displayName}}
                </ModelSelect>
            </InputGroup>

            <InputGroup @name={{t "fleet-ops.component.issue-form-panel.type"}}>
                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                    <PowerSelect
                        @options={{this.issueTypes}}
                        @selected={{this.issue.type}}
                        @onChange={{this.onSelectIssueType}}
                        @placeholder={{t "fleet-ops.component.issue-form-panel.select-type"}}
                        @triggerClass="form-select form-input"
                        as |type|
                    >
                        {{smart-humanize type}}
                    </PowerSelect>
                </div>
            </InputGroup>

            <InputGroup @name={{t "fleet-ops.component.issue-form-panel.category"}}>
                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                    <PowerSelect
                        @options={{this.issueCategories}}
                        @selected={{this.issue.category}}
                        @onChange={{fn (mut this.issue.category)}}
                        @placeholder={{t "fleet-ops.component.issue-form-panel.select-category"}}
                        @triggerClass="form-select form-input"
                        @disabled={{not this.issueCategories}}
                        as |category|
                    >
                        {{smart-humanize category}}
                    </PowerSelect>
                </div>
            </InputGroup>

            <InputGroup @name={{t "fleet-ops.component.issue-form-panel.report"}}>
                <Textarea @value={{this.issue.report}} aria-label="Issue Report" class="w-full form-input" placeholder={{t "fleet-ops.component.issue-form-panel.report"}} rows={{5}} />
            </InputGroup>

            <InputGroup @name={{t "fleet-ops.component.issue-form-panel.tags"}}>
                <TagInput
                    class="form-input"
                    @placeholder={{t "fleet-ops.component.issue-form-panel.add-tags"}}
                    @allowSpacesInTags={{true}}
                    @tags={{this.issue.tags}}
                    @addTag={{this.addTag}}
                    @removeTagAtIndex={{this.removeTag}}
                    as |tag|
                >
                    {{tag}}
                </TagInput>
            </InputGroup>

            <InputGroup @name={{t "fleet-ops.component.issue-form-panel.priority"}}>
                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                    <PowerSelect
                        @options={{this.issuePriorityOptions}}
                        @selected={{this.issue.priority}}
                        @onChange={{fn (mut this.issue.priority)}}
                        @placeholder={{t "fleet-ops.component.issue-form-panel.select-priority"}}
                        @triggerClass="form-select form-input"
                        as |priority|
                    >
                        {{smart-humanize priority}}
                    </PowerSelect>
                </div>
            </InputGroup>

            <InputGroup @name={{t "fleet-ops.common.status"}}>
                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                    <PowerSelect
                        @options={{this.issueStatusOptions}}
                        @selected={{this.issue.status}}
                        @onChange={{fn (mut this.issue.status)}}
                        @placeholder={{t "fleet-ops.component.issue-form-panel.select-status"}}
                        @triggerClass="form-select form-input"
                        as |status|
                    >
                        {{smart-humanize status}}
                    </PowerSelect>
                </div>
            </InputGroup>

            <InputGroup @name={{t "fleet-ops.common.coordinates"}}>
                <CoordinatesInput @value={{this.issue.location}} @onChange={{fn (mut this.issue.location)}} />
            </InputGroup>
        </div>
        <Spacer @height="300px" />
    </Overlay::Body>
</Overlay>