<ContentPanel @title="Proof of Delivery" @open={{true}} @wrapperClass="bordered-top">
    {{#if this.hasProofs}}
        <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>
                    {{else 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>
                    {{else}}
                        <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>
