{$_is_include = false}
{$_hide_payments = false}
{if !empty($is_include)}
    {$_is_include = true}
    {$_hide_payments = true}
{/if}

{if !$_is_include}
    <link rel="stylesheet" href="{$wa_app_static_url}css/invoice{$style_version}.css">
    <script src="{$wa_url}wa-content/js/jquery/jquery-1.11.1.min.js"></script>
{/if}

<section class="c-invoice-front-section {if !$_is_include}with-background{/if}" {if empty($is_include)}style="{if !empty($company.invoice_options.bg_color)}background-color: {$company.invoice_options.bg_color};{/if}{if !empty($company.invoice_options.bg_image)}background-image: url({$company.invoice_options.bg_image}); background-size: cover;{/if}"{/if} id="c-invoice-front-section">
    <div class="c-front-invoice-wrapper">

        {if $wa->getEnv() == 'frontend' && ($invoice.state_id == crmInvoiceModel::STATE_DRAFT || $invoice.state_id == crmInvoiceModel::STATE_ARCHIVED)}
            <p style="text-align:center">
                <span style="color:#89a"><b>[`Invoice has been canceled and no longer valid`]</b></span>
            </p>
        {else}

            {$_show_payment_section = true}
            {if empty($style_version)}
                {if $invoice.state_id == crmInvoiceModel::STATE_PAID}
                    <p style="text-align:center">
                        <span style="color:#22d13d"><b>[`Invoice is paid`]</b></span>
                    </p>
                {elseif $invoice.state_id == crmInvoiceModel::STATE_PROCESSING}
                    <p style="text-align:center">
                        <span style="color:#7256ee"><b>[`Payment is in process`]</b></span>
                    </p>
                {elseif $invoice.state_id == crmInvoiceModel::STATE_PENDING && waRequest::get('result')}
                    {if waRequest::get('result') == 'success'}
                        <p style="text-align:center">
                            <span style="color:#f3c200"><b>[`Payment is in process`]</b></span>
                        </p>
                        {$_show_payment_section = false}
                    {elseif waRequest::get('result') == 'fail'}
                        <p style="text-align:center">
                            <span style="color:#ed2509"><b>[`Payment error`]</b></span>
                        </p>
                    {/if}
                {/if}
            {/if}

            <div class="c-front-invoice-template">
                {if empty($html)}
                    {if !empty($use_skeleton)}
                        <div class="skeleton c-front-invoice-template-iframe" id="js-invoice-skeleton" style="padding: 1.5rem 0;">
                            <div class="box contentbox" style="background: var(--background-color-blank); border-radius: 3px; max-width: 765px; margin: 0 auto;">
                                <span class="skeleton-header custom-mt-16" style="width: 40%;"></span>
                                {for $i = 0 to 9}
                                    <span class="skeleton-line"></span>
                                {/for}
                            </div>
                        </div>
                    {/if}
                    <iframe scrolling="no" src="?module=invoice&action=templatesRender&invoice_id={$invoice_id|escape}&set_height=true" class="c-front-invoice-template-iframe js-invoice-iframe" data-skeleton="#js-invoice-skeleton"></iframe>
                {else}
                    {$html}
                {/if}
            </div>

            {if empty($style_version) && $_show_payment_section}
                {include file="./invoice/payment.section.inc.html" inline}
            {/if}

            {if !$_is_include}
            <script>
                ( function($) {
                    var $section = $("#c-invoice-front-section"),
                        $window = $(window);

                    setHeight();

                    $window.on("resize", setHeight);

                    function setHeight() {
                        var height = $window.height();
                        $section.css("min-height", height + "px");
                    }
                })(jQuery);
            </script>
            {/if}

            {if !empty($style_version) && !$wa->crm->isPremium()}
            <script>
                ( function($) {
                    $('.c-front-invoice-block').append('<p class="wa-crm c-color-gray">{sprintf(
                        sprintf(
                            '<a %s><img src="%s" class="valign-middle" alt="">%s</a>',
                            'href="%s" target="_blank" rel="noopener"',
                            $wa_app_static_url|cat:'img/crm-bw.svg',
                            _w('Powered by Webasyst CRM')
                        ),
                        'https://www.webasyst.'|cat:(($wa->locale() == 'ru_RU') ? 'ru' : 'com')|cat:'/store/app/crm/'
                    )}</p>');
                })(jQuery);
            </script>
            {/if}

        {/if}

        {if !empty($use_skeleton)}
        <script>
            ( function($) {
                window.parent.document.documentElement.style.setProperty('--invoice-template-height', '525px');

                const $invoice_iframe = $(".js-invoice-iframe").css({
                    'visibility': 'hidden',
                    'max-height': '0'
                });

                $invoice_iframe.on('load', function() {
                    $invoice_iframe.css({
                        'visibility': 'visible',
                        'max-height': 'initial'
                    });
                    $($invoice_iframe.data('skeleton')).addClass('hidden');
                })
            })(jQuery);
        </script>
        {/if}

    </div>
</section>