<style>
    .importer-step1-container{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .importer-step1-option-wrapper{
        width: 46%;
        padding: 4rem 4rem;
        margin: 1rem 0px;
    }
    .importer-step1-option{
        background-color: #ffffff;
        border-radius: 5px;
        padding: 1rem 2rem;
        display: flex;
        /* flex-direction: column; */
        border: 1px solid #ddd;
        cursor: pointer;
        box-shadow: 1px 1px 8px #ddd;
        align-items: center;
    }
    .importer-btn-download{
        margin-top: 10px;
    }
    .importer-step1-option:hover{
        background-color: #1e84c6;
        box-shadow: 3px 3px 3px #676a6c;
        border-color: #0b314a;
    }
    .importer-step1-option .fa{
        color: #1e84c6;
        text-align: center;
        font-size: 3.5rem;
        margin-right: 1rem;
        padding-right: 1rem;
        border-right: 1px solid #ddd;
    }
    .importer-step1-option:hover .fa{
        color: #fff;
    }
    .importer-step1-option h4{
        color: #999999;
        text-align: center;
        font-size: 1.4rem;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    .importer-step1-option:hover h4{
        color: #fff;
    }
    .importer-step-ibox{
        padding: 15px 15px 10px;
        display: none;
    }
    .active-step{
        display: block;
    }
    .importer-step1{
        padding: 10px 0px;
    }
    .importer-step1-option-wrapper:hover{
        background-color: aliceblue;
    }
    .importer-main-container{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .importer-main-flex{
        width: 90%;
        max-width: 720px;
    }
    .importer-main-flex.step-extended{
        max-width: 880px;
    }
    .importer-main-flex .ibox-title{
        padding: 15px;
    }
    .importer-main-flex h4{
        margin:0px;
    }
    #_step_title_container{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .title-result-last-step{
        padding: 5px;
        margin-bottom: 1rem;
        font-size: 1.6rem;
    }
    .for-csv-inner{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .for-csv-inner select{
        width: 15rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .step-buttons{
        display: none;
    }
    .importer-loader{
        height: 30vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .importer-step3{
        padding:15px 0px;
    }
    #_importer_results_tabs_ .panel-body{
        max-height: 60vh;
        padding: 0px;
        overflow: auto;
    }
    .importer-result-item{
        padding: 10px 0px;
    }
    .importer-result-row{
        padding: 10px 0px;
        background-color: #e7eaec;
        font-weight: 600;
    }
    .importer-result-item:nth-child(odd){
        background-color: #f5f5f5;
    }
    .error-field{
        color: #ff0000;
        margin-top: 5px;
        font-size: 12px;
        display: block;
    }
    #_promote_domain_selector_wrapper{
        width: 100%;
        display: none;
    }
    .select2-container{
        width:100% !important;
    }
    .select2-selection{
        height: 34px !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #ddd !important;
        border-radius: 0px !important;
    }
    .sample-file-container{
        top: 0px;
        left: 4.6rem;
        width: 16rem;
        padding: 0px;
    }
    .title-how-to{
        margin-bottom: 1rem !important;
        font-size: 1.4rem;
    }
    .ul-how-to{
        list-style: none;
        padding-left: 0px;
    }
    .ul-how-to li{
        padding: 3px 0px;
    }
    .sample-file-container li{
        text-align: left;
    }
    .sample-file-container li:hover{
        background-color: #f5f5f5;
    }
    .sample-file-container a{
        display: block;
        padding: 10px;
    }
    .sample-file-container li:not(:last-child) a{
        border-bottom: 1px solid #eee;
    }
    .select2-selection__rendered{
        color:#999999 !important;
    }
    .importer-result-store{
        text-align: right;
    }
    .select2-selection__arrow{
        position:relative !important;
    }
    #_screen_step_3{
        display: none;
    }
    #_importer_results_tabs_ .nav-link .badge-warning{
        background-color: #f8ac5978;
    }
    #_importer_results_tabs_ .nav-link.active .badge-warning{
        background-color: #f8ac59;
    }
    #_importer_results_tabs_ .nav-link .badge-primary{
        background-color: #1ab39470;
    }
    #_importer_results_tabs_ .nav-link.active .badge-primary{
        background-color: #1ab394;
    }
    .importer-loader .fa{
        font-size: 4rem;
        color: #1e84c6;
    }
    .importer-loader h5{
        margin-top: 10px;
        font-size: 1.4rem;
    }
    .step-footer{
        display: none;
    }
    #_other_delimiter{
        width: 4rem;
        display: none;
    }
    .dropzone{
        border: dashed 1px #dddddd;
        text-align: center;
        margin-top: 1rem;
    }
    .dropzone-mutted{
        font-size: 1.2rem;
        margin-left: 1rem;
        color: #999;
        display: block;
    }
    .just-account{
        display: none;
    }
    .importer-file-option{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        
    }
    /* .importer-file-option:not(:last-child){ */
    .importer-file-option{
        border-bottom: 1px solid #eee;
    }
    #_importer_results_tabs_ li a{
        background-color: #f9f9f9;
        border: 1px solid #e7eaec;
    }
    #_importer_results_tabs_ li.active a{
        background-color: #ffffff !important;
        border: 1px solid #e7eaec !important;
    }
    .empty-result{
        height: 20vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .empty-result h4{
        font-size: 2rem;
    }
    .importer-file-option .form-control{
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .tooltip-inner {
        max-width: 300px;
        width: auto; /* the minimum width */
        word-break: normal;
    }
    .promote-info-ico{
        font-size: 2rem;
        color: #1e84c6;
        cursor: pointer;
        top: 2px;
        position: relative;
    }
    .importer-file-option label{
        margin: 0px;
    }
    .importer-file-option-title{
        width: 25rem;
    }
    .just-aliases{
        display:flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .just-aliases .radio,
    .importer-file-option .radio{
        margin-top:10px !important;
        margin-left:3rem;
    }
    .importer-file-option-input{
        display: flex;
        align-items: center;
    }
    .title-step-2{
        padding-bottom: 1rem;
        border-bottom: 1px solid #ddd;
    }
    .btn-import-pass{
        padding: 5px;
        margin-left: 10px;
        display: none;
    }
    .btn-import-pass .caret{
        margin-left: 3px;
    }
    .for-csv{
        display: none;
    }
    #_how_to_use{
        margin-top: 2rem;
    }
    .result-title{
        font-weight: 600;
        margin-right: 10px;
    }
    .error-field{
        border: 1px dotted #cc5965;
    }
    .val-selected{
        color:#696969 !important;
    }
    .importer-step1-option-wrapper{
        text-align: center;
    }
    .general-password-generator-options.mysql_generator{
        top: 7.8em;
        right: 5rem;
    }
    .step-3-title{
        margin-bottom: 0.7rem !important;
        font-size: 1.5rem;
        border-bottom: 1px solid #eee;
        padding-bottom: 1rem;
    }
</style>
<div class="row  border-bottom white-bg dashboard-header">
    {% if mod.fsl == 1 %}
    {% set stflalert ='block' %}
    {% else %}
    {% set stflalert ='none' %}
    {% endif %}
    <div class="row  alert alert-warning col-lg-12" style="margin-left: 5px; padding-right: 5px;display:{{stflalert}}"
        id="alertfl">
        <strong>{{langene.GALARTFILEBLOCK}}</strong>
    </div>
    <div class="col-lg-10">
        <h2>User ({{users}})</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="?">Home</a>
            </li>
            <li class="breadcrumb-item active">
                <strong>{{langmod.LABIMP1}}</strong>
            </li>
        </ol>
    </div>
</div>
<div class="row importer-main-container" style="margin-top:2rem;">
    <div class="importer-main-flex">
        <div class="ibox" style="margin: 0px;">
            <div class="ibox-title">
                <div id="_step_title_container"><h4>{{langmod.LABIMP2}}: <span class="text-mutted">{{langmod.LABIMP3}}</span></h4></div>
            </div>
            <div class="ibox-content importer-step1 importer-step-ibox active-step">
                <div class="importer-step1-container">
                    <div class="importer-step1-option-wrapper" style="border-right: 1px solid #ddd;">
                        <div class="importer-step1-option" title="Import email accounts from file" data-toggle="tooltip" data-placement="top" onclick="gtoStep2('accounts')">
                            <i class="fa fa-envelope-o" aria-hidden="true"></i>
                            <h4>{{langmod.LABIMP4}}</h4>
                        </div>
                        <span title="{{langmod.LABIMP5}}" data-toggle="tooltip" onclick="openPGOPT('#_accounts_samples_', this)" data-placement="top" class="btn btn-xs btn-primary importer-btn-download">
                            <i class="fa fa-download"></i> {{langmod.LABIMP5}}</span>
                        <div style="position: absolute;">
                            <div class="general-password-generator-options sample-file-container" id="_accounts_samples_" style="z-index: 20;">
                                <ul>
                                    <li>
                                        <a href="?module=email_importer&acc=samplefile&type=accounts&file=csv"><i class="fa fa-file"></i> CSV</a>
                                    </li>
                                    <li>
                                        <a href="?module=email_importer&acc=samplefile&type=accounts&file=xls"><i class="fa fa-file-excel-o"></i> Excel</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="importer-step1-option-wrapper">
                        <div class="importer-step1-option" title="Import email forwarders/alias from file" data-toggle="tooltip" data-placement="top" onclick="gtoStep2('forwarders')">
                            <i class="fa fa-share" aria-hidden="true"></i>
                            <h4>{{langmod.LABIMP6}}</h4>
                        </div>
                        <span title="{{langmod.LABIMP5}}" data-toggle="tooltip" data-placement="top" onclick="openPGOPT('#_alias_samples_', this)" class="btn btn-xs btn-primary importer-btn-download">
                            <i class="fa fa-download"></i> {{langmod.LABIMP5}}</span>
                        <div style="position: absolute;">
                            <div class="general-password-generator-options sample-file-container" id="_alias_samples_" style="z-index: 20;">
                                <ul>
                                    <li>
                                        <a href="?module=email_importer&acc=samplefile&type=forwarders&file=csv"><i class="fa fa-file"></i> CSV</a>
                                    </li>
                                    <li>
                                        <a href="?module=email_importer&acc=samplefile&type=forwarders&file=xls"><i class="fa fa-file-excel-o"></i> Excel</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ibox-content importer-step2 importer-step-ibox">
                <!-- <h3 style="margin-top:0px">Importing email <span id="_importer_type_file"></span>.</h3> -->
                <div class="row">
                    <div class="col-md-5" style="border-right: 1px solid #e7eaec;">
                        <h4 class="title-step-2">{{langmod.LABIMP7}} <a href="#" onclick="browseFile()">{{langmod.LABIMP8}}</a> {{langmod.LABIMP9}}</h4>
                        <form action="?module=email_importer&acc=uploadfile" class="dropzone" id="importer-drop-zone">
                            <div class="fallback">
                                <input name="importer-file" id="_importer_file" type="file" multiple />
                            </div>
                        </form>
                    </div>
                    <div class="col-md-7">
                        <h4 class="title-step-2">{{langmod.LABIMP10}}</h4>
                        <div class="importer-file-option">
                            <label class="importer-file-option-title" for="">{{langmod.LABIMP11}}</label>
                            <div class="importer-file-option-input">
                                <div class="radio">
                                    <input type="radio" class="san-radio" onchange="changeFirstCol(this)" name="fr-radio" checked id="_fr_ch_no"
                                        value="no">
                                    <label for="_fr_ch_no">{{langmod.LABIMP12}}</label>
                                </div>
                                <div class="radio">
                                    <input type="radio" class="san-radio" onchange="changeFirstCol(this)" name="fr-radio" id="_fr_ch_yes"
                                        value="yes">
                                    <label for="_fr_ch_yes">{{langmod.LABIMP13}}</label>
                                </div>
                            </div>
                        </div>
                        <div class="just-aliases">
                            <label class="importer-file-option-title" for="">{{langmod.LABIMP109}}
                                <i class="fa fa-question-circle promote-info-ico" aria-hidden="true" title="{{langmod.LABIMP108}}" data-toggle="tooltip"
                                    data-placement="top"></i>
                            </label>
                            <div class="importer-file-option-input">
                                <div class="radio">
                                    <input type="radio" class="san-radio" onchange="changeAppendAlias(this)" name="ar-radio" checked id="_ar_ch_no"
                                        value="no">
                                    <label for="_ar_ch_no">{{langmod.LABIMP12}}</label>
                                </div>
                                <div class="radio">
                                    <input type="radio" class="san-radio" onchange="changeAppendAlias(this)" name="ar-radio" id="_ar_ch_yes"
                                        value="yes">
                                    <label for="_ar_ch_yes">{{langmod.LABIMP13}}</label>
                                </div>
                            </div>
                        </div>
                        <div class="just-account">
                            <div class="importer-file-option">
                                <label class="importer-file-option-title" for="">{{langmod.LABIMP14}}
                                    <i class="fa fa-question-circle promote-info-ico" aria-hidden="true"
                                        title="{{langmod.LABIMP15}}"
                                        data-toggle="tooltip" data-placement="top"></i>
                                </label>
                                <div class="importer-file-option-input">
                                    <select id="_importer_gen_pass_" onchange="autoPassCheck(this)" style="margin-left:1rem;" class="form-control" id="">
                                        <option value="no" selected>{{langmod.LABIMP12}}</option>
                                        <option value="empty">{{langmod.LABIMP16}}</option>
                                        <option value="*">{{langmod.LABIMP17}}</option>
                                    </select>
                                    <button class="btn btn-primary btn-xs btn-import-pass" title="{{langmod.LABIMP18}}"
                                        data-toggle="tooltip" data-placement="top" onclick="openPGOPT('#_importer_pass_config_', this)">
                                        <i class="fa fa-key"></i>
                                        <span class="caret"></span>
                                    </button>
                                    <div>
                                        <div class="general-password-generator-options mysql_generator" id="_importer_pass_config_"
                                            style="z-index: 20;">
                                            <label for="">{{langmod.LABIMP19}}</label>
                                            <!-- <span class="general-password-generator-options-title"><b>Options</b></span>
                                                                                                                                                <span class="general-password-generator-options-close" onclick="closePGOPT()" style="cursor:pointer">s<i class="fa fa-window-close"></i></span> -->
                                            <ul class="right animated fadeIn">
                                                <li>
                                                    <select class="form-control pwlength" id="_importer_pass_length_" title="{{langmod.LABIMP20}}"
                                                        style="margin-bottom: 5px;">
                                                        <option value="7"> {{langmod.LABIMP20}} 7</option>
                                                        <option value="8"> {{langmod.LABIMP20}} 8</option>
                                                        <option value="9"> {{langmod.LABIMP20}} 9</option>
                                                        <option value="10"> {{langmod.LABIMP20}} 10</option>
                                                        <option value="11"> {{langmod.LABIMP20}} 11</option>
                                                        <option value="12" selected=""> {{langmod.LABIMP20}} 12</option>
                                                        <option value="13"> {{langmod.LABIMP20}} 13</option>
                                                        <option value="14"> {{langmod.LABIMP20}} 14</option>
                                                        <option value="15"> {{langmod.LABIMP20}} 15</option>
                                                    </select>
                                                </li>
                                                <li>
                                                    <select class="form-control pwtype" id="_importer_pass_type" title="Type">
                                                        <option value="alf">{{langmod.LABIMP21}}</option>
                                                        <option value="num" selected="">{{langmod.LABIMP22}}</option>
                                                        <option value="def">{{langmod.LABIMP23}}</option>
                                                    </select>
                                                </li>
                                            </ul>
                                            <button class="btn btn-success btn-block btn-sm btn-close-pass"><i class="fa fa-check"></i>
                                                {{langmod.LABIMP24}}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="importer-file-option for-csv">
                            <div class="for-csv-inner">
                                <label class="importer-file-option-title" for="">{{langmod.LABIMP25}}</label>
                                <select name="" id="_sel_delim_column" onchange="changeDelimiter(this)" style="margin-left:1rem;" class="form-control">
                                    <option value="," selected>{{langmod.LABIMP26}} (,)</option>
                                    <option value=" ">{{langmod.LABIMP27}}</option>
                                    <option value=";">{{langmod.LABIMP28}} (;)</option>
                                    <option value="TAB">{{langmod.LABIMP29}}</option>
                                    <option value="*">{{langmod.LABIMP30}} -></option>
                                </select>
                                <input type="text" class="form-control" id="_other_delimiter" maxlength="2">
                            </div>
                        </div>
                        <div class="just-account">
                            <div class="importer-file-option">
                                <label class="importer-file-option-title" for="">{{langmod.LABIMP31}}
                                    <i class="fa fa-question-circle promote-info-ico" aria-hidden="true"
                                        title="{{langmod.LABIMP32}}"
                                        data-toggle="tooltip" data-placement="top"></i>
                                </label>
                                <div class="importer-file-option-input">
                                    <div class="radio">
                                        <input type="radio" class="san-radio" onchange="promoteCheck(this)" name="promote-radio" checked
                                            id="_promote_no" value="no">
                                        <label for="_promote_no">{{langmod.LABIMP12}}</label>
                                    </div>
                                    <div class="radio">
                                        <input type="radio" class="san-radio" onchange="promoteCheck(this)" name="promote-radio" id="_promote_yes"
                                            value="yes">
                                        <label for="_promote_yes">{{langmod.LABIMP13}}</label>
                                    </div>
                                </div>
                                <div id="_promote_domain_selector_wrapper">
                                    <select name="" id="_promote_domain_selector_">
                                        <option value="">{{langmod.LABIMP33}}</option>
                                        {% for domain in mod.domains %}
                                        <option value="{{domain}}">{{domain}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ibox-content importer-step3 importer-step-ibox">
                <div class="importer-loader" id="_loader_step_3">
                    <span><i class="fa fa-circle-o-notch fa-spin"></i></span>
                    <h5 id="_step_3_title">{{langmod.LABIMP34}}</h5>
                </div>
                <div id="_screen_step_3">
                    <h5></h5>
                </div>
            </div>
            <div class="ibox-footer step-footer">
                <div class="text-right step-footer-content">
                    
                </div>
            </div>
        </div>
        <div class="ibox" id="_how_to_use">
            <div class="ibox-title">
                <h4>{{langmod.LABIMP35}}</h4>
            </div>
            <div class="ibox-content">
                <h4 class="title-how-to">{{langmod.LABIMP111}}</h4>
                <ul class="ul-how-to">
                    <li><i class="fa fa-check" aria-hidden="true"></i> {{langmod.LABIMP112}}</li>
                    <li><i class="fa fa-check" aria-hidden="true"></i> {{langmod.LABIMP113}}</li>
                    <li><i class="fa fa-check" aria-hidden="true"></i> {{langmod.LABIMP114}}</li>
                    <li><i class="fa fa-check" aria-hidden="true"></i> {{langmod.LABIMP115}}</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="step-buttons">
    <div id="_step_2_buttons">
        <button class="btn btn-xs btn-warning" onclick="gtoStep1()" style="margin-right:5px;"><i class="fa fa-chevron-left"></i>
            {{langmod.LABIMP37}}</button>
        <button class="btn btn-xs btn-success step2-next-btn" onclick="gtoStep3()" disabled id="">{{langmod.LABIMP36}} <i class="fa fa-chevron-right"></i></button>
    </div>
    <div id="_step_3_buttons">
        <button class="btn btn-xs btn-warning step-3-btn-back" onclick="gtoStep2()" disabled style="margin-right:5px;"><i class="fa fa-chevron-left"></i>
            {{langmod.LABIMP37}}</button>
        <button class="btn btn-xs btn-success step-3-btn" onclick="proccessFile()" disabled id=""><i class="fa fa-cogs"></i> {{langmod.LABIMP38}}</button>
    </div>
    <div id="_step_4_buttons">
        <button class="btn btn-xs btn-primary step-3-btn-back" onclick="downloadLog()" style="margin-right:5px;"><i class="fa fa-download"></i>
            {{langmod.LABIMP39}}</button>
        <button class="btn btn-xs btn-success step-3-btn" onclick="gtoStep1()" id=""><i class="fa fa-refresh"></i> {{langmod.LABIMP40}}</button>
    </div>
</div>