<div class="space-y-4" ...attributes>
    <div class="rounded-md border border-blue-100 bg-blue-50 p-3 text-xs leading-5 text-blue-800 dark:border-blue-900/60 dark:bg-blue-900/10 dark:text-blue-200">
        <div class="font-semibold text-blue-900 dark:text-blue-100">How matching works</div>
        <p class="mt-1">
            Fuel transactions arrive with vehicle identifiers from the provider. Matching checks this list from top to bottom and links the transaction to the first vehicle or order found.
        </p>
    </div>

    <div>
        <div class="mb-2 flex items-center justify-between gap-3">
            <h3 class="text-xs font-bold uppercase text-gray-500 dark:text-gray-400">Priority list</h3>
            {{#if this.hasSelectedFields}}
                <span class="text-[11px] text-gray-400 dark:text-gray-500">{{this.selectedFields.length}} active</span>
            {{/if}}
        </div>

        {{#if this.hasSelectedFields}}
            <div class="space-y-2">
                {{#each this.selectedFields as |field|}}
                    <div class="rounded-md border border-gray-200 bg-white p-3 text-xs dark:border-gray-700 dark:bg-gray-800" data-test-matching-priority-row={{field.key}}>
                        <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
                            <div class="min-w-0">
                                <div class="flex flex-wrap items-center gap-2">
                                    <span class="rounded bg-blue-100 px-2 py-0.5 text-[10px] font-bold uppercase text-blue-700 dark:bg-blue-900/40 dark:text-blue-200" data-test-matching-priority-rank>
                                        Priority
                                        {{field.priority}}
                                    </span>
                                    <span class="font-semibold text-gray-900 dark:text-gray-100">{{field.label}}</span>
                                </div>
                                <div class="mt-2 text-gray-700 dark:text-gray-200" data-test-matching-priority-map>{{field.source}} -&gt; {{field.target}}</div>
                                <p class="mt-1 text-gray-500 dark:text-gray-300">{{field.description}}</p>
                            </div>

                            {{#if @editable}}
                                <div class="flex flex-shrink-0 items-center gap-1">
                                    <Button data-test-matching-move-up={{field.key}} @icon="arrow-up" @size="xs" @helpText="Move earlier" @disabled={{not field.canMoveUp}} @onClick={{fn this.moveField field -1}} />
                                    <Button data-test-matching-move-down={{field.key}} @icon="arrow-down" @size="xs" @helpText="Move later" @disabled={{not field.canMoveDown}} @onClick={{fn this.moveField field 1}} />
                                    <Button data-test-matching-remove={{field.key}} @icon="times" @size="xs" @helpText="Remove from matching" @onClick={{fn this.removeField field}} />
                                </div>
                            {{/if}}
                        </div>
                    </div>
                {{/each}}
            </div>
        {{else}}
            <div class="rounded-md border border-dashed border-gray-300 bg-white p-5 text-center text-xs leading-5 text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300" data-test-matching-empty-state>
                No automatic identifiers are selected. Imported transactions will stay unmatched until reviewed manually.
            </div>
        {{/if}}
    </div>

    {{#if @editable}}
        <div>
            <div class="mb-2 flex items-center justify-between gap-3">
                <h3 class="text-xs font-bold uppercase text-gray-500 dark:text-gray-400">Available identifiers</h3>
                {{#unless this.availableFields.length}}
                    <span class="text-[11px] text-gray-400 dark:text-gray-500">All identifiers are active</span>
                {{/unless}}
            </div>

            {{#if this.availableFields.length}}
                <div class="grid grid-cols-1 gap-2 md:grid-cols-2">
                    {{#each this.availableFields as |field|}}
                        <button type="button" class="rounded-md border border-gray-200 bg-white p-3 text-left text-xs transition hover:border-blue-300 hover:bg-blue-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-blue-400 dark:hover:bg-blue-900/10" data-test-matching-available={{field.key}} {{on "click" (fn this.addField field)}}>
                            <div class="flex items-center justify-between gap-2">
                                <span class="font-semibold text-gray-900 dark:text-gray-100">{{field.label}}</span>
                                <FaIcon @icon="plus" class="text-blue-600 dark:text-blue-300" />
                            </div>
                            <div class="mt-2 text-gray-600 dark:text-gray-300">{{field.source}} -&gt; {{field.target}}</div>
                        </button>
                    {{/each}}
                </div>
            {{/if}}
        </div>
    {{/if}}
</div>
