{% load i18n static common %}
<div style="padding: 10px;min-height: 300px;min-width: 450px">
    <form class="layui-form action-form" action method="post" id="{{ model_name }}_{{ action_repr }}">
        {% csrf_token %}
        <div class="layui-form-item field-import_file">
            <label class="layui-form-label" for="id_import_file">{% trans 'data_import_labelFile' %}<span class='required'>*</span></label>
            <div class="layui-input-inline ">
                <input type="file" name="import_file" accept=".csv, .xlsx, .xls, .txt"   id="id_import_file" required=""  />
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block layui-form-mid layui-word-aux">{% trans 'data_import_fileHelpTxt' %}</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{% trans 'date_import_labelExistingData' %}<span class='required'>*</span></label></label>
            <div class="layui-input-inline">
                <select name="import_type" id="id_import_type">
                    <option value="0" selected="">{% trans 'date_import_typeOptionIgnore' %}</option>
                    <option value="1">{% trans 'date_import_typeOptionOverwrite' %}</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"
                   style="width: 150px;text-align: left">{% trans 'data_import_fileTemplateDemo' %}</label>
            <div class="layui-input-inline" style="float: right">
                <a target="_blank" style="color: #01AAED;"
                   href="att/leavesettings/import_template/"><i
                        class="fa fa-download"></i>{% trans 'data_import_fileTemplateDownload' %}</a>
            </div>
        </div>
        <div class="layui-form-item">
            <table class="layui-hide" id="demo"></table>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block"
                 style="margin-left: 0px;min-height: 24px;">{% trans 'data_import_description' %}</div>
            <div class="layui-input-block" style="margin-left: 20px;">
                <p>{% trans 'data_import_leaveSettingImportRequired4' %}</p>
                <p>{% trans 'data_import_leaveSettingImportRequired5' %}</p>
                <p>{% trans 'data_import_leaveSettingImportRequired6' %}</p>
                <br>
                <p>{% trans 'supported_formats' %}</p>
            </div>
        </div>
    </form>
</div>
<script>
layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#demo'
    ,cols: [[
        {field:'no',width: '10%',title: ''}
        ,{field: 'employee_code', width: '11%', title: 'A'}
        ,{field:'leave_type',width: '13%', title: 'B'}
        ,{field:'leave_effective_from', width: '14%',title: 'C'}
        ,{field:'total_leave', width: '12%',title: 'D'}
        ,{field:'leave_allowed_permonth', width: '14%',title: 'E'}
        ,{field:'auto_carryforward', width: '13%',title: 'F'}
        ,{field:'carryforward_limit', width: '13%',title: 'G'}
    ]]
      ,data: [ {
        "no": "S.No"
        ,"employee_code": "{% trans 'emp_field_employeeCode' %}"
        ,"leave_type": "{% trans 'att_model_allotmenttype' %}"
        ,"leave_effective_from": "{% trans 'att_model_effectivedate' %}"
        ,"total_leave": "{% trans 'att_model_days' %}"
        ,"leave_allowed_permonth": "{% trans 'att_model_maxleave' %}"
        ,"auto_carryforward": "{% trans 'att_model_autoincrement' %}"
        ,"carryforward_limit": "{% trans 'att_model_carryforward' %}"
    }, {
        "no": "1"
        , "employee_code": "10001"
        , "leave_type": "Yearly"
        , "leave_effective_from": "2020-01-01"
        , "total_leave": "10"
        , "leave_allowed_permonth": "3"
        , "auto_carryforward": "Yes"
        , "carryforward_limit": "5"
    },{
        "no": "2"
        , "employee_code": "10002"
        , "leave_type": "Yearly"
        , "leave_effective_from": "2020-01-01"
        , "total_leave": "10"
        , "leave_allowed_permonth": "3"
        , "auto_carryforward": "Yes"
        , "carryforward_limit": "5"
    },{
       "no": "3"
        , "employee_code": "10003"
        , "leave_type": "Yearly"
        , "leave_effective_from": "2020-01-01"
        , "total_leave": "10"
        , "leave_allowed_permonth": "3"
        , "auto_carryforward": "Yes"
        , "carryforward_limit": "5"
    }]
  });

  $(".layui-layer-btn0").click(function () {
    if (!$("input[name='import_file']").val()){
      $("#id_import_file").css({'border':'solid', 'border-color': 'red', 'border-width': '1px', 'border-radius': '2px'})
    }
  });
  $("#id_import_file").click(function () {
      $("#id_import_file").css({'border-width': '0'})
  })
});
</script>
