{if !empty($company.invoice_options) && !empty($company.invoice_options.headers_color)}
    {$_color = $company.invoice_options.headers_color}
{/if}

<div class="c-front-invoice-block type-3">
    <div class="c-header">
        <div class="c-header-wrapper">
            <p class="c-my-0 c-mb-8 c-font-bold">[`Invoice`]</p>
            {$pay_button}
        </div>

        <div class="c-details">

            <div class="c-payer">
                <p class="c-color-gray c-font-bold fs-16"{if !empty($_color)} style="color: {$_color|escape};"{/if}>[`Billed To`]</p>
                <p>
                    {$_city = $customer->get('address:city', 'default')}
                    {if $customer.company}{$customer.company|escape}{else}{$customer.name|escape}{/if}{if $_city},
                        {$_city|escape}
                    {/if}
                </p>
            </div>

            <div class="c-date c-text-nowrap">
                <p class="c-color-gray c-font-bold fs-16"{if !empty($_color)} style="color: {$_color|escape};"{/if}>[`Created`]</p>
                <p>{$invoice.invoice_date|wa_date}</p>
            </div>

            <div class="c-number c-text-nowrap">
                <p class="c-color-gray c-font-bold fs-16"{if !empty($_color)} style="color: {$_color|escape};"{/if}>[`Invoice`]</p>
                <p>[`#`]{$invoice.number|escape}</p>
            </div>

            <div class="c-price c-text-nowrap c-text-right">
                <p class="c-color-gray c-font-bold fs-16"{if !empty($_color)} style="color: {$_color|escape};"{/if}>[`Amount`] ({$invoice.currency_id})</p>
                <p class="c-font-bold">{$invoice.amount|wa_format_amount_currency:$invoice.currency_id}</p>
            </div>

        </div>

        <div class="c-recipient">
            <p class="c-color-gray c-font-bold fs-16">[`Provider`]</p>
            <p>
                {ifempty($company.name, $invoice.company_id)|escape}{if !empty($company.address)},
                    {$company.address|escape|nl2br}{/if}{if !empty($company.phone)},
                    {$company.phone|escape}{/if}
            </p>
        </div>

    </div>
    <div class="c-items">
        <table>
            <thead>
            <tr>
                <th class="c-text-left c-h-mobile c-color-gray c-pr-10 c-font-bold fs-16"{if !empty($_color)} style="color: {$_color|escape};"{/if}>№</th>
                <th class="c-text-left c-text-nowrap c-color-gray c-pr-30 c-font-bold fs-16"{if !empty($_color)} style="color: {$_color|escape};"{/if}>[`Product or service`]</th>
                <th class="c-h-mobile c-text-nowrap c-color-gray c-text-right c-pr-30 c-font-bold fs-16"{if !empty($_color)} style="color: {$_color|escape};"{/if}>[`Qty`]</th>
                <th class="c-h-mobile c-color-gray c-text-right c-pr-30 c-font-bold fs-16"{if !empty($_color)} style="color: {$_color|escape};"{/if}>[`Price`]</th>
                <th class="c-text-nowrap c-color-gray c-text-right c-font-bold fs-16"{if !empty($_color)} style="color: {$_color|escape};"{/if}>[`Amount`] ({$invoice.currency_id})</th>
            </tr>
            </thead>
            <tbody>
            {$_subtotal = 0}
            {foreach $invoice.items as $_item}
            <tr>
                {$_item_total = ($_item.quantity * $_item.price)}
                <td class="c-h-mobile c-align-top c-pr-10 c-pt-12">{$_item@iteration}</td>
                <td class="c-pr-30 c-pt-12">
                    <span data-order="{$_item@iteration}.">{$_item.name|escape}</span>
                    <span class="c-d-mobile c-color-gray">{$_item.price|wa_format} x {$_item.quantity|wa_format}</span>
                </td>
                <td class="c-h-mobile c-text-nowrap c-align-top c-text-right c-pr-30 c-pt-12">{$_item.quantity|wa_format}</td>
                <td class="c-h-mobile c-text-nowrap c-align-top c-text-right c-pr-30 c-pt-12">{$_item.price|wa_format}</td>
                <td class="c-text-nowrap c-align-top c-text-right c-pt-12">{$_item_total|wa_format}</td>
                {$_subtotal = $_subtotal + $_item_total}
            </tr>
            {/foreach}
            </tbody>
        </table>
    </div>
    <hr>
    <div class="c-total">
        <table>
            <tr>
                <td class="c-pr-30 fs-16 c-color-gray">[`Subtotal`]</td>
                <td>{$_subtotal|wa_format}</td>
            </tr>
            {if ($invoice.tax_type != "NONE")}
                {$_type = ""}
                {if ($invoice.tax_type == "INCLUDE")}
                    {$_type = "[`including`]"}
                {/if}

                {$_name = "[`tax`]"}
                {if !empty($invoice.tax_name)}
                    {$_name = $invoice.tax_name}
                {/if}
                <tr>
                    <td class="c-pr-30 c-pt-12 fs-16 c-color-gray">
                        {if !empty($_type)}{$_type}&nbsp;{/if}{$_name|escape}&nbsp;{$invoice.tax_percent|escape}%
                    </td>
                    <td class="c-pt-12">
                        {$invoice.tax_amount|wa_format}
                    </td>
                </tr>
            {/if}
            <tr>
                <td class="c-pr-30 c-pt-12 fs-16 c-color-gray">[`Total`]</td>
                <td class="c-font-bold c-pt-12">{$invoice.amount|wa_format_amount_currency:$invoice.currency_id}</td>
            </tr>
        </table>
    </div>
    {if !empty($invoice.comment)}
    <div class="c-comment">
        <p class="c-color-gray c-font-bold fs-16"{if !empty($_color)} style="color: {$_color|escape};"{/if}>[`Comment`]</p>
        <p>{$invoice.comment}</p>
    </div>
    {/if}
</div>