{% extends "pages/menu.html" %}
{% load staticfiles %}

{% block css %}
<link rel="stylesheet" type="text/css" href="{% static "lib/d3/dc.css"%}"/>
<link rel="stylesheet" type="text/css" href="{% static "lib/jquery/dynatable/jquery.dynatable.css"%}"/>

<link rel="stylesheet" type="text/css" href="{% static "lib/gargantext/tables.css"%}"/>
<link rel="stylesheet" type="text/css" href="{% static "lib/gargantext/charts.css"%}"/>

<script type="text/javascript" src="{% static "lib/d3/d3.js"%}"></script>
<script type="text/javascript" src="{% static "lib/d3/crossfilter.js"%}"></script>
<script type="text/javascript" src="{% static "lib/d3/dc.js"%}"></script>

{% endblock %}


{% block content %}

<div class="container">
    <div class="col-md-3 col-md-offset-2">
        <div id="monthly-move-chart">
            <center>
                   Select a time range in the chart with blue bars to zoom in
                <p align="center">
                <!--<a class="btn btn-xs btn-default" role="button" href="/chart/corpus/{{ corpus.id }}/data.csv">Save</a>-->
                <a class="btn btn-xs btn-default" href="javascript:volumeChart.filterAll();dc.redrawAll();">Reset</a></p>

                <div class="clearfix"></div>
            </center>
        </div>

        <div class="bs-callout">
            <div class="row">
                <div id="monthly-volume-chart"></div>
            </div>

            <div id="content_loader">
                  <br>
                  <center>
                    <img width="10%" src="{% static "img/ajax-loader.gif"%}"></img>
                  </center>
                  <br>
            </div>
        </div>
    </div>
</div>



<input type="hidden" id="list_id" value="{{ list_id }}"></input>

<div class="container">
    <div class="jumbotron">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    Publications by title
                </h4>
                <!-- search box with custom function in Docs_dyna_chart_and_tables.js -->
                <div class="pull-left" style="margin-top:1.85em; font-size: 16px;">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    Search:
                    <input type="search" id="doubleSearch"/>
                    <span style="font-size:70%;">
                    <span class="glyphicon glyphicon-filter" aria-hidden="true"></span>
                      <!-- Used by the #doubleSearch associated function -->
                      <input title="Search in Titles" id="searchTI" name="searchTI" type="checkbox" checked onclick="return false">TI&nbsp;
                    <span class="glyphicon glyphicon-filter" aria-hidden="true"></span>
                      <input title="Search in Abstracts" id="searchAB" name="searchAB" type="checkbox">AB
                    </span>&nbsp;&nbsp;
                    <span class="glyphicon glyphicon-filter" aria-hidden="true"></span>
                    <select id="docFilter" name="docFilter">
                        <option value="filter_all">All</option>
                        <option value="filter_favs">Favorite documents</option>
                        <option value="filter_dupl">Duplicates by title</option>
                    </select>
                </div>
            </div>
            <div class="panel-body">
                <div id="div-table"></div>
                <p align="right">
                    <button id="move2trash" class="btn btn-primary btn-lg" >
                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                        Trash It!
                    </button>
                </p>
            </div>
        </div>
    </div>
<!--</div> This div is closed in the menu !-->

<!-- here goes import script js/bootstrap/bootstrap-multiselect.js, mais ca marche pas-->
<script type="text/javascript" src="{% static "lib/jquery/dynatable/jquery.dynatable.js" %}"></script>

<!-- custom-lib for dynatable.js and dc.js -->
<script type="text/javascript" src="{% static "lib/gargantext/Docs_dyna_chart_and_table.js" %}"></script>

{% endblock %}