<Portal::ContentWrapper class="portal-page-card">
    <div class="portal-section-header">
        <div>
            <div class="portal-section-eyebrow">Support Center</div>
            <h1>New Support Ticket</h1>
            <p>Send order, billing, document, or account questions to the support team.</p>
        </div>
        <LinkTo @route="portal.support" class="portal-quick-link">
            <FaIcon @icon="arrow-left" />
            <span>Back to Support</span>
        </LinkTo>
    </div>

    <form {{on "submit" (perform this.createTicket)}} class="portal-form-stack portal-form-surface">
        <InputGroup @name="Subject" @value={{this.title}} @placeholder="What do you need help with?" />
        <InputGroup @name="Order" @helpText="Optional order reference.">
            <PowerSelect
                @options={{this.model.orders}}
                @selected={{this.order}}
                @onChange={{fn (mut this.order)}}
                @placeholder="Select related order"
                @triggerClass="form-select form-input"
                @allowClear={{true}}
                as |order|
            >
                {{or order.tracking_number.tracking_number order.public_id order.id}}
            </PowerSelect>
        </InputGroup>
        <InputGroup @name="Category">
            <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                <PowerSelect
                    @options={{this.customerIssueCategories}}
                    @selected={{this.selectedIssueCategory}}
                    @onChange={{this.setIssueCategory}}
                    @placeholder="Select category"
                    @triggerClass="form-select form-input"
                    @renderInPlace={{true}}
                    as |category|
                >
                    <div class="text-sm">
                        <div class="font-semibold normalize-in-trigger">{{category.label}}</div>
                        <div class="hide-from-trigger">{{category.description}}</div>
                    </div>
                </PowerSelect>
            </div>
        </InputGroup>
        <InputGroup @name="Priority">
            <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                <PowerSelect
                    @options={{this.issuePriorities}}
                    @selected={{this.selectedIssuePriority}}
                    @onChange={{this.setIssuePriority}}
                    @placeholder="Select priority"
                    @triggerClass="form-select form-input"
                    @renderInPlace={{true}}
                    as |priority|
                >
                    <div class="text-sm">
                        <div class="font-semibold normalize-in-trigger">{{priority.label}}</div>
                        <div class="hide-from-trigger">{{priority.description}}</div>
                    </div>
                </PowerSelect>
            </div>
        </InputGroup>
        <InputGroup @name="Tags" @helpText="Optional labels that help the support team route your request.">
            <TagInput class="form-input" @tags={{this.tags}} @addTag={{this.addTag}} @removeTagAtIndex={{this.removeTag}} @placeholder="Add tags" as |tag|>
                {{tag}}
            </TagInput>
        </InputGroup>
        <InputGroup @name="Details">
            <Textarea @value={{this.report}} class="form-input w-full" rows="6" placeholder="Add details for the support team." />
        </InputGroup>
        <div class="portal-form-actions">
            <LinkTo @route="portal.support" class="portal-quick-link">
                <span>Cancel</span>
            </LinkTo>
            <Button @buttonType="submit" @type="primary" @icon="paper-plane" @text="Create Ticket" @isLoading={{this.createTicket.isRunning}} />
        </div>
    </form>
</Portal::ContentWrapper>
