{% 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 %}