{% extends "base_index.html" %}

{% block dash-title %}

		<b>{{form.text.value|default:"Tablero"|capfirst}}</b>
		[{{form.startDate.value}}, {{form.endDate.value}}]

{% endblock %}

{% block dropdown-messages %}
<li>
    <a href="#">
        <div>
            <strong>John Smith</strong>
            <span class="pull-right text-muted">
                <em>Yesterday</em>
            </span>
        </div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
    </a>
</li>
<li class="divider"></li>
{% endblock %}

{% block dropdown-tasks %}
<li>
    <a href="#">
        <div>
            <p>
                <strong>Task 1</strong>
                <span class="pull-right text-muted">40% Complete</span>
            </p>
            <div class="progress progress-striped active">
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                    <span class="sr-only">40% Complete (success)</span>
                </div>
            </div>
        </div>
    </a>
</li>|date:"M d, Y"
<li class="divider"></li>

{% endblock %}

{% block dropdown-alerts %}
<li>
    <a href="#">
        <div>
            <i class="fa fa-comment fa-fw"></i> New Comment
            <span class="pull-right text-muted small">4 minutes ago</span>
        </div>
    </a>
</li>
<li class="divider"></li>
{% endblock %}


{% block infoPanels %}
{% load humanize %}


                <div class="col-lg-3 col-md-6">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-3">
                                    <i class="fa fa-database fa-5x"></i>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <div class="huge">{{info.nNewsText}}</div>
                                    <div>Noticias</div>
                                </div>
                            </div>
                        </div>
                        <a href="{% url 'news-list'%}?{{ request.GET.urlencode }}">
                            <div class="panel-footer">
                                <span class="pull-left">Ver Noticias</span>
                                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                <div class="clearfix"></div>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6">
                    <div class="panel panel-yellow">
                        <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">{{info.nPublishers}}</div>
                                    <div>Fuentes Escritas</div>
                                </div>
                            </div>
                        </div>
                        <a href="{% url 'publishers-list'%}?{{ request.GET.urlencode }}">
                            <div class="panel-footer">
                                <span class="pull-left">Ver lista</span>
                                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                <div class="clearfix"></div>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6">
                    <div class="panel panel-green">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-3">
                                    <i class="fa fa-comment-o fa-5x"></i>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <div class="huge">{{info.nTopics}}</div>
                                    <div>Temas</div>
                                </div>
                            </div>
                        </div>
                        <a href="{% url 'publishers-list'%}?{{ request.GET.urlencode }}">
                            <div class="panel-footer">
                                <span class="pull-left">Ver lista</span>
                                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                <div class="clearfix"></div>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6">
                    <div class="panel panel-red">
                        <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">{{info.nAudio}}</div>
                                    <div>Fuentes de Audio</div>
                                </div>
                            </div>
                        </div>
                        <a href="{% url 'audio'%}">
                            <div class="panel-footer">
                                <span class="pull-left">Ver lista</span>
                                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                <div class="clearfix"></div>
                            </div>
                        </a>
                    </div>
                </div>



{% endblock %}

{% block graphs1 %}
<div class="col-lg-8">
	<div class="panel panel-default">
		<div class="panel-heading">
		    <i class="fa fa-bar-chart-o fa-fw"></i> Historico
<!--		    <div class="pull-right">-->
<!--			<div class="btn-group">-->
<!--			    <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">-->
<!--				Actions-->
<!--				<span class="caret"></span>-->
<!--			    </button>-->
<!--			    <ul class="dropdown-menu pull-right" role="menu">-->
<!--				<li><a href="#">Action</a></li>-->

<!--			    </ul>-->
<!--			</div>-->
<!--		    </div>-->
		</div>
		<!-- /.panel-heading -->
		<div class="panel-body">
		    <div id="frecuency-chart-1"></div>
		</div>
		<!-- /.panel-body -->
	</div>
	<!-- /.panel -->                        
</div>
<div class="col-lg-4">

    <div class="panel panel-default">
        <div class="panel-heading">
            <i class="fa fa-bar-chart-o fa-fw"></i> Noticias por Medio
        </div>
        <div class="panel-body">
            <div id="morris-donut-chart"></div>
<!--            <a href="#" class="btn btn-default btn-block">View Details</a>-->
        </div>
        <!-- /.panel-body -->
    </div>
</div>
<!-- /.col-lg-4 -->
{% endblock %}
{% block scripts %}
<script>
$(function() {

    Morris.Area({
        element: 'frecuency-chart-1',
        data: [
		{% for hh in histogram %}
		{
			date:"{{hh.date}}",
	                {% for key,value in hh.data.items %}
				{{key}}:{{value}},
			{% endfor %}
		}{% if not forloop.last %},{% endif %}
		{% endfor %}
		],
			xkey: 'date',
			ykeys: [{% for l in histogramsLabels %}"{{l|safe}}",{% endfor %}],
			labels: [{% for l in histogramsLabels %}"{{l|safe}}",{% endfor %}],
			pointSize: 2,
			hideHover: 'auto',
			resize: true,
			fillOpacity: 0.5
		    }).on('click', function(i, row, label){
						endDate = new Date(row.date);
						endDate = (endDate.add(1).month()).toString('yyyy-MM-dd');
						var urlParams = new URLSearchParams(window.location.search);
						urlParams.set('startDate', row.date);
						urlParams.set('endDate', endDate);
						console.log(urlParams.get('startDate'));
						document.location.href = "{% url 'publishers-list'%}?"+urlParams.toString();



						});

		    Morris.Donut({
			element: 'morris-donut-chart',
			data: [
			{% for d in donutChart %}
				{
					label: "{{d.label}}",
					url: "{{d.url}}",
			    		value: "{{d.value}}"
				},
			{% endfor %}
			],
			resize: true
		    }).on('click', function(i, row){
					console.log(1,row);
					document.location.href = "{% url 'news-list'%}?"+row.url;
						});

		    
		});
</script>

{% endblock %}