{% extends "base_generic_top.html" %}
{% load static %}


{% block headMedia %}
	<link rel="stylesheet" href="{% static 'css/login.css'%}" type="text/css">
	<script type="text/javascript" src="{% static 'js/data.js' %}" ></script>
{% endblock %}



{% block budy %}
	<div class="visible-lg-block visible-md-block">
		<video  id="bgvid" playsinline autoplay muted loop poster="{% static 'images/poster.jpg'%}" >
			<!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button  -->
			<source src="{% static 'images/background.mp4'%}" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
			<source src="{% static 'images/background.ogv'%}"  type='video/ogg; codecs="theora, vorbis"' />
			<source src="{% static 'images/background.webm'%}" type='video/webm; codecs="vp8, vorbis"' />

		</video>
	</div>

<div class="container">
	<div class="row" style="margin-top:15%;">
		<div class="col-md-4 col-md-offset-4" style="text-align:center;">
		</div>
	</div>
<div class="row translucid visible-lg-block visible-md-block">
	<div class="col-md-4">
		<div class="panel panel-red">
		        <div class="panel-heading">
		                <div class="row">
		                        <div class="col-xs-3">
		                                <i class="fa fa-rss fa-5x"></i>
		                        </div>
		                        <div class="col-xs-9 text-right">
		                                <div class="huge" id="textMedia"></div>
		                                <div>Medios Impresos</div>
		                        </div>
		                 </div>
		        </div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="panel panel-yellow">
		        <div class="panel-heading">
		                <div class="row">
		                        <div class="col-xs-3">
		                                <i class="fa fa-microphone fa-5x"></i>
		                        </div>
		                        <div class="col-xs-9 text-right">
		                                <div class="huge" id="audioMedia"></div>
		                                <div>Estaciones de Radio</div>
		                        </div>
		                 </div>
		        </div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="panel panel-primary">
		        <div class="panel-heading">
		                <div class="row">
		                        <div class="col-xs-3">
		                                <i class="fa fa-volume-up fa-5x"></i>
		                        </div>
		                        <div class="col-xs-9 text-right">
		                                <div class="huge" id="audioTime"></div>
		                                <div>Horas de Audio</div>
		                        </div>
		                 </div>
		        </div>
		</div>
	</div>
</div>
        <div class="row">
                <div class="col-md-4 translucid visible-lg-block visible-md-block">

		<div class="row">
                <div class="col-md-12">
			<div class="panel panel-yellow">
				<div class="panel-heading">
	    				<div class="row">
						<div class="col-xs-3">
		    					<i class="fa fa-file-text fa-5x"></i>
						</div>
		                                <div class="col-xs-9 text-right">
                	                                <div class="huge" id="documents"></div>
                                                	<div>Noticias</div>
                                        	</div>
					</div>
				</div>
			
			</div>
		</div>
		</div>
               <div class="row">
                <div class="col-md-12">
                        <div class="panel panel-primary">
                                <div class="panel-heading">
                                        <div class="row">
                                                <div class="col-xs-3">
                                                        <i class="fa fa-search fa-5x"></i>
                                                </div>
                                                <div class="col-xs-9 text-right">
                                                        <div class="huge" id="searches"></div>
                                                	<div>Busquedas</div>
                                        	</div>

                                         </div>
                                </div>

                        </div>
                </div>
                </div>


                </div>

		<div class="col-md-4">
		{% block content %}
		<div class="panel panel-green">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-3">
                                    <i class="fa fa-sign-in fa-5x"></i>
                                </div>
                                <div class="col-xs-9 text-right">
                                {% if form.errors %}
                                        <p>Your username and password didn't match. Please try again.</p>
                                {% endif %}

                                {% if next %}
                                    {% if user.is_authenticated %}
                                        <p>Your account doesn't have access to this page. To proceed, please login with an account that has access.</p>
                                    {% else %}
                                        <p>Favor de firmarse para tener acceso.</p>
                                    {% endif %}
                                {% endif %}

                                <form role="form" method="post" action="{% url 'login' %}">
                                {% csrf_token %}

                                <div class="form-group">
                                  <input class="form-control" placeholder="nombre de usuario" name="{{ form.username.name }}" type="{{ form.username.class.name}}" id="{{ form.username.auto_id }}" autofocus>
                                </div>
                                <div class="form-group">
                                  <input class="form-control" placeholder="contraseña" name="{{ form.password.name }}" type="password" id="{{ form.password.auto_id }}" autofocus>
                                </div>

                                <div class="form-group">
                                  <input type="submit" value="Ingresar" class="btn btn-lg btn-success btn-block" />
                                  <input type="hidden" name="next" value="{{ next }}" />
                                </div>
                                </form>

                                </div>
                            </div>	
                        </div>
                        <a href="{% url 'password_reset' %}">
                            <div class="panel-footer">
                                <span class="pull-left">Lost password?</span>
                                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                <div class="clearfix"></div>
                            </div>
                        </a>
                    </div>

		{% endblock %}
		</div>
		
                <div class="col-md-4 translucid visible-lg-block visible-md-block">
                        <div class="row">
		                <div class="col-md-12">
                		        <div class="panel panel-red">
                                		<div class="panel-heading">
                                       			<div class="row">
                                                		<div class="col-xs-3">
                                                        		<i class="fa fa-comments fa-5x"></i>
                                                		</div>
                                                		<div class="col-xs-9 text-right">
                                                        		<div class="huge">111</div>
                                                			<div>Temas</div>
                                        			</div>

                              			       </div>
                               			 </div>
                        		</div>
                		</div>
                	</div>
  			<div class="row">
		                <div class="col-md-12">
                		        <div class="panel panel-yellow">
                                		<div class="panel-heading">
                                       			<div class="row">
                                                		<div class="col-xs-3">
                	                                        	<i class="fa fa-user fa-5x"></i>
                        	                        	</div>
                                	                	<div class="col-xs-9 text-right">
                                        	                	<div class="huge" id="users"></div>
                                                			<div>Usuarios</div>
                                        			</div>
                                      		   	</div>
                                		</div>
	                        	</div>
        	        	</div>
                	</div>
                </div>

	</div>
</div>




<div class="row geointInfo" >	

        <div class="col-md-4">

		
        </div>

        <div class="col-md-4 visible-lg-block visible-md-block">
                <img src="{% static 'images/conacytLogo_white.png'%}"/>
		<img src="{% static 'images/geologo_white.png'%}"/>
                <img src="{% static 'images/geointLogo_white.png'%}"/>

	</div>
	<div class="col-md-4">
		<a href="http://www.centrogeo.org.mx/">© 2018 Centro de Investigación en Ciencias de Información Geoespacial</a>
	</div>

</div>


{% endblock %}
{% block scripts %}

	<script>
		var vid = document.getElementById("bgvid");


		if (window.matchMedia('(prefers-reduced-motion)').matches)
		{
		    vid.removeAttribute("autoplay");
		    vid.pause();
		    pauseButton.innerHTML = "Paused";
		}

		function vidFade()
		{
		  vid.classList.add("stopfade");
		}

		vid.addEventListener('ended', function()
		{	document.getElementById("audioMedia").innerHTML=m3Data.audio;
			// only functional if "loop" is removed 
			vid.pause();
			// to capture IE10
			vidFade();
		}); 

	document.getElementById("textMedia").innerHTML=m3Data.text;
	document.getElementById("audioMedia").innerHTML=m3Data.audio;
	audioTime = Math.ceil(m3Data.audioTime/60).toString();
	document.getElementById("audioTime").innerHTML=new Intl.NumberFormat('es-MX').format(audioTime);
	documents = m3Data.documents;
	document.getElementById("documents").innerHTML=new Intl.NumberFormat('es-MX').format(documents);
	document.getElementById("searches").innerHTML=m3Data.searches;
	document.getElementById("users").innerHTML=m3Data.users;
	</script>
{% endblock %}