<div class="row">
	<div class="col-md-4">
		<div class="box-body box-profile">
          <img class="profile-user-img img-responsive img-circle" src="{{ usuario.colaboradorFOTO }}" alt="User profile picture">

          <h3 class="profile-username text-center">{{ usuario.personaRAZONSOCIAL }}</h3>

          <p class="text-muted text-center">{{ usuario.cargoTITULO }}</p>
            <ul class="list-group list-group-unbordered">
	            <li class="list-group-item">
	                <b>Identificación:</b> <a class="pull-right">{{ usuario.personaIDENTIFICACION }}</a>
	            </li>
	            <li class="list-group-item">
	                <b>Correo CCSM:</b> <a class="pull-right">{{ usuario.colaboradorEMAIL }}</a>
	            </li>
	            <li class="list-group-item">
	                <b>Unidad de Trabajo:</b> <a class="pull-right">{{ usuario.unidadTITULO }}</a>
	            </li>
	            <li class="list-group-item">
	                <b>Sede:</b> <a class="pull-right">{{ usuario.sedeTITULO }}</a>
	            </li>
	        </ul>
            {% if not vistaColaborador is defined  %}
                <a onclick="cargarVista('usuarios','Perfil', 'mostrarFormularioEditar', 'usuarioID={{ usuario.usuarioID }}', 'Modificar datos del Usuarios', 'colaboradoresForm');" class="btn btn-primary btn-block"><b>Modificar Perfil</b></a>
            {% endif %}
        </div>
	</div>
	<div class="col-sm-8">
		<div id="rootwizard-{{hash_vista}}">
			<div class="navbar">
				<div class="navbar-inner">
			    	<div class="container">
						<ul>
						  	<li><a href="#contacto{{ hash_vista }}" data-toggle="tab">Información de Contacto</a></li>
							<li><a href="#estudios{{ hash_vista }}" data-toggle="tab">Estudios Realizados</a></li>
							<li><a href="#familiar{{ hash_vista }}" data-toggle="tab">Información Familiar</a></li>
							<li><a href="#laboral{{ hash_vista }}" data-toggle="tab">Información Laboral</a></li>
							<li><a href="#log{{ hash_vista }}" data-toggle="tab">Ultimo Eventos</a></li>
						</ul>
					</div>
				</div>
			</div>
		    <div class="tab-content">
		        <div class="tab-pane" id="contacto{{ hash_vista }}">
		        	{{ mostrarVista('usuarios', 'perfil/datos-contacto', {"contacto": usuario.contacto } ) }}
		        </div>
		        <div class="tab-pane" id="estudios{{ hash_vista }}">
		        	{{ mostrarVista('usuarios', 'perfil/datos-estudios', {"estudios": usuario.estudios } ) }}
		        </div>
		    	<div class="tab-pane" id="familiar{{ hash_vista }}">
		    		{{ mostrarVista('usuarios', 'perfil/datos-familiar', {"familiares": usuario.familiar }) }}
		        </div>
		        <div class="tab-pane" id="laboral{{ hash_vista }}">
		        	{{ mostrarVista('usuarios', 'perfil/datos-laboral', {"laboral": usuario } ) }}
		        </div>
		        <div class="tab-pane" id="log{{ hash_vista }}">
		            <div class="container">
		                <div id="logUsuario{{ hash_vista }}"></div>
		            </div>
		        </div>
		    </div>
		</div>
	</div>
</div>

<script>
	$(document).ready(function() {
	  	$('#rootwizard-{{hash_vista}}').bootstrapWizard({onTabShow: function(tab, navigation, index) {
			var $total = navigation.find('li').length;
			var $current = index+1;
			var $percent = ($current/$total) * 100;
			$('#rootwizard-{{hash_vista}}').find('.bar').css({width:$percent+'%'});
		}});
		
		$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
            $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
        } );
		
		$('#rootwizard-{{hash_vista}} .finish').click(function() {
			alert('Finished!, Starting over!');
			$('#rootwizard-{{hash_vista}}').find("a[href*='tab1']").trigger('click');
		});
        cargarDivisionSicam('logUsuario{{ hash_vista }}', 'administrador', 'Log', 'lineaTiempoUsuario', 'usuarioNOMBRE={{ usuario.usuarioNOMBRE }}');

	});
</script>