<div id="import-export-data-wrapper" <%= (App.rtl ? 'style="direction:rtl"' : '') %>>
    <div class="row">
        <div class="col s12">
            <div style="padding: 10px;" class="ap-card-content white z-depth-1" id="import-export-data-form">
                <div id="import-export-data-form-content">
                    <form>
                        <!-- <div class="ap-card-title ap-blue" style="height: 75px;">
                            <p>{Literal}Import Export Data{/Literal}</p> 
                        </div> -->
                        <div class="row">
                            <div class="s12 m3 xl2">
                                <ul class="">
                                  <li id="import" class="tab col"><a style="width: 200px;" class="active waves-effect waves-light btn">{Literal}Import{/Literal}</a></li>
                                  <li id="export" class="tab col"><a style="width: 200px;" class="waves-effect waves-teal teal lighten-5 center btn-flat">{Literal}Export{/Literal}</a></li>
                                </ul>
                            </div>
                        </div>
                        <div id="import-container" class="tab-content">
                            <div class="row">
                                <div class="col s12 m3 xl2">
                                    <div data-action="items" class="import action center card-panel card-panel-entity z-depth-1 sequence-card hoverable waves-effect waves-light">
                                        <div>
                                            <div class="row itemDescription truncate">{Literal}Import Items{/Literal}</div>
                                            <div class="truncate" style="margin-bottom: 0px; color: gray;">
                                                Excel (XML 2003)
                                            </div>
                                            <input accept=".xml" class="file hide" type="file" >
                                        </div>
                                    </div>
                                </div>
                                <div class="col s12 m3 xl2">
                                    <div data-action="customers" class="import action center card-panel card-panel-entity z-depth-1 sequence-card hoverable waves-effect waves-light">
                                        <div>
                                            <div class="row itemDescription truncate">{Literal}Import Customers{/Literal}</div>
                                            <div class="truncate" style="margin-bottom: 0px; color: gray;">
                                                Excel (XML 2003)
                                            </div>
                                            <input accept=".xml" class="file hide" type="file" >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="export-container" class="tab-content hide">
                            <div class="row">
                                <div class="col s12 m3 xl2 export-card">
                                    <div data-action="items" class="export action center card-panel card-panel-entity z-depth-1 sequence-card hoverable waves-effect waves-light">
                                        <div>
                                            <div class="row itemDescription truncate">{Literal}Export Items{/Literal}</div>
                                            <div class="truncate" style="margin-bottom: 0px; color: gray;">
                                                {Literal}Excel (XML 2003){/Literal}
                                            </div>
                                        </div>
                                        <a href="javascript:void(0)" class="btn-floating btn-large waves-effect waves-light ap-dark-blue export-file">
                                                <i class="material-icons">file_download</i>
                                        </a>
                                    </div>
                                    <div  class="row card-options">
                                        <label>
                                            <input type="checkbox" class="filled-in exportEmpty" checked="checked"/>
                                            <span>{Literal}Export Empty Template{/Literal}</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col s12 m3 xl2 export-card">
                                    <div data-action="customers" class="export action center card-panel card-panel-entity z-depth-1 sequence-card hoverable waves-effect waves-light">
                                        <div>
                                            <div class="row itemDescription truncate">{Literal}Export Customers{/Literal}</div>
                                            <div class="truncate" style="margin-bottom: 0px; color: gray;">
                                                {Literal}Excel (XML 2003){/Literal}
                                            </div>
                                        </div>
                                        <a href="javascript:void(0)" class="btn-floating btn-large waves-effect waves-light ap-dark-blue export-file">
                                                <i class="material-icons">file_download</i>
                                        </a>
                                    </div>
                                    <div  class="row card-options">
                                        <label>
                                            <input type="checkbox" class="filled-in exportEmpty" checked="checked"/>
                                            <span>{Literal}Export Empty Template{/Literal}</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col s12 m3 xl2 export-card">
                                    <div data-action="plu" class="export action center card-panel card-panel-entity z-depth-1 sequence-card hoverable waves-effect waves-light">
                                        <div>
                                            <div class="row itemDescription truncate">{Literal}Export Deli Scale{/Literal}</div>
                                            <div class="truncate" style="margin-bottom: 0px; color: gray;">
                                                {Literal}Plu text file{/Literal}
                                            </div>
                                        </div>
                                        <a href="javascript:void(0)" class="btn-floating btn-large waves-effect waves-light ap-dark-blue export-file">
                                            <i class="material-icons">file_download</i>
                                        </a>
                                    </div>
                                    <div  class="row card-options center">
                                        <!-- <div>
                                            <label class="active">{Literal}Encoding{/Literal}</label>
                                            <select id="encoding-dropdown">
                                                <option value="1" >Cp862 - PC Hebrew</option>
                                                <option value="2" >Cp1255 - Windows Hebrew</option>
                                            </select>
                                        </div> -->
                                       <button id="categoriesBtn" class="waves-effect waves-light btn green">{Literal}Select Categories{/Literal}</button>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="import-errors-modal" class="modal modal-fixed-footer" style="max-height: 100%; display: none;">
        <div class="modal-content" <%= (App.rtl ? 'style="direction:rtl"' : '') %>>
            <div style="padding-bottom: 50px">
                <h7>{Literal}Errors List{/Literal}</h7>
            </div>
            <table>
                <thead>
                  <tr>

                  </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

        <div class="modal-footer">
            <a href="javascript:void(0)" class="modal-close waves-effect waves-light ap-blue btn left">{Literal}Close{/Literal}</a>
        </div>
    </div>
    <div id="import-message-modal" class="modal timepicker-modal modal-fixed-footer" style="display: none;max-height: 40%;">
        <div class="modal-content" <%= (App.rtl ? 'style="direction:rtl"' : '') %>>
            <div style="padding-bottom: 50px">
                <h7>{Literal}Import Result{/Literal}</h7>
            </div>
            <div class="center">
            <p style="font-size: 20px;" id="importMsg"></p>
            </div>
        </div>

        <div class="modal-footer">
            <a href="javascript:void(0)" class="modal-close waves-effect waves-light ap-blue btn left">{Literal}Close{/Literal}</a>
        </div>
    </div>
    <div class="preloader-wrapper big signature-modal-trigger-preloader" style="position: absolute;top:50%;left:50%">
        <div class="spinner-layer spinner-blue-only">
            <div class="circle-clipper left">
                <div class="circle"></div>
            </div>
            <div class="gap-patch">
                <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
                <div class="circle"></div>
            </div>
        </div>
    </div>
    <div id="categories-modal" class="modal modal-fixed-footer" style="max-height: 100%; display: none;">
        <div class="modal-content" <%= (App.rtl ? 'style="direction:rtl"' : '') %>>
            <div style="padding-bottom: 50px">
                <h7>{Literal}Select Categories{/Literal}</h7>
            </div>
            <form id="categories-content" style="margin-top:50px">

            </form>
        </div>

        <div class="modal-footer">
            <a href="javascript:void(0)" class="modal-close waves-effect waves-light ap-blue btn left">{Literal}Close{/Literal}</a>
        </div>
    </div>
</div>
