<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{perform this.confirmSelection}} @decline={{@onDecline}}>
    <div class="modal-body-container">
        <div class="space-y-3">
            {{#each this.waypointOptions as |option|}}
                <button
                    type="button"
                    class="w-full rounded-md border px-4 py-3 text-left shadow-sm transition {{if option.isCurrent 'border-blue-500 bg-blue-50 dark:border-blue-600 dark:bg-blue-900' (if option.isSelected 'border-green-500 bg-green-50 dark:border-green-700 dark:bg-green-900' 'border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-blue-700 dark:hover:bg-gray-900')}}"
                    disabled={{this.confirmSelection.isRunning}}
                    {{on "click" (fn this.selectOption option)}}
                >
                    <div class="flex items-start gap-3">
                        <div
                            class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-xs font-bold {{if option.isCurrent 'bg-blue-600 text-white' 'bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-100'}}"
                        >
                            {{option.label}}
                        </div>
                        <div class="min-w-0 flex-1">
                            <div class="flex items-center justify-between gap-2">
                                <div class="truncate text-sm font-semibold dark:text-gray-100">{{option.title}} - {{or option.waypoint.name option.waypoint.id}}</div>
                                {{#if option.isCurrent}}
                                    <Badge @status="info" class="uppercase">Current</Badge>
                                {{else if option.isSelected}}
                                    <Badge @status="success" class="uppercase">Selected</Badge>
                                {{else if option.waypoint.complete}}
                                    <Badge @status="completed" class="uppercase">Complete</Badge>
                                {{else if option.waypoint.status_code}}
                                    <Badge @status={{dasherize option.waypoint.status_code}} class="uppercase">{{option.waypoint.status_code}}</Badge>
                                {{else if option.waypoint.status}}
                                    <Badge @status={{dasherize option.waypoint.status}} class="uppercase">{{option.waypoint.status}}</Badge>
                                {{/if}}
                            </div>
                            <div class="mt-1 truncate text-xs text-gray-600 dark:text-gray-300">{{or option.waypoint.address option.waypoint.street1}}</div>
                            {{#if option.tracking}}
                                <div class="mt-1 text-xs font-mono text-gray-500 dark:text-gray-400">{{option.tracking}}</div>
                            {{/if}}
                        </div>
                    </div>
                </button>
            {{else}}
                <div class="rounded-md border border-dashed border-gray-300 p-6 text-center text-sm text-gray-500 dark:border-gray-700 dark:text-gray-400">
                    No waypoint destinations are available.
                </div>
            {{/each}}
        </div>
    </div>
</Modal::Default>
