{% extends "base/templates/base.html" %}
<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='apps/frontend/persona' folder='media' %}js/persona.js?v={{settings.JS_VERSION}}"></script>

{% block breadcumb %}
	<ul class="breadcrumb">
		<li><a href="/"><i class="icon-home2 position-left"></i>Principal</a></li>
		<li class="active">Consultar Usuario</li>
	</ul>
{% endblock %}

{% load staticfiles %}

{% block content %}
<div class="tabbable tab-content-bordered">
	<form id="registrar_perfil" method="post" enctype="multipart/form-data" name="RegistrarPerfilForm">
		{% csrf_token %}
		<ul class="nav nav-tabs nav-tabs-highlight">
			<li class="active"><a href="#informacion_general" data-toggle="tab">Informaci&oacute;n General</a></li>
		</ul>
		<div class="tab-content">
			<!-- informacion general -->
			<div class="tab-pane has-padding active" id="informacion_general">
				<div class="row">
					<div class="col-lg-3 col-md-12  col-sm-12">
						<!-- User thumbnail -->
						<div class="thumbnail">
							<div class="thumb thumb-rounded thumb-slide">
								{% load thumbnail %}
								{% if request.dusuario.avatar %}
									<img src="{% thumbnail request.dusuario.avatar 200x200 crop %}" alt="">
								{% else %}
									<img src="{% static 'all/assets/images/placeholder.jpg' %}" alt="">
								{% endif %}
								<div class="caption">
									<span>
										<a href="#" class="btn bg-success-400 btn-icon btn-xs" data-popup="lightbox"><i class="icon-plus2"></i></a>
										<a href="user_pages_profile.html" class="btn bg-success-400 btn-icon btn-xs"><i class="icon-link"></i></a>
									</span>
								</div>
							</div>
						
					    	<div class="caption text-center">
					    		<h6 class="text-semibold no-margin">{{ request.user.get_full_name|title }} <small class="display-block">{{ request.dusuario.get_rol_display }}</small></h6>
				    			<ul class="icons-list mt-15">
				                	<li><a href="#" data-popup="tooltip" title="" data-original-title="Facebook"><i class="icon-facebook"></i></a></li>
				                	<li><a href="#" data-popup="tooltip" title="" data-original-title="Twitter"><i class="icon-twitter"></i></a></li>
				                	<li><a href="#" data-popup="tooltip" title="" data-original-title="Github"><i class="icon-instagram"></i></a></li>
				            	</ul>
					    	</div>
				    	</div>
				    	<!-- /user thumbnail -->
			    	</div>
				</div>
				<div class="row">
					
					<div class="col-md-6 col-sm-12">
						<div class="row">
							<div class="col-md-6 col-sm-12">
								<h4>
									<small>Usuario:</small><br />
									{{ request.user.username }}
								</h4>
							</div>
							<div class="col-md-6 col-sm-12">
								<h4>
									<small>Rol:</small><br />
									{{ request.dusuario.get_rol_display }}
								</h4>
							</div>
						</div>
						<div class="row">
							<div class="col-md-6 col-sm-12">
								<h4>
									<small>Identificación:</small><br />
									{{ request.dusuario.identificacion }}
								</h4>
							</div>
							<div class="col-md-6 col-sm-12">
								<h4>
									<small>Avatar:</small><br />
								</h4>
								{{ form.avatar }}{{ form.errors.avatar }}
							</div>
						</div>
						<div class="row">
							<div class="col-md-6 col-sm-12">
								<h4>
									<small>Email:</small><br />
								</h4>
								{{ form.email }}{{ form.errors.email }}
							</div>
							<div class="col-md-6 col-sm-12">
								<h4>
									<small>Teléfono:</small><br />
								</h4>
								{{ form.telefono }}{{ form.errors.telefono }}
							</div>
						</div>
						<div class="row">
							<div class="col-md-6 col-sm-12">
								<h4>
									<small>Contraseña Actual:</small><br />
								</h4>
								{{ form.clave_actual }}{{ form.errors.clave_actual }}
							</div>
						</div>
						<div class="row">
							<div class="col-md-6 col-sm-12">
								<h4>
									<small>Contraseña Nueva:</small><br />
								</h4>
								{{ form.clave_nueva }}{{ form.errors.clave_nueva }}
							</div>
						</div>
						<div class="row">
							<div class="col-md-6 col-sm-12">
								<h4>
									<small>Confirma Contraseña Nueva:</small><br />
								</h4>
								{{ form.confirmar_clave_nueva }}{{ form.errors.confirmar_clave_nueva }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- /informacion general -->
		</div>
		
		<div class="row">
			<div class="col-sm-12">
				<br>
				<button class="btn btn-success btn-sm" onclick="guardarPerfil(this);"><span class="icon-floppy-disk text-size-base"></span> Guardar</button>
			</div>
		</div>
	</form>
</div>
{% endblock %}

{% block footer_js %}
	<script type="text/javascript" src="{% url 'comextweb.helpers.utils.mediaurl' application='apps/frontend/persona' folder='media' %}js/persona_contacto.js?v={{settings.JS_VERSION}}"></script>

	<script type="text/javascript">
		function guardarPerfil(el){
			$(el).prop('disabled', true);
			$(el).html('<i class="icon-spinner3 spinner"></i>&nbsp;Guardando...');
			document.forms.RegistrarPerfilForm.submit();
		}
	</script>
{% endblock %}