<div class="positions-replay-component flex flex-row items-center justify-between w-full px-5 py-2 border-b border-gray-200 dark:border-gray-700">
    <div class="flex flex-row items-center space-x-2">
        <div>
            <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                <PowerSelect
                    @options={{this.trackables}}
                    @selected={{this.selectedTrackable}}
                    @onChange={{this.onResourceSelected}}
                    @searchEnabled={{true}}
                    @searchField="trackableSearchText"
                    @placeholder={{t "common.select-field" field="trackable"}}
                    @triggerClass="form-select form-input form-input-sm w-48"
                    as |option|
                >
                    <div class="flex flex-row items-start space-x-2">
                        <div class="inline-block">
                            {{#if (eq option.modelName "driver")}}
                                <Image src={{option.resource.photo_url}} @fallbackSrc={{config "defaultValues.driverAvatar"}} class="w-4 h-4" />
                            {{else}}
                                <Image src={{option.resource.avatar_url}} @fallbackSrc={{config "defaultValues.vehicleAvatar"}} class="w-4 h-4" />
                            {{/if}}
                        </div>
                        <div class="inline-block text-sm truncate">
                            <div class="font-semibold text-sm normalize-in-trigger">{{option.primaryLabel}}</div>
                            <div class="hide-from-trigger text-xs">{{option.secondaryLabel}}</div>
                            {{#if option.deviceLabel}}
                                <div class="hide-from-trigger text-xs text-gray-500 dark:text-gray-400 truncate">{{option.deviceLabel}}</div>
                            {{/if}}
                        </div>
                    </div>
                </PowerSelect>
            </div>
        </div>

        <div class="w-48 {{if (or this.isReplaying this.isPaused) 'hidden' ''}}">
            <DatePicker
                @value={{this.dateFilter}}
                @range={{true}}
                @onSelect={{this.onDateRangeChanged}}
                @autoClose={{true}}
                @placeholder="Select date range"
                class="w-full form-input form-input-sm"
            />
        </div>

        {{#if this.loadPositions.isRunning}}
            <div>
                <Spinner />
            </div>
        {{/if}}
    </div>

    <div class="replay-controls">
        <div class="flex items-center justify-between space-x-2">
            <div class="flex items-center space-x-2">
                <Button @type="danger" @text="Stop" @icon="stop" @size="xs" @disabled={{not (or this.isReplaying this.isPaused)}} @onClick={{this.stopReplay}} />

                {{#if (or this.isReplaying this.isPaused)}}
                    {{#if this.isReplaying}}
                        <Button @type="warning" @text="Pause" @icon="pause" @size="xs" @onClick={{this.pauseReplay}} />
                    {{else}}
                        <Button @type="success" @text="Resume" @icon="play" @size="xs" @onClick={{this.startReplay}} />
                    {{/if}}
                {{else}}
                    <Button @type="success" @text="Play" @icon="play" @size="xs" @disabled={{not this.hasPositions}} @onClick={{this.startReplay}} />
                {{/if}}

                <div class="step-controls flex items-center space-x-1 border-l border-gray-300 dark:border-gray-700 pl-2 ml-2">
                    <Button @type="default" @icon="backward-step" @size="xs" @disabled={{not this.hasPositions}} @onClick={{this.stepBackward}} title="Step backward" />
                    <Button @type="default" @icon="forward-step" @size="xs" @disabled={{not this.hasPositions}} @onClick={{this.stepForward}} title="Step forward" />
                </div>

                <div class="speed-control border-l border-gray-300 dark:border-gray-700 pl-2 ml-2">
                    <label class="text-xs uppercase tracking-wide font-medium text-gray-700 dark:text-gray-400 mr-1">
                        Speed:
                    </label>
                    <Select
                        @value={{this.replaySpeed}}
                        @options={{this.speedOptions}}
                        @optionValue="value"
                        @optionLabel="label"
                        @onSelect={{this.onSpeedChanged}}
                        class="form-select speed-select"
                    />
                </div>
            </div>

            {{#if (or this.isReplaying this.isPaused)}}
                <div class="replay-progress flex items-center space-x-1">
                    <span class="text-sm text-gray-600 dark:text-gray-400">
                        {{this.currentReplayIndex}}/{{this.totalPositions}}
                    </span>
                    <div class="progress-bar w-32 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                        <div class="progress-fill h-full bg-blue-600 transition-all duration-300" style={{this.replayProgressWidth}}></div>
                    </div>
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
                        {{this.replayProgress}}%
                    </span>
                </div>
            {{/if}}
        </div>
    </div>
</div>
<Table
    @rows={{this.positions}}
    @columns={{this.columns}}
    @emptyStateComponent={{component
        "table/empty-state"
        variant="compact"
        icon="route"
        title="No positions loaded"
        description="Select a trackable and date range to load position history for replay."
    }}
/>
<Spacer @height="400px" />
