<span
    data-status="{{ value }}"
    class="inline-flex items-center px-1.5 py-0.5 text-xs rounded-md
           data-[status=Successful]:bg-green-50 data-[status=Successful]:text-green-700
           data-[status=Errored]:bg-red-50 data-[status=Errored]:text-red-700
           data-[status=Cancelled]:bg-stone-100 data-[status=Cancelled]:text-stone-400
           data-[status=Deferred]:bg-blue-50 data-[status=Deferred]:text-blue-700
           data-[status=Lost]:bg-amber-50 data-[status=Lost]:text-amber-700"
>{{ value }}</span>
