{$block_id = uniqid('crm-import-block-')}
{$form_id  = uniqid('crm-import-form-')}
<div class="article wider" style="margin: 0; max-width: 100%;">
    <div class="article-body">
        <div class="crm-block crm-import-upload-block" id="{$block_id}">

            <div class="crm-title-block">
                <h1>[`Import contacts`]</h1>
                <div class="highlighted crm-import-message">
                    {if $error}
                        {$error}
                    {else}
                        {$_count = $csv.fields|@count}
                        {sprintf(_w("We have found %d column in imported data.", "We have found %d columns in imported data.", $_count))}
                    {/if}
                </div>
                <div class="crm-warning-require-primary-fields" style="display: none">
                    [`You must select at least one of the following fields: First name, Last name, Company name, Email.`]
                </div>
            </div>

            <form class="crm-import-form" id="{$form_id}">
                <div class="crm-specify-message">
                    [`Please specify fields matching these columns.`]
                </div>
                <div class="crm-import-table-wrapper">
                    <div class="block not-padded" style="overflow: auto;">
                        {if $csv}
                        <div class="table-scrollable-x">
                            <table width="100%" cellspacing="0" cellpadding="0" class="zebra small full-width bottom-bordered crm-import-upload-table">
                                <thead>
                                <tr>
                                    {foreach $csv.fields as $i => $f}
                                        <th class="custom-pl-0">
                                            <div class="wa-select" style="font-size: 109%;">
                                                <select class="larger not-styled" name="fields[{$i}]">
                                                    <option value="">[`field...?`]</option>
                                                    {foreach $fields as $field_id => $field}
                                                        {foreach $field.options as $v => $n}
                                                            <option value="{$v|escape}">{$n|escape}</option>
                                                        {/foreach}
                                                    {/foreach}
                                                </select>
                                            </div>
                                        </th>
                                    {/foreach}
                                </tr>
                                </thead>
                                <tbody>
                                {foreach $csv.records as $record}
                                    <tr>
                                        {foreach $csv.fields as $k => $v}
                                            <td>{$record[$k]|default:''|escape}</td>
                                        {/foreach}
                                    </tr>
                                {/foreach}
                                </tbody>
                            </table>
                        </div>
                            {if count($csv.records) < $csv.count}
                                <div class="table-foot">...</div>
                            {/if}
                        {/if}
                    </div>
                    <div class="block custom-mt-8">
                        <div class="flexbox vertical crm-bottom-panel">
                            <div class="crm-total-count-column">
                                [`Total lines`]: <span class="highlighted crm-count">{if !empty($csv.count)}{$csv.count}{/if}</span>
                            </div>
                            <div class="crm-submit-column">
                                <label>
                                    <input type="checkbox" name="first_line" checked="checked"> [`Import first line`]
                                </label>
                                <label>
                                    <input type="checkbox" name="validate"> [`Enable validation control (required and unique fields and data format)`]
                                </label>
                                <label>
                                    <input type="checkbox" name="create_deals" value="1"> [`Create deals`]
                                </label>
                                <div class="crm-deals-settings-wrapper" style="display: none;">

                                    <div class="wa-select">
                                    <select name="deal_funnel_id">
                                        {foreach $funnels as $_id => $_f}
                                            <option value="{$_id}" {if $form.params.deal_funnel_id|default:0 == $_id} selected="selected"{/if}>{$_f.name|escape}</option>
                                        {/foreach}
                                    </select>
                                    </div>

                                    <div class="wa-select">
                                    <select name="deal_stage_id">
                                        {foreach $stages as $_id => $_s}
                                            <option value="{$_id}" {if $form.params.deal_stage_id|default:0 == $_id} selected="selected"{/if}>{$_s.name|escape}</option>
                                        {/foreach}
                                    </select>
                                    </div>

                                </div>

                                <div class="c-add-to-segments-wrapper">
                                    <label>
                                        <input type="checkbox" name="add_to_segments" value="1">
                                        [`Add to segments`]
                                    </label>
                                    <div class="c-add-to-segments-names"></div>
                                </div>

                                <div class="crm-button-wrapper">
                                    <input type="hidden" name="uid" value="{uniqid('crm-contact-import-')}">
                                    <input type="hidden" name="separator" value="{$csv.delimiter}">
                                    <input type="hidden" name="group_id" value="{$group_id}">
                                    <input type="hidden" name="encoding" value="{$csv.encode}">
                                    <input type="hidden" name="columns" value="{count($csv.fields)}">
                                    <input class="crm-import-upload-button button green" type="submit" value="[`Import`]" disabled="disabled">
                                    <a href="{$wa_app_url}contact/import/" class="button light-gray">[`Cancel`]</a>
                                    <span class="icon loading crm-loading" style="display: none"><i class="fas fa-spinner wa-animation-spin speed-1000"></i></span>
                                </div>

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

                    <div class="crm-import-progressbar-dialog">
                        <div class="crm-progressbar"></div>
                    </div>

                </div>
            </form>

            <script>
                $(function () {
                    new crmContactImportUpload({
                        '$wrapper': $('#{$block_id}'),
                        'fieldInfo': {$fieldInfo|json_encode},
                        'messages': {
                            no_imported: "[`Done! No contacts were imported due to validation errors.`]",
                            some_imported: "[`Done! Some contacts were not imported due to validation errors.`]",
                            all_imported: "[`Done! All contacts imported successfully.`]",
                            button: "[`Close`]"
                        }
                    });
                });
            </script>

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