{% import 'admin/order/_icons.html.twig' as icons %}

{% set status = field.value %}
{% set statusStyle = {
    'NEW':                  { color: '#3b82f6', icon: 'new'   },
    'PENDING_TEXT':         { color: '#58d19c', icon: 'text'  },
    'PENDING_CREATION':     { color: '#6c757d', icon: 'clock'   },
    'BAT1':                 { color: '#f59e0b', icon: 'doc'   },
    'BAT2':                 { color: '#f59e0b', icon: 'doc'   },
    'BAT3':                 { color: '#f59e0b', icon: 'doc'   },
    'BAT4':                 { color: '#f59e0b', icon: 'doc'   },
    'BAT5':                 { color: '#f59e0b', icon: 'doc'   },
    'PENDING_CORRECTIONS':    { color: '#6c757d',   icon: 'eye'  },
    'VALIDATED':            { color: '#00b129', icon: 'doc' },
    'PENDING':              { color: '#6c757d', icon: 'clock' },
    'MANUFACTURING':    { color: '#6c757d',   icon: 'gear'  },
    'PENDING_DELIVERY':     { color: '#8b5cf6', icon: 'truck' },
    'DELIVERED':            { color: '#00b129', icon: 'check' },
    'CANCELLED':            { color: '#b3261e', icon: 'x'     },
} %}
{% set current = statusStyle[status.name] ?? { color: '#6c757d', icon: 'gear' } %}

<span class=" d-inline-flex align-items-center gap-1 px-3 py-1" >
    <span style="width: 24px; height: 24px; padding:5px;display: inline-flex; border-radius: 50%; align-items: center; background-color: {{ current.color }};justify-content: center;">
        {{ icons.icon(current.icon) }}
    </span>
    {{ status.label() }}
</span>