{% extends "base.html" %}
{% load mezzanine_tags keyword_tags %}

{% block meta_title %}{{ page.meta_title }}{% endblock %}

{% block meta_keywords %}{% metablock %}
{% keywords_for page as keywords %}
{% for keyword in keywords %}
    {% if not forloop.first %}, {% endif %}
    {{ keyword }}
{% endfor %}
{% endmetablock %}{% endblock %}

{% block meta_description %}{% metablock %}
{{ page.description }}
{% endmetablock %}{% endblock %}

{% block title %}
{% editable page.title %}{{ page.title }}{% endeditable %}
{% endblock %}

{% block main %}
<div style="background-image: url('/static/img/fondo-pag-encuesta.png'); background-repeat: repeat-y; background-position: center; background-attachment: fixed;">
    <h2>RESULTADOS DE LA ENCUESTA DE AUTOEVALUACIÓN</h2>
    {% if request.user.is_authenticated %}

	<div class="panel panel-info">
	    <div class="panel-body">
		Los resultados se actualizan automáticamente.
	    </div>
	</div>
	<ul>
	    <li> <a href="#d1">Dimensión 1</a> </li>
	    <li> <a href="#d2">Dimensión 2</a> </li>
	    <li> <a href="#d3">Dimensión 3</a> </li>
	    <li> <a href="#d4">Dimensión 4</a> </li>
	</ul>

	{# reprote vista para administradores #}
	{% if request.user.is_superuser %}
	    <a href="/pdfpdf" type="submit" class="btn btn-lg btn-primary">
		Descargar reporte como PDF
	    </a>
	    
        <div class="row">
        <div class="col-md-8">
		
  	    <h3>DIMENSIÓN 1</h3>
	<table class="table">
	    <tr>
		<th> Punto</th>
		<th> Número de Valoraciones</th>
		<th> Porcentaje de aceptación <i class="glyphicon glyphicon-ok-circle" style="color: #A1E1A9"></i></th>
	    </tr>
	    {% for puntaje in puntajes_d1 %}
	    <tr>
	        <td> <a href="/encuesta_d1/#{{ puntaje.punto }}" target="_blank">{{ puntaje.punto }}</a> </td>
		
		<td>
		    {{ puntaje.num_evaluaciones }}
		</td>

		<td>
		    {{ puntaje.porcentaje|floatformat:"1" }}%
		</td>
	    </tr>
	    {% endfor %}
	</table>

  	    <h3>DIMENSIÓN 2</h3>
	<table class="table">
	    <tr>
		<th> Punto</th>
		<th> Número de Valoraciones</th>
		<th> Porcentaje de aceptación <i class="glyphicon glyphicon-ok-circle" style="color: #A1E1A9"></i></th>
	    </tr>
	    {% for puntaje in puntajes_d2 %}
	    <tr>
	        <td> <a href="/encuesta_d2/#{{ puntaje.punto }}" target="_blank">{{ puntaje.punto }}</a> </td>
		
		<td>
		    {{ puntaje.num_evaluaciones }}
		</td>

		<td>
		    {{ puntaje.porcentaje|floatformat:"1" }}%
		</td>
	    </tr>
	    {% endfor %}
	</table>

  	    <h3>DIMENSIÓN 3</h3>
	<table class="table">
	    <tr>
		<th> Punto</th>
		<th> Número de Valoraciones</th>
		<th> Porcentaje de aceptación <i class="glyphicon glyphicon-ok-circle" style="color: #A1E1A9"></i></th>
	    </tr>
	    {% for puntaje in puntajes_d3 %}
	    <tr>
	        <td> <a href="/encuesta_d3/#{{ puntaje.punto }}" target="_blank">{{ puntaje.punto }}</a> </td>
		
		<td>
		    {{ puntaje.num_evaluaciones }}
		</td>

		<td>
		    {{ puntaje.porcentaje|floatformat:"1" }}%
		</td>
	    </tr>
	    {% endfor %}
	</table>

  	    <h3>DIMENSIÓN 4</h3>
	<table class="table">
	    <tr>
		<th> Punto</th>
		<th> Número de Valoraciones</th>
		<th> Porcentaje de aceptación <i class="glyphicon glyphicon-ok-circle" style="color: #A1E1A9"></i></th>
	    </tr>
	    {% for puntaje in puntajes_d4 %}
	    <tr>
	        <td> <a href="/encuesta_d4/#{{ puntaje.punto }}" target="_blank">{{ puntaje.punto }}</a> </td>
		
		<td>
		    {{ puntaje.num_evaluaciones }}
		</td>

		<td>
		    {{ puntaje.porcentaje|floatformat:"1" }}%
		</td>
	    </tr>
	    {% endfor %}
	</table>
	
	</div>
        </div>
	{% endif %}
	{# ################### #}

	
	<h3 id="d1">DIMENSIÓN 1</h3>
	
	{#% for p in pd1 %#}
	    {#{ p.punto }#} ,
	{#% endfor %#}
	<!-- -- {{ pd1 }} -- -->
	<div class="row">
	    <div class="col-md-4">
		{% for puntaje in puntajes_d1 %}
		    {% if forloop.counter0 >= 0  and forloop.counter0 < 8 %}
			<b>punto</b>: <a href="/encuesta_d1/#{{ puntaje.punto }}" target="_blank"> {{ puntaje.punto }} </a>
			<p>
			    Valoraciones: {{ puntaje.num_evaluaciones }} &nbsp;&nbsp <small> {{ puntaje.porcentaje|floatformat:"1" }}% <i class="glyphicon glyphicon-ok-circle" style="color: #A1E1A9"></i></small>
			</p>
			Promedio:
			<div class="progress">
			    <div class="progress-bar" role="progressbar" aria-valuenow="70"
				 aria-valuemin="0" aria-valuemax="100" style="width:{{ puntaje.porcentaje }}%">{{ puntaje.promedio|floatformat:"1" }} / 5
			    </div>
			</div>
			<hr>
		    {% endif %}
		{% endfor %}
	    </div>
	    <div class="col-md-4">
		{% for puntaje in puntajes_d1 %}
		    {% if forloop.counter0 >= 8  and forloop.counter0 < 15 %}
			<b>punto</b>: <a href="/encuesta_d1/#{{ puntaje.punto }}" target="_blank"> {{ puntaje.punto }} </a>
			<br>
			Valoraciones: {{ puntaje.num_evaluaciones }} &nbsp;&nbsp <small>{{ puntaje.porcentaje|floatformat:"1" }}% <i class="glyphicon glyphicon-ok-circle" style="color: #A1E1A9"></i> </small>

			<br>
			<br>
			Promedio:
			<div class="progress">
			    <div class="progress-bar" role="progressbar" aria-valuenow="70"
				 aria-valuemin="0" aria-valuemax="100" style="width:{{ puntaje.porcentaje }}%">{{ puntaje.promedio|floatformat:"1" }} / 5
			    </div>
			</div>
			<hr>
		    {% endif %}
		{% endfor %}
	    </div>
	    <div class="col-md-4">
		{% for puntaje in puntajes_d1 %}
		    {% if forloop.counter0 >= 15 %}
			<b>punto</b>: <a href="/encuesta_d1/#{{ puntaje.punto }}" target="_blank"> {{ puntaje.punto }} </a>
			<br>
			Valoraciones: {{ puntaje.num_evaluaciones }} &nbsp;&nbsp <small>{{ puntaje.porcentaje|floatformat:"1" }}% <i class="glyphicon glyphicon-ok-circle" style="color: #A1E1A9"></i> </small>
			<br>
			Promedio:
			<div class="progress">
			    <div class="progress-bar" role="progressbar" aria-valuenow="70"
				 aria-valuemin="0" aria-valuemax="100" style="width:{{ puntaje.porcentaje }}%">{{ puntaje.promedio|floatformat:"1" }} / 5
			    </div>
			</div>
			<hr>
		    {% endif %}
		{% endfor %}
	    </div>
	</div>

	<h3 id="d2" style="color:#FDD">.</h3>
	<h3>DIMENSIÓN 2</h3>
	<div class="row">
	    <div class="col-md-3">
		{% for puntaje in puntajes_d2 %}
		    {% if forloop.counter0 >= 0  and forloop.counter0 < 21 %}
			<b>punto</b>: <a class="btn" href="/encuesta_d2/#{{ puntaje.punto }}" target="_blank"> {{ puntaje.punto }} </a>
			<br>
			Valoraciones: {{ puntaje.num_evaluaciones }} &nbsp;&nbsp <small>{{ puntaje.porcentaje|floatformat:"1" }}% <i class="glyphicon glyphicon-ok-circle" style="color: #A1E1A9"></i> </small>
			<br>
			Promedio:
			<div class="progress">
			    <div class="progress-bar" role="progressbar" aria-valuenow="70"
				 aria-valuemin="0" aria-valuemax="100" style="width:{{ puntaje.porcentaje }}%">{{ puntaje.promedio|floatformat:"1" }} / 5
			    </div>
			</div>
			<hr>
		    {% endif %}
		{% endfor %}
	    </div>
	    <div class="col-md-3">
		{% for puntaje in puntajes_d2 %}
		    {% if forloop.counter0 >= 21  and forloop.counter0 < 41 %}
			<b>punto</b>: <a class="btn" href="/encuesta_d2/#{{ puntaje.punto }}" target="_blank"> {{ puntaje.punto }} </a>
			<br>
			Valoraciones: {{ puntaje.num_evaluaciones }} &nbsp;&nbsp <small>{{ puntaje.porcentaje|floatformat:"1" }}% <i class="glyphicon glyphicon-ok-circle" style="color: #A1E1A9"></i> </small>
			<br>
			Promedio:
			<div class="progress">
			    <div class="progress-bar" role="progressbar" aria-valuenow="70"
				 aria-valuemin="0" aria-valuemax="100" style="width:{{ puntaje.porcentaje }}%">{{ puntaje.promedio|floatformat:"1" }} / 5
			    </div>
			</div>
			<hr>
		    {% endif %}
		{% endfor %}
	    </div>
	    <div class="col-md-3">
		{% for puntaje in puntajes_d2 %}
		    {% if forloop.counter0 >= 41  and forloop.counter0 < 61 %}
			<b>punto</b>: <a class="btn" href="/encuesta_d2/#{{ puntaje.punto }}" target="_blank"> {{ puntaje.punto }} </a>
			<br>
			Valoraciones: {{ puntaje.num_evaluaciones }} &nbsp;&nbsp <small>{{ puntaje.porcentaje|floatformat:"1" }}% <i class="glyphicon glyphicon-ok-circle" style="color: #A1E1A9"></i> </small>
			<br>
			Promedio:
			<div class="progress">
			    <div class="progress-bar" role="progressbar" aria-valuenow="70"
				 aria-valuemin="0" aria-valuemax="100" style="width:{{ puntaje.porcentaje }}%">{{ puntaje.promedio|floatformat:"1" }} / 5
			    </div>
			</div>
			<hr>
		    {% endif %}
		{% endfor %}
	    </div>
	    <div class="col-md-3">
		{% for puntaje in puntajes_d2 %}
		    {% if forloop.counter0 >= 61  %}
			<b>punto</b>: <a class="btn" href="/encuesta_d2/#{{ puntaje.punto }}" target="_blank"> {{ puntaje.punto }} </a>
			<br>
			Valoraciones: {{ puntaje.num_evaluaciones }} &nbsp;&nbsp <small>{{ puntaje.porcentaje|floatformat:"1" }}% <i class="glyphicon glyphicon-ok-circle" style="color: #A1E1A9"></i> </small>
			<br>
			Promedio:
			<div class="progress">
			    <div class="progress-bar" role="progressbar" aria-valuenow="70"
				 aria-valuemin="0" aria-valuemax="100" style="width:{{ puntaje.porcentaje }}%">{{ puntaje.promedio|floatformat:"1" }} / 5
			    </div>
			</div>
			<hr>
		    {% endif %}
		{% endfor %}
	    </div>
	</div>



	<h3 id="d3" style="color:#FDD">.</h3>
	<h3>DIMENSIÓN 3</h3>
	<div class="row">
	    <div class="col-md-3">
		{% for puntaje in puntajes_d3 %}
		    {% if forloop.counter0 >= 0  and forloop.counter0 < 13 %}
			<b>punto</b>: <a class="btn" href="/encuesta_d3/#{{ puntaje.punto }}" target="_blank"> {{ puntaje.punto }} </a>
			<br>
			Valoraciones: {{ puntaje.num_evaluaciones }} &nbsp;&nbsp <small>{{ puntaje.porcentaje|floatformat:"0" }}% <i class="glyphicon glyphicon-ok-circle" style="color: #A1E1A9"></i> </small>
			<br>
			Promedio:
			<div class="progress">
			    <div class="progress-bar" role="progressbar" aria-valuenow="70"
				 aria-valuemin="0" aria-valuemax="100" style="width:{{ puntaje.porcentaje }}%">{{ puntaje.promedio|floatformat:"0" }} / 5
			    </div>
			</div>
			<hr>
		    {% endif %}
		{% endfor %}
	    </div>
	    <div class="col-md-3">
		{% for puntaje in puntajes_d3 %}
		    {% if forloop.counter0 >= 13  and forloop.counter0 < 25 %}
			<b>punto</b>: <a class="btn" href="/encuesta_d3/#{{ puntaje.punto }}" target="_blank"> {{ puntaje.punto }} </a>
			<br>
			Valoraciones: {{ puntaje.num_evaluaciones }} &nbsp;&nbsp <small>{{ puntaje.porcentaje|floatformat:"0" }}% <i class="glyphicon glyphicon-ok-circle" style="color: #A1E1A9"></i> </small>
			<br>
			Promedio:
			<div class="progress">
			    <div class="progress-bar" role="progressbar" aria-valuenow="70"
				 aria-valuemin="0" aria-valuemax="100" style="width:{{ puntaje.porcentaje }}%">{{ puntaje.promedio|floatformat:"0" }} / 5
			    </div>
			</div>
			<hr>
		    {% endif %}
		{% endfor %}
	    </div>
	    <div class="col-md-3">
		{% for puntaje in puntajes_d3 %}
		    {% if forloop.counter0 >= 25  and forloop.counter0 < 37 %}
			<b>punto</b>: <a class="btn" href="/encuesta_d3/#{{ puntaje.punto }}" target="_blank"> {{ puntaje.punto }} </a>
			<br>
			Valoraciones: {{ puntaje.num_evaluaciones }} &nbsp;&nbsp <small>{{ puntaje.porcentaje|floatformat:"0" }}% <i class="glyphicon glyphicon-ok-circle" style="color: #A1E1A9"></i> </small>
			<br>
			Promedio:
			<div class="progress">
			    <div class="progress-bar" role="progressbar" aria-valuenow="70"
				 aria-valuemin="0" aria-valuemax="100" style="width:{{ puntaje.porcentaje }}%">{{ puntaje.promedio|floatformat:"0" }} / 5
			    </div>
			</div>
			<hr>
		    {% endif %}
		{% endfor %}
	    </div>
	    <div class="col-md-3">
		{% for puntaje in puntajes_d3 %}
		    {% if forloop.counter0 >= 37  %}
			<b>punto</b>: <a class="btn" href="/encuesta_d3/#{{ puntaje.punto }}" target="_blank"> {{ puntaje.punto }} </a>
			<br>
			Valoraciones: {{ puntaje.num_evaluaciones }} &nbsp;&nbsp <small>{{ puntaje.porcentaje|floatformat:"0" }}% <i class="glyphicon glyphicon-ok-circle" style="color: #A1E1A9"></i> </small>
			<br>
			Promedio:
			<div class="progress">
			    <div class="progress-bar" role="progressbar" aria-valuenow="70"
				 aria-valuemin="0" aria-valuemax="100" style="width:{{ puntaje.porcentaje }}%">{{ puntaje.promedio|floatformat:"0" }} / 5
			    </div>
			</div>
			<hr>
		    {% endif %}
		{% endfor %}
	    </div>
	</div>

	<h3 id="d4" style="color:#FDD">.</h3>
	<h3>DIMENSIÓN 4</h3>
	<div class="row">
	    <div class="col-md-3">
		{% for puntaje in puntajes_d4 %}
		    {% if forloop.counter0 >= 0  and forloop.counter0 < 13 %}
			<b>punto</b>: <a class="btn" href="/encuesta_d4/#{{ puntaje.punto }}" target="_blank"> {{ puntaje.punto }} </a>
			<br>
			Valoraciones: {{ puntaje.num_evaluaciones }} &nbsp;&nbsp <small>{{ puntaje.porcentaje|floatformat:"0" }}% <i class="glyphicon glyphicon-ok-circle" style="color: #A1E1A9"></i> </small>
			<br>
			Promedio:
			<div class="progress">
			    <div class="progress-bar" role="progressbar" aria-valuenow="70"
				 aria-valuemin="0" aria-valuemax="100" style="width:{{ puntaje.porcentaje }}%">{{ puntaje.promedio|floatformat:"0" }} / 5
			    </div>
			</div>
			<hr>
		    {% endif %}
		{% endfor %}
	    </div>
	    <div class="col-md-3">
		{% for puntaje in puntajes_d4 %}
		    {% if forloop.counter0 >= 13  and forloop.counter0 < 25 %}
			<b>punto</b>: <a class="btn" href="/encuesta_d4/#{{ puntaje.punto }}" target="_blank"> {{ puntaje.punto }} </a>
			<br>
			Valoraciones: {{ puntaje.num_evaluaciones }} &nbsp;&nbsp <small>{{ puntaje.porcentaje|floatformat:"0" }}% <i class="glyphicon glyphicon-ok-circle" style="color: #A1E1A9"></i> </small>
			<br>
			Promedio:
			<div class="progress">
			    <div class="progress-bar" role="progressbar" aria-valuenow="70"
				 aria-valuemin="0" aria-valuemax="100" style="width:{{ puntaje.porcentaje }}%">{{ puntaje.promedio|floatformat:"0" }} / 5
			    </div>
			</div>
			<hr>
		    {% endif %}
		{% endfor %}
	    </div>
	    <div class="col-md-3">
		{% for puntaje in puntajes_d4 %}
		    {% if forloop.counter0 >= 25  and forloop.counter0 < 37 %}
			<b>punto</b>: <a class="btn" href="/encuesta_d4/#{{ puntaje.punto }}" target="_blank"> {{ puntaje.punto }} </a>
			<br>
			Valoraciones: {{ puntaje.num_evaluaciones }} &nbsp;&nbsp <small>{{ puntaje.porcentaje|floatformat:"0" }}% <i class="glyphicon glyphicon-ok-circle" style="color: #A1E1A9"></i> </small>
			<br>
			Promedio:
			<div class="progress">
			    <div class="progress-bar" role="progressbar" aria-valuenow="70"
				 aria-valuemin="0" aria-valuemax="100" style="width:{{ puntaje.porcentaje }}%">{{ puntaje.promedio|floatformat:"0" }} / 5
			    </div>
			</div>
			<hr>
		    {% endif %}
		{% endfor %}
	    </div>
	    <div class="col-md-3">
		{% for puntaje in puntajes_d4 %}
		    {% if forloop.counter0 >= 37  %}
			<b>punto</b>: <a class="btn" href="/encuesta_d4/#{{ puntaje.punto }}" target="_blank"> {{ puntaje.punto }} </a>
			<br>
			Valoraciones: {{ puntaje.num_evaluaciones }} &nbsp;&nbsp <small>{{ puntaje.porcentaje|floatformat:"0" }}% <i class="glyphicon glyphicon-ok-circle" style="color: #A1E1A9"></i> </small>
			<br>
			Promedio:
			<div class="progress">
			    <div class="progress-bar" role="progressbar" aria-valuenow="70"
				 aria-valuemin="0" aria-valuemax="100" style="width:{{ puntaje.porcentaje }}%">{{ puntaje.promedio|floatformat:"0" }} / 5
			    </div>
			</div>
			<hr>
		    {% endif %}
		{% endfor %}
	    </div>
	</div>
	
	<!-- 
	     <hr><hr><hr>
	     <div class="row">
	     <div class="col-md-3">
	     <h3 id="d2">DIMENSIÓN 2</h3>
	     {% for puntaje in puntajes_d2 %}
	     punto: <a href="/encuesta_d2/#{{ puntaje.punto }}" target="_blank">  {{ puntaje.punto }} </a>
	     <br>
	     Valoraciones: {{ puntaje.num_evaluaciones }}
	     <br>
	     Promedio:
	     <div class="progress">
	     <div class="progress-bar" role="progressbar" aria-valuenow="70"
	     aria-valuemin="0" aria-valuemax="100" style="width:{{ puntaje.porcentaje }}%">{{ puntaje.promedio|floatformat:"0" }} / 5
	     </div>
	     </div>
	     <hr>
	     {% endfor %}
	     </div>

	     <div class="col-md-3">
	     <h3 id="d3">DIMENSIÓN 3</h3>
	     {% for puntaje in puntajes_d3 %}
	     punto: <a href="/encuesta_d3/#{{ puntaje.punto }}" target="_blank">  {{ puntaje.punto }} </a>
	     <br>
	     Valoraciones: {{ puntaje.num_evaluaciones }}
	     <br>
	     Promedio:
	     <div class="progress">
	     <div class="progress-bar" role="progressbar" aria-valuenow="70"
	     aria-valuemin="0" aria-valuemax="100" style="width:{{ puntaje.porcentaje }}%">{{ puntaje.promedio|floatformat:"0" }} / 5
	     </div>
	     </div>
	     <hr>
	     {% endfor %}
	     </div>

	     
	     <div class="col-md-3">
	     <h3 id="d4">DIMENSIÓN 4</h3>
	     {% for puntaje in puntajes_d4 %}
	     punto: <a href="/encuesta_d4/#{{ puntaje.punto }}" target="_blank">  {{ puntaje.punto }} </a>
	     <br>
	     Valoraciones: {{ puntaje.num_evaluaciones }}
	     <br>
	     Promedio:
	     <div class="progress">
	     <div class="progress-bar" role="progressbar" aria-valuenow="70"
	     aria-valuemin="0" aria-valuemax="100" style="width:{{ puntaje.porcentaje }}%">{{ puntaje.promedio|floatformat:"0" }} / 5
	     </div>
	     </div>
	     <hr>
	     {% endfor %}
	     </div>

	     </div> -->
	
    {% else %}
	<div class="panel panel-warning" id="empezar">
	    <div class="panel-heading">
			Para continuar, se requiere que <a class="btn btn-warning" href="/accounts/login">INGRESE CON SU CUENTA</a>
	    </div>
	</div>

    {% endif %}
    
</div>

{% endblock %}
