{{#if this.shouldShowPanel}}
    <ContentPanel @title="Service" @open={{true}} @wrapperClass="bordered-top">
        {{#if @isLoading}}
            <div class="portal-empty-state compact">
                <Spinner @loadingMessage="Loading service quotes..." />
            </div>
        {{else if this.hasQuoteOptions}}
            <div class="radio-group-condensed -space-y-px">
                {{#each this.quoteOptions as |serviceQuote|}}
                    <div class="radio-group-item shadow-sm flex-col pl-0i pr-0i {{if (eq @draft.serviceQuote serviceQuote.model) 'is-checked'}}">
                        <div class="flex flex-row items-center mb-2.5 px-4">
                            <RadioButton
                                @radioClass="focus:ring-blue-500 h-6 w-6 text-blue-500"
                                @radioId={{serviceQuote.id}}
                                @value={{serviceQuote.model}}
                                @groupValue={{@draft.serviceQuote}}
                                @name="serviceQuote"
                                @changed={{this.setServiceQuote}}
                            />
                            <label for={{serviceQuote.id}} class="ml-3 flex-1 text-sm">
                                <span class="font-semibold">{{serviceQuote.serviceName}}</span>
                                {{#if serviceQuote.requestId}}
                                    <span class="block text-xs text-gray-500 dark:text-gray-400">{{serviceQuote.requestId}}</span>
                                {{/if}}
                            </label>
                            {{#if serviceQuote.amount}}
                                <span class="font-semibold">{{format-currency serviceQuote.amount serviceQuote.currency}}</span>
                            {{/if}}
                        </div>
                        {{#if serviceQuote.items.length}}
                            <div class="next-table-wrapper no-scroll h-auto table-fluid rounded-none">
                                <table class="table table-fixed flex-1">
                                    <thead>
                                        <tr>
                                            <th class="text-left">Breakdown</th>
                                            <th class="text-right">{{serviceQuote.currency}}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{#each serviceQuote.items as |item|}}
                                            <tr>
                                                <td>
                                                    <span class="font-semibold">{{item.details}}</span>
                                                </td>
                                                <td class="text-right">
                                                    <span>{{format-currency item.amount item.currency}}</span>
                                                </td>
                                            </tr>
                                        {{/each}}
                                        <tr class="border-b-0">
                                            <td class="border-b-0">
                                                <span class="font-semibold">Total</span>
                                            </td>
                                            <td class="border-b-0 text-right">
                                                <span class="font-semibold">{{format-currency serviceQuote.amount serviceQuote.currency}}</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        {{/if}}
                    </div>
                {{/each}}
            </div>
        {{else if @canQuote}}
            <div class="portal-empty-state compact">
                <div class="portal-empty-state-title">No service quotes</div>
                <p>No available service rates matched this order.</p>
            </div>
        {{else}}
            <div class="portal-empty-state compact">
                <div class="portal-empty-state-title">Add route details</div>
                <p>Select an order type, pickup, and dropoff to view service quotes.</p>
            </div>
        {{/if}}
    </ContentPanel>
{{/if}}