{strip}
{$_states = [
    crmInvoiceModel::STATE_DRAFT => [
        "name" => _w('Draft'),
        "icon" => "status-gray-tiny",
        "class" => "draft"
    ],
    crmInvoiceModel::STATE_PENDING => [
        "name" => _w('Pending'),
        "icon" => "status-green-tiny",
        "class" => "pending"
    ],
    "PAYMENT_EXPIRED" => [
        "name" => _w('Payment deadline has expired'),
        "icon" => "status-green-tiny",
        "class" => "payment-expired"
    ],
    crmInvoiceModel::STATE_PROCESSING => [
        "name" => _w('Processing'),
        "icon" => "light-bulb",
        "class" => "processing"
    ],
    crmInvoiceModel::STATE_PAID => [
        "name" => _w('Paid'),
        "icon" => "yes-bw",
        "class" => "paid"
    ],
    crmInvoiceModel::STATE_REFUNDED => [
        "name" => _w('Refunded'),
        "icon" => "no-bw",
        "class" => "refunded"
    ],
    crmInvoiceModel::STATE_ARCHIVED => [
        "name" => _w('Archived'),
        "icon" => "trash",
        "class" => "archived"
    ]
]}

{$_userpic = $invoice.contact->getPhoto(50)}

{$_state = false}
{if $invoice.state_id && !empty($_states[$invoice.state_id])}
    {$_state = $_states[$invoice.state_id]}
    {if $invoice.state_id === crmInvoiceModel::STATE_PENDING && !empty($invoice.due_date)}
        {if {$invoice.due_date|strtotime|date_format:"Y-m-d"} < {$smarty.now|date_format:"Y-m-d"}}
            {$_state = $_states['PAYMENT_EXPIRED']}
        {/if}
    {/if}
{/if}

{$_invoice_classes = []}
{if !empty($invoice_id) && $invoice.id === $invoice_id}
    {$_invoice_classes[] = "selected"}
{/if}
{if !empty($_state)}
    {$_invoice_classes[] = $_state.class}
{/if}
{if !empty($invoice_max_id) && $invoice.id > $invoice_max_id}
    {$_invoice_classes[] = "highlighted"}
{/if}

<li class="c-invoice {$_invoice_classes|join:' '}" data-id="{$invoice.id}">
    <a class="flexbox full-width space-4 box js-disable-router" href="{$wa_app_url}invoice/{$invoice.id}/">
        {if !empty($_userpic)}
            <div class="image custom-mr-8">
                <img src="{$_userpic}" class="userpic userpic-48">
            </div>
        {/if}
        <div class="c-invoices-details wide">
            {if !empty($invoice.number)}
                <div class="flexbox middle">
                    {*<i class="{$wa->crm->convertIcon($_state.icon)} fa-xs"></i>*}
                    <span class="c-state badge uppercase nowrap opacity-90 c-bg custom-mr-8 small">
                        {if $_state}<span class="text-ellipsis">{$_state.name}</span>{/if}
                    </span>
                    {if !empty($invoice.amount)}
                    <div class="custom-ml-auto nowrap semibold">
                        {if ifset($invoice.state_id) === crmInvoiceModel::STATE_PAID}
                        <i class="fas fa-check-circle text-green custom-mr-4 small"></i>
                        {/if}
                        <span class="count c-price">{$invoice.amount|wa_currency_html:$invoice.currency_id}</span>
                    </div>
                    {/if}
                </div>
            {/if}

            <div class="c-invoice-number-with-contact">
                <span class="c-number semibold break-words">[`#`]{$invoice.number|escape}</span>
                <div class="small black break-words {if $invoice.contact.id}opacity-80{else}text-gray{/if}">{$wa->crm->contactName($invoice.contact.name)}</div>
            </div>

            <div class="text-gray smaller">[`Created`] {$invoice.create_datetime|wa_date:'humandatetime'|lower}</div>
            {if $invoice.payment_datetime}
            <div class="text-gray smaller">[`Paid`] {$invoice.payment_datetime|wa_date:'humandatetime'|lower}</div>
            {/if}
        </div>
    </a>
</li>

{/strip}