{% extends "base.html" %}
{% block title %} perfil | {{super}}{%endblock %}

{% block ver_perfil%}
"{%url ver_perfil informacion.asignatura.slug %}"
{% endblock%}
{%block escoge-asignatura%}
  {{informacion.asignatura.slug}}
{%endblock%}

{% block navbar%}
{%include "app/include/menu.html"%}
{%endblock%}


{% block content %}

<div class="span9">

             <h1>Perfil</h1>
             <fieldset>
			  	<legend id="titulo">Modifica</legend>
			  	<br>

			  {% if user.is_authenticated %}
               <form method="post" action="" class="form-horizontal" enctype="multipart/form-data">
                  {% csrf_token %}
				{% for field in form%}
					<div class="control-group">
						<label class="control-label" for="input01">{{ field.label}}</label>
						{% if  field.errors %}
	                        <div class="alert alert-error" style="margin-top:0.4em;width:10em;">
	                            <a class="close" data-dismiss="alert">×</a>
	                            <strong>ERROR</strong>{{ field.errors }}
	                        </div>
                        {%endif%}
						<div class="controls">
							{%if field.label == 'Foto' %}
									<img src="{{MEDIA_URL}}{{user.usuario.foto}}"width="100px" heigth="100px"><br/>
							{%endif %}							

							{{field}}


						</div>
					</div>

				{% endfor %}
				<br/>
				  	<div id="editar">
				  <div class="form-actions">
				  	<div class="pull-right">
                     <button type="#" id="edit" class="btn btn-primary btn-large btn-success">Editar</button>
				  	</div>
                  </div>
              	</div>
                  <div id="form-edit">
				  <div class="form-actions">
				  	<div class="pull-right">
                     <button type="submit" class="btn btn-primary btn-large btn-success">Salvar</button>

					 {%if informacion.atras %}
					                     <a href="{{informacion.atras}}" class="btn btn-primary btn-large btn-danger">Cancelar</a>
					 {%endif%}
					 </div>
                  </div>
              	</div>
				</form>
							 </fieldset>

				{%endif%}
</div>


{%endblock%}

{%block extra_js%}
<script>
$(document).ready(function(event) {
	$("#form-edit").css("display","none");
	var titulo = document.getElementById ("titulo");
	titulo.innerHTML = "Perfil personal";

    $("#edit").click(function(event) {
        event.preventDefault();
		if ($("#form-edit").is(":hidden")) 
		{
			titulo.innerHTML = "Configura tu perfil";
			$("#editar").hide();
        	$("#form-edit").fadeIn("fast"); 

		} 

		    
    });
});

</script>
{% endblock%}