{% extends "base.html" %}
<!DOCTYPE html>
<html>
   <head>
      {% block head %}
      <title>Patients Overview</title>
      {{ super() }}
      <link rel=stylesheet type=text/css href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
   </head>
   {% endblock %}
   {% block nav %}
     {{ super() }}
   {% endblock %}

   {% block content %}
         <div class="container-fluid">
            <div class="row" style="margin-top:50px; margin-bottom:50px">
               <div class="col-sm-3">
                  <div class="card">
                     <div id="genderGraph" style="max-width: 100%; height: 250px; auto;"></div>
                  </div>
                  <div class="card">
                     <div id="provinceGraph" style="max-width: 100%; height: 250px; auto;"></div>
                  </div>
                  <div class="card">
                     <div id="raceGraph" style="max-width: 100%; height: 250px; auto;"></div>
                  </div>
               </div>
               <div class="col-sm-9">
                  <div style="overflow-x: scroll"><table id="patients_table" class="table table-striped table-bordered nowrap hover"></table></div>
                  <div style="overflow-x: scroll"><table id="mergedTreatmentsDiagnosesTable" class="table table-striped table-bordered nowrap"></table></div>
               </div>
            </div>
         </div>
    {% endblock %}

    {% block footer %}
      {{ super() }}
      <script src="https://www.distributedgenomics.ca/static/jquery.dataTables.min.js"></script>
      <script src="{{prepend_path}}/static/dist/patients_overview.js"></script>
    {% endblock %}
</html>