{literal}
<div data-order-id="{%#o.order.id%}" data-state-id="{%#o.state%}" class="order_ s-kanban__list__body__item custom-p-12 custom-mb-8 blank">
    <div class="flexbox">
        <div class="s-kanban-item-title custom-mr-8">
            <span class="userpic userpic48{% if (o.order.state_id == 'new') { %} highlighted {% } %} bold" title="">
                <img src="{%=o.order.order_icon ? o.order.order_icon : o.order.contact.photo_50x50 %}" alt="">
            </span>
        </div>
        <div class="s-kanban-item-body wide">
            <div class="s-kanban-item-top-wrapper custom-mb-4">
                <div class="s-kanban-item-top">
                    <span class="js-state s-kanban-item-state badge uppercase small cursor-pointer text-ellipsis" data-wa-tooltip-content="{%=o.state_name%}" data-wa-tooltip-placement="left" style="background-color: {%=o.state_color%}">{%=o.state_name%}</span>
                    {% if ((order.params?.sales_channel||'').substr(0, 4) === 'pos:') { %}
                    <i class="fas fa-cash-register text-light-gray"></i>
                    {% } %}
                </div>
                <div class="nowrap semibold align-right">
                    {%if (o.order.paid_date_str) { %}
                        <span class="text-green custom-ml-4 cursor-pointer" data-wa-tooltip-content="[`Paid`] {%=o.order.paid_datetime_str %}" data-wa-tooltip-placement="left">
                            <i class="fas fa-check-circle"></i>
                        </span>
                    {% } %}
                    <span class="{%=(o.order.state_id == 'new' ? 'highlighted orange' : '') %}">{%#o.order.total_str%}</span>
                </div>
            </div>
            <div class="flexbox space-4">
                <div class="wide">
                    <p class="custom-mt-0 custom-mb-4" style="line-height: 1.2;">
                        <a href="?action=orders#/order/{%=o.order.id%}/" class="semibold custom-mr-4">{%=o.order.id_str%}</a>
                        <span class="opacity-80 break-words">{% if (o.order.contact.name) { %}{%#o.order.contact.name%}{% } %}</span>
                    </p>
                    <p class="hint custom-mt-4">
                        <span>
                        [`Created`] {%=o.order.create_datetime_str%}
                        {%if (o.order.paid_date_str) { %}
                        <br>[`Paid`] {%=o.order.paid_datetime_str %}
                        {% } %}
                        </span>
                    </p>
                </div>
                <span class="align-right">
                    {%if (o.order.shipping_logo) { %}
                    <img style="max-height: 24px;vertical-align: text-top;" src="{%#o.order.shipping_logo%}" alt="{%#o.order.shipping_name.replace(/(<([^>]+)>)/gi, '')%}" title="{%#o.order.shipping_name.replace(/(<([^>]+)>)/gi, '')%}">
                    {% } %}
                    {%if (o.order.payment_logo) { %}
                    <img class="custom-ml-4" style="max-height: 24px;vertical-align: text-top;" src="{%#o.order.payment_logo%}" alt="{%#o.order.payment_name.replace(/(<([^>]+)>)/gi, '')%}" title="{%#o.order.payment_name.replace(/(<([^>]+)>)/gi, '')%}">
                    {% } %}
                </span>
            </div>
        </div>
    </div>

    {/literal}{*{literal}<div class="flexbox vertical s-kanban-item-body wide bordered-top custom-mt-8 custom-pt-12 small gray">
        <!-- TODO add plugin hook here -->
    </div>{/literal}*}{literal}
</div>
{/literal}