<form id="frm-TalentoHumano-Cargos-{{hash_vista}}" >
    <div class="box">
        <div class="box-header with-border">
            <h3 class="box-title">Formulario de Cargos</h3>
            <div class="box-tools pull-right">
                {% if Cargos %}
                {{ boton("guardar","mostrarFormularioEditarCargosTalentoHumano")}}
                {% else %}
                {{ boton("guardar","mostrarFormularioNuevoCargosTalentoHumano")}}
                {% endif %}
                {{ boton("cerrar", null, "cerrarFormularioCargosTalentoHumano" ~ hash_vista ~ "()")}}
                {{ boton("resetear", null, "cargoTITULO.focus();")}}  
            </div>            
        </div>        
        <div class="box-body">
            <div class="row">
                <div class="col-md-12" id="">
                    <div class="form-group">
                        <div class="form-group">
                            <label for="cargoCATEGORIA">Categoria:</label>
                            <select class="form-control select2" id="cargoCATEGORIA" name="cargoCATEGORIA" style="width: 100%;">
                                <option>NINGUNA</option>
                                {% if CategoriasCargos %}
                                {% for categoria in CategoriasCargos %}
                                <option value="{{categoria.categoriaID}}" >{{categoria.categoriaTITULO}}</option>
                                {% endfor %}
                                {% endif %}
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4" id="">
                    <div class="form-group">
                        <label for="cargoCODIGO">Código de Cargos</label>
                        <input type="text" class="form-control uppercase" name="cargoCODIGO" id="cargoCODIGO"  readonly=""
                               value="{{ Cargos.cargoCODIGO }}" placeholder="Código de Cargos"  />
                    </div>
                </div>
                <div class="col-md-8" id="">
                    <div class="form-group">
                        <label for="cargoTITULO">Título de Cargos</label>
                        <input type="text" class="form-control uppercase" name="cargoTITULO" id="cargoTITULO"  required
                               value="{{ Cargos.cargoTITULO }}" placeholder="Título de Cargos"  />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6" >
                    <div class="form-group">
                        <label for="cargoDESCRIPCION">Descripción del Cargos (max 140 caracteres)</label>
                        <textarea rows="5" cols="80" maxlength="140" class="wysiwyg form-control " placeholder="Descripción del cargo" 
                                  name="cargoDESCRIPCION" id="cargoDESCRIPCION-{{ hash_vista }}" 
                                  >{{ Cargos.cargoDESCRIPCION }}</textarea>
                    </div>
                    <div class="form-group">
                        <label for="cargoENLACE">Enlace de Cargos Externa</label>
                        <input type="url" class="form-control" name="cargoENLACE" id="cargoENLACE"
                               value="{{ Cargos.cargoENLACE }}" placeholder="Enlace de Cargos" >
                    </div>
                    <div class="form-group">
                        <label for="cargoEMAIL">Correo de Cargos</label>
                        <input type="email" class="form-control" name="cargoEMAIL" id="cargoEMAIL"
                               value="{{ Cargos.cargoEMAIL }}" placeholder="Correo de Cargos" >
                    </div>
                    <div class="form-group">
                        <label>Estado:</label>
                        <label class="col-sm-6">
                            <input type="radio" name="cargoESTADO" id="cargoActivado" class="flat-red cargoESTADORADIO" required 
                                   {% if Cargos.cargoESTADO == 'ACTIVO'%}checked{% endif %} value="ACTIVO" />
                                   ACTIVADO
                        </label>
                        <label class="col-sm-6">
                            <input type="radio" name="cargoESTADO" id="cargoDesactivo" class="flat-red cargoESTADORADIO" required
                                   {% if Cargos.cargoESTADO == 'SUSPENDIDO' %}checked{% endif %} value="DESACTIVO" /> 
                                   DESACTIVO
                        </label>
                    </div>
                </div>
                <div class="col-md-6" >
                    <div class="thumbnail">
                        <img src="{% if Cargos.cargoIMGMAX %}{{ Cargos.cargoIMGMAX }}{% else %}http://via.placeholder.com/300x420/FEDCBA/000000/?text=Cargos+300x420{% endif %}" alt="Imagen Promocional Completa"  class="img-thumbnail" style="width:100%" />
                        <div class="caption">                                      
                        </div>
                    </div>
                    <div class="form-group" >
                        <label for="cargoIMAGEN">Imagen</label>
                        <input accept="image/*" class="file cargoIMAGEN" data-show-upload="false" data-show-caption="true" 
                               type="file" id="cargoIMAGEN"  name='cargoIMAGEN' {% if not Cargos %}required{% endif %} /> 
                    </div>
                    <div class="form-group" >
                        <label for="cargoPDF">pdf</label>
                        <input accept="pdf" class="file cargoPDF" data-show-upload="false" data-show-caption="true" 
                               type="file" id="cargoPDF"  name='cargoPDF' /> 
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" name="cargoID" value="{{Cargos.cargoID}}" />
</form>
{% block javascript %}
<script>
    $(document).ready(function () {
        $("#frm-TalentoHumano-Cargos-{{hash_vista}}").submit(function () {
            ejecutarOperacionArchivo(
                    "TalentoHumano", "Cargos", "guardarDatos",
                    crearFormData("frm-TalentoHumano-Cargos-{{hash_vista}}"),
                    function (cargo) {
                        cerrarFormularioCargosTalentoHumano{{hash_vista}}();
                        cargarVista('TalentoHumano', 'Cargos', 'mostrarFormularioEditar', 'cargoID=' + cargo.cargoID);
                        if (typeof cargarTablaCargosTalentoHumano === "function") {
                            cargarTablaCargosTalentoHumano();
                        }
                    }
            );
        });
        $("#cargoDESCRIPCION-{{hash_vista}}").wysihtml5();
        $("#cargoIMAGEN").fileinput({
            previewFileType: "image",
            maxFileSize: 512
        });
        $("#cargoPDF").fileinput({
            previewFileType: "pdf",
            maxFileSize: 2048
        });
        $('.cargoESTADORADIO').iCheck({
            radioClass: 'iradio_flat-blue'
        });
        $('.cargoESTADOCHECK').iCheck({
            checkboxClass: 'icheckbox_flat-blue'
        });
        $('#cargoCATEGORIA').select2();
    });
    function cerrarFormularioCargosTalentoHumano{{hash_vista}}() {
        cerrarTabContenedor("frm-TalentoHumano-Cargos-{{hash_vista}}");
    }
</script>   
{% endblock %}