{literal}
    {% var orders = o.orders; %}
    {% var check_all = o.check_all; %}
    {% var order, order_iterator = $.shop.iterator(orders); %}
    {% while (order = order_iterator.next()) { %}
        {% var state_color = '#ccc'; %}
        {% var state_name = ''; %}
        {% if (order.state_id in o.states) { %}
            {% state_color = o.states[order.state_id].options.style.color; %}
            {% state_name = o.states[order.state_id].name; %}
        {% } %}

        <tr class="order{% if (order.unsettled==='1') { %} s-unsettled{% } %}  {% if (check_all) { %}selected{% } %}" data-order-id="{%#order.id%}" data-state-id="{%#order.state_id%}">
            {% if (!o.hide_checkbox) { %}
                <td><label class="custom-ml-12"><span class="wa-checkbox"><input type="checkbox" {% if (check_all) { %}checked="checked"{% } %}><span><span class="icon"><i class="fas fa-check"></i></span></span></span></label></td>
            {% } %}
            <td>
                <div class="s-order-status" title="{%#state_name%}">
                    <strong class="badge uppercase text-ellipsis" style="background-color: {%#state_color%}">{%#state_name%}</strong>
                    {% if (order.sales_channel && order.sales_channel.menu_icon) { %}
                    <span class="gray text-ellipsis">
                        {%#order.sales_channel.menu_icon%} {%#order.sales_channel.name%}
                    </span>
                    {% } else if ((order.params?.sales_channel||'').substr(0, 4) === 'pos:') { %}
                    <i class="fas fa-cash-register large text-light-gray"></i>
                    {% } %}
                </div>
            </td>
            <td class="nowrap">
                <div><a href="?action=orders#/order/{%#order.id%}/{/literal}{if $params_str}{$params_str}/{/if}{literal}"><span class="semibold">{%#order.id_str%}</span></a>
                </div>
            </td>
            <td>
                <div><a href="?action=orders#/order/{%#order.id%}/{/literal}{if $params_str}{$params_str}/{/if}{literal}">{% if (order.contact.name) { %}{%#order.contact.name%}{% } else { %}<span class="hint">[`not specified`]</span>{% } %}</a><i class="shortener"></i></div>
            </td>
            <td class="nowrap align-right">
                <div>
                    <a href="?action=orders#/order/{%#order.id%}/{/literal}{if $params_str}{$params_str}/{/if}{literal}">
                        <span class="bold custom-mr-4{%=(order.state_id == 'new' ? ' highlighted orange' : '') %}">{%#order.total_str%}</span>
                    </a>
                    {% if (order.paid_date) { %}
                        <span class="text-green custom-mr-4 cursor-pointer" data-wa-tooltip-content="[`Paid`] {% if (order.paid_datetime_str) { %}{%#order.paid_datetime_str%}{% } else { %}{%#order.paid_date_str%}{% } %}" data-wa-tooltip-placement="left">
                            <i class="fas fa-check-circle"></i>
                        </span>
                    {% } %}
                </div>
            </td>
            <td>
                <div>
                    <a href="?action=orders#/order/{%#order.id%}/{/literal}{if $params_str}{$params_str}/{/if}{literal}">
                        {%#order.shipping_name%}
                        <span class="small gray">{%#order.courier_name%} {%#order.shipping_interval%}</span>
                    </a>
                    <i class="shortener"></i>
                </div>
            </td>
            <td>
                <div><a href="?action=orders#/order/{%#order.id%}/{/literal}{if $params_str}{$params_str}/{/if}{literal}">{%#order.payment_name%}</a><i class="shortener"></i></div>
            </td>
            <td class="nowrap align-right">
                <div class="small gray"><a href="?action=orders#/order/{%#order.id%}/{/literal}{if $params_str}{$params_str}/{/if}{literal}"><span class="custom-mr-8">{%#order.create_datetime_str%}</span></a></div>
            </td>
        </tr>
    {% } %}
{/literal}