<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Analysis Information Leak framework Dashboard</title>

  <!-- Core CSS -->
  <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='font-awesome/css/font-awesome.css') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='css/sb-admin-2.css') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='css/dataTables.bootstrap.css') }}" rel="stylesheet" type="text/css" />
  <link href="{{ url_for('static', filename='css/jquery-ui.min.css') }}" rel="stylesheet" type="text/css" />
  <script language="javascript" src="{{ url_for('static', filename='js/jquery.js')}}"></script>
  <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/dataTables.bootstrap.js') }}"></script>
  <script src="{{ url_for('static', filename='js/jquery-ui.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/jquery.flot.js') }}"></script>
  <script src="{{ url_for('static', filename='js/jquery.flot.time.js') }}"></script>
  <script src="{{ url_for('static', filename='js/jquery.flot.stack.js') }}"></script>

  <style>
      .sparkLineStats ul {
          padding-left:0;
          list-style:none
      }
  </style>
</head>
<body>

   {% include 'navbar.html' %}

<div id="page-wrapper">
  <div class="row">
      <div class="col-lg-12">
          <h1 class="page-header" data-page="page-sentiment" >Sentiment analysis: Plot tool</h1>
      </div>
      <!-- /.col-lg-12 -->
  </div>
    <!-- /.row -->
    <div class="row">

    <!-- Panel OPTIONS -->
    <div class="row">
        <div class="col-lg-12">
            <div class="row">
                <div class="col-lg-12">
                    <div id="panel-today" class="panel panel-default">
                        <div class="panel-heading">
                            <strong>Select options</strong>
                        </div>
                        <div class="panel-body">
                            <div class="row">
                            <!-- left column -->
                            <div class="col-lg-9">
                                <!-- providers charts -->
                                <div class="col-lg-6">
                                   <div class="sparkLineStats">
                                       <ul id="providerList1">
                                       </ul>
                                   </div>
                                </div>
                                <div class="col-lg-6">
                                   <div class="sparkLineStats">
                                       <ul id="providerList2">
                                       </ul>
                                   </div>
                                </div> 
                            </div>
                            <!-- right column -->
                            <div class="col-lg-3">
                                 <div aria-disabled="false" class="slider sliderRange sliderBlue ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="margin-bottom: 5px;"></div>
                                 <strong>Date:</strong> <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
                            </div>
                            </div>
                            <!-- /.row -->
                            <div class="row">
                                <button id="plot_btn" class="btn btn-info" style="margin-right: 8px; margin-left: 8px;float: right;">Plot!</button>
                                <label style="float: right;"><input id="checkbox_stacked" type="checkbox" checked=true> Stacked graph?</label>
                            </div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.panel -->
        </div>
    </div>
    
    <!-- Panel PLOT -->
    <div class="row">
        <div class="col-lg-12">
            <div class="row">
                <div class="col-lg-12">
                    <div id="panel-today" class="panel panel-default">
                        <div class="panel-heading">
                            <strong>Graph</strong>
                        </div>
                        <div class="panel-body">
                            <div id="graph" style="height: 300px;"></div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.panel -->
        </div>
    </div>


    <!-- /.row -->
    </div>
<!-- /#page-wrapper -->
</div>


<!-- import graph function -->
<script>
    $(document).ready(function(){
        activePage = $('h1.page-header').attr('data-page');
        $("#"+activePage).addClass("active");
   });
</script>
<script src="{{ url_for('static', filename='js/sentiment_plot.js') }}"></script>

</body>
</html>
