{strip}

    {if empty($company.id)}
        {$_new_company = [
                "0" => [
                "id" => false,
                "name" => "[`New company`]"
            ]
        ]}
        {$companies = $_new_company + $companies}
    {/if}
    <div class="c-companies-page" id="c-companies-page">

        {* HEADER *}
        <header class="c-companies-header bordered-bottom">
            <div class="c-page-header flexbox middle full-width">
                <h1 class="custom-mb-0">[`Companies`]</h1>
                <a class="button small rounded light-gray" href="{$wa_app_url}settings/companies/new/"><i class="fas fa-plus-circle text-green"></i> [`Add new company`]</a>
            </div>
            <div class="c-tabs-wrapper flexbox middle full-width">
                <div class="c-companies-wrapper tabs-with-arrows-side-wrapper">
                    <ul class="tabs c-companies-list">
                        {foreach $companies as $_company}
                            {$_is_selected = ($company.id == $_company.id)}
                            <li class="c-company {if $_is_selected}selected{/if}" data-id="{$_company.id|default:""}">
                                <a class="c-link" href="{if !$_is_selected}{$wa_app_url}settings/companies/{$_company.id}/{else}javascript:void(0);{/if}">
                                    <span class="c-name">{$_company.name|escape}</span>
                                </a>
                            </li>
                        {/foreach}
                    </ul>
                    <span class="c-action right" title="[`Next`]"><i class="fas fa-angle-right fa-w-8 fa-2x"></i></span>
                    <span class="c-action left" title="[`Before`]"><i class="fas fa-angle-left fa-w-8 fa-2x"></i></span>
                </div>
            </div>
        </header>
        <section class="c-companies-section" id="c-companies-section">
            <form class="js-form fields">
                <input class="larger bold custom-mt-20 width-100" type="text" name="company[name]" value="{$company.name|default: ''|escape}" placeholder="[`Company name`]" required>

                <div class="c-company-section fields-group custom-mt-20">
                    <div class="field">
                        <div class="name">[`Logo`]</div>
                        <div class="value">
                            <div class="c-image-section js-logo-section {if empty($logo_url)}is-empty{/if}">

                                {* IMAGE *}
                                <div class="c-image-wrapper">
                                    <img class="js-image" src="{$logo_url}?{rand(1,1000)}" alt="">
                                </div>

                                {* DROPAREA + INPUT *}
                                <div class="c-drop-area js-drop-area">
                                    <div class="c-drop-hint">[`Drag-n-drop company logo here`]</div>
                                    <input class="js-field" type="file" name="{if !empty($logo_url)}company[logo]{/if}" title="[`Change logo`]">
                                </div>

                                {* DELETE *}
                                <span class="c-delete-image js-delete-logo" title="[`Delete logo`]">
                                <i class="fas fa-times"></i>
                            </span>
                            </div>

                        </div>
                    </div>
                    <div class="field">
                        <div class="name">[`Phone`]</div>
                        <div class="value">
                            <input type="text" name="company[phone]" value="{$company.phone|default: ''|escape}" placeholder="[`Phone`]">
                        </div>
                    </div>
                    <div class="field">
                        <div class="name">[`Address`]</div>
                        <div class="value">
                            <textarea name="company[address]" placeholder="[`Address`]" style="height: 8em;">{$company.address|default: ''|escape}</textarea>
                        </div>
                    </div>

                    <input name="company[id]" type="hidden" value="{$company.id}">
                </div>

                <div class="c-company-section fields-group">
                    <div class="field">
                        <div class="name">[`Tax name`]</div>
                        <div class="value">
                            <input class="js-tax-name" type="text" name="company[tax_name]" value="{$company.tax_name|default: ''|escape}" placeholder="[`Tax name`]"
                                {if !empty($company.tax_options)}required{/if}>
                        </div>
                    </div>
                    <div class="field">
                        <div class="name">[`Tax options`]</div>
                        <div class="value">

                            {$_types = [
                            "INCLUDE" => _w('include'),
                            "APPEND" => _w('append'),
                            "NONE" => _w('none')
                            ]}

                            {function _renderOption}
                                <li class="flexbox middle c-tax-option">
                                    <i class="fas fa-grip-vertical text-light-gray js-sort-toggle"></i>
                                    <div class="wa-select">
                                        <select name="" class="js-type">
                                            {foreach $_types as $_type => $_name}
                                                <option value="{$_type}" {if !empty($_option.tax_type) && $_option.tax_type == $_type}selected{/if}>{$_name}</option>
                                            {/foreach}
                                        </select>
                                    </div>
                                    <input class="js-percent" type="text" name="" value="{if !empty($_option.tax_type) && $_option.tax_percent >= 0}{$_option.tax_percent}{/if}" placeholder="20">
                                    <span class="c-label">%</span>
                                    <a class="button nobutton circle small c-delete-link js-delete-option text-red" href="javascript:void(0);" title="[`Delete`]">
                                        <i class="fas fa-trash-alt"></i><span></span>
                                    </a>
                                </li>
                            {/function}

                            {capture assign=tax_option_template}{_renderOption _option=[]}{/capture}

                            <ul class="c-options-list list compact">
                                {if !empty($company.tax_options)}
                                    {foreach $company.tax_options as $_option}
                                        {_renderOption _option=$_option}
                                    {/foreach}
                                {/if}
                            </ul>

                            <div class="c-add-wrapper custom-mt-0">
                                <a class="button small rounded light-gray c-add-option js-add-option" href="javascript:void(0);">
                                    <i class="fas fa-plus-circle text-green"></i> [`Add tax option`]
                                </a>
                            </div>

                        </div>
                    </div>
                </div>

                <div class="c-company-section fields-group">
                    <div class="c-templates-section">
                        <div class="flexbox full-width">
                            <div class="c-column">
                                <h3 class="heading custom-mt-8">[`Invoice template`]</h3>
                            </div>
                            <div class="c-column middle right">
                                <a class="button small rounded light-gray" href="{$wa_app_url}settings/templates/"><i class="fas fa-cog text-blue"></i> [`Template settings`]</a>
                            </div>
                        </div>
                        <div class="c-templates-slider">
                            <ul class="tabs c-templates-list">
                                {foreach $templates as $_template}
                                    <li class="c-template-wrapper js-template-wrapper {if $company.template_id === $_template.id}is-active{/if}" data-id="{$_template.id|escape}">
                                        <div class="card c-template-block">
                                            <div class="image c-frame-wrapper">
                                                <iframe scrolling="no"{if $_template.style_version|default:'2' == '2'} class="blank"{/if} src="?module=invoice&action=templatesRender&template_id={$_template.id|escape}&company_id={$company.id|escape}&style_version={$_template.style_version|escape}"></iframe>
                                            </div>
                                            <div class="details">
                                                <h3 class="c-title">{$_template.name|escape}</h3>
                                            </div>
                                            <input class="js-field" type="radio" name="company[template_id]" value="{$_template.id|escape}" {if $company.template_id === $_template.id}checked{/if}>
                                        </div>
                                    </li>
                                {/foreach}
                            </ul>
                            <span class="c-action left js-arrow-left" title="&larr;"><i class="fas fa-angle-left fa-w-8 fa-2x"></i></span>
                            <span class="c-action right js-arrow-right" title="&rarr;"><i class="fas fa-angle-right fa-w-8 fa-2x"></i></span>
                        </div>

                        <div class="c-template-options-wrapper">
                            <div class="field">
                                <div class="name">[`Public links URL`]</div>
                                <div class="value">
                                    {if $has_storefronts}
                                        <div class="wa-select">
                                            <select name="company[invoice_options][domain]" class="not-styled">
                                                {foreach $storefront_list as $domain => $storefront}
                                                    <option value="{$domain}"
                                                            {if isset($company_params.domain) && $company_params.domain == $domain}selected{/if}
                                                    >{$storefront}</option>
                                                {/foreach}
                                            </select>
                                        </div>
                                    {else}
                                        <div class="alert small custom-mt-0 custom-mb-4">
                                            <div class="flexbox space-8">
                                                <span class=""><i class="fas fa-exclamation-triangle text-orange"></i></span>
                                                <div class="wide">
                                                    [`A CRM settlement is required to publish invoices.`]
                                                    <a href="{$wa_backend_url}site/#/routing/">
                                                        [`Use Site app to add a settlement for CRM.`]
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    {/if}
                                </div>
                            </div>
                        </div>

                        <div class="c-template-options-wrapper js-template-options-wrapper">
                            {include file="./SettingsCompaniesRenderParams.html" inline}
                        </div>
                    </div>
                </div>
                <footer class="c-settings-footer bottombar sticky">
                    <div class="js-errors-place state-error-hint custom-mb-8"></div>
                    <div class="c-footer-actions flexbox middle nowrap full-width">
                        <div class="">

                            <div class="js-footer-actions">
                                <input class="button js-submit-button" type="submit" value="[`Save`]">
                                {if !empty($company.id)}
                                <span class="js-edit-actions" style="display: none;">
                                    <a href="{$wa_app_url}settings/companies/{$company.id}/" class="button light-gray">[`Cancel`]</a>
                                </span>
                                {else}
                                <span class="js-edit-actions">
                                    <a href="{$wa_app_url}settings/companies/" class="button light-gray">[`Cancel`]</a>
                                </span>
                                {/if}
                            </div>

                        </div>
                        {if count($companies) > 1 && !empty($company.id)}
                            <div class="">
                                <a class="button smaller light-gray js-company-delete" href="javascript:void(0);"><i class="fas fa-trash-alt text-red"></i> [`Delete company`]</a>
                            </div>
                        {/if}
                    </div>
                </footer>
            </form>
        </section>
    </div>
    <script>
        (function ($) {
            $.crm.title.set("[`Companies`]");

            new CRMSettingsCompanies({
                $wrapper: $("#c-companies-page"),
                company_id: {if !empty($company.id)}{$company.id}{else}false{/if},
                tax_option_template: {$tax_option_template|json_encode},
                locales: {
                    loading: '<span class="c-notice"><i class="fas fa-spinner wa-animation-spin speed-1000"></i></span>',
                    saved_html: '<span class="c-notice"><i class="fas fa-check"></i></span>'
                }
            });
        })(jQuery);
    </script>
{/strip}