{% extends "base.html" %}
<!DOCTYPE html>
<html>
   <head>
    {% block head %}
      <title>CanDIG Dashboard</title>
      {{ super() }}
    {% endblock %}
   </head>
   <!-- A grey horizontal navbar that becomes vertical on small screens -->
   {% block nav %}
     {{ super() }}
   {% endblock %}

   {% block content %}
      <div id="candig" class="container-fluid" style="padding-top: 50px">
          <div class="row" style="margin-bottom:50px">
              <div class="col-sm-3">
                  <div class="card">
                      <div class="card-body">
                          <div id="queryStatus" style="max-width: 100%; height: 200px; auto;">
                              <div class="loader_bar"></div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="col-sm-3">
                  <div class="card">
                      <div class="card-body">
                          <div id="responseToTreatment" style="max-width: 100%; height: 200px; auto;">
                              <div class="loader_bar"></div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="col-sm-3">
                  <div class="card">
                      <div class="card-body">
                          <div id="hospitals" style="max-width: 100%; height: 200px; auto;">
                              <div class="loader_bar"></div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="col-sm-3">
                  <div class="card">
                      <div class="card-body">
                          <div id="therapeuticToResponses" style="max-width: 100%; height: 200px; auto;">
                              <div class="loader_bar"></div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="row" style="margin-top:50px; margin-bottom:50px">
              <div class="col-sm-6">
                  <div class="card" style="height: 30rem">
                      <div id="timelineSamples">
                          <div class="loader_bar"></div>
                      </div>
                  </div>
              </div>
              <div class="col-sm-6">
                  <div class="card" style="height: 30rem">
                      <div id="cancerTypes" style="min-width: 310px; height: 400px; auto;">
                          <div class="loader_bar"></div>
                      </div>
                  </div>
              </div>
              <div class="col-sm-12">
                  <div class="card" style="height: 30rem; margin-top: 50px">
                      <div id="drugScatter" style="min-width: 310px; height: 800px; auto;">
                          <div class="loader_bar"></div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
   {% endblock %}

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