<div {{did-update this.reloadProofs @reloadToken}}>
    <ContentPanel @title={{t "order.fields.proof-of-delivery"}} @isLoading={{@isLoading}} @open={{true}} @wrapperClass="bordered-top">
        {{#if this.proofs}}
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
                {{#each this.proofs as |proof|}}
                    <div>
                        {{#if (eq proof.type "photo")}}
                            <a href={{proof.url}} target={{proof.id}}>
                                <Image src={{proof.url}} class="w-48 h-48 rounded-md shadow-sm mb-2" />
                            </a>
                        {{/if}}
                        {{#if (eq proof.type "signature")}}
                            <a href={{proof.raw}} target={{proof.id}} download>
                                <Image src={{proof.raw}} class="w-48 h-48 rounded-md shadow-sm mb-2" />
                            </a>
                        {{/if}}
                        {{#if (eq proof.type "scan")}}
                            <div class="flex items-center mb-2">
                                <FaIcon @icon="qrcode" @size="2xl" class="text-blue-400" />
                            </div>
                        {{/if}}
                        <div class="font-semibold text-sm mb-0.5">{{proof.remarks}}</div>
                        <div class="text-xs">{{proof.public_id}}</div>
                        <div class="text-xs">{{format-date-fns proof.created_at}}</div>
                    </div>
                {{/each}}
            </div>
        {{else}}
            <div class="min-h-24 p-4">
                <div class="flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600 p-6 rounded-xl bg-gray-50 dark:bg-gray-800">
                    <div class="text-center">
                        <FaIcon @icon="camera-retro" @size="2x" class="text-gray-400 mb-2" />
                        <div class="text-sm text-gray-600 dark:text-gray-400 font-medium">
                            No proof of delivery
                        </div>
                        <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">
                            Captured proof of delivery will show up here
                        </div>
                    </div>
                </div>
            </div>
        {{/if}}
    </ContentPanel>
</div>
