{% extends 'layouts/base.html' %}
{% load humanize %}


{% block title %} Home {% endblock title %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    {% include "includes/header.html" %}

    <div class="container-fluid mt--7 bg-secondary">
      <div class="row">
        <div class="col-xl-8 mb-5 mb-xl-0">  <!-- Global interactive Plotly Mabpox -->
          <div class="card shadow fade-in-bottom">
            <div class="card-body plotly worldmap">
              <div id="world_map" class="chart" style="height: 100%;"></div>
            </div>
            <div style="position: absolute; padding:1.25rem 1.5rem;">
                <h6 class="text-uppercase text-muted ls-1 mb-1">Global | Cumulative</h6>
                <h2 class="text-dark mb-0">Mapbox</h2>
            </div>
          </div>
        </div>
        <div class="col-xl-4">  <!-- Growth interactive scatterplot -->
          <div class="card bg-dark shadow fade-in-bottom">
            <div class="card-header bg-transparent">
              <div class="row align-items-center">
                <div class="col">
                  <h6 class="text-uppercase text-light ls-1 mb-1">Global | Cumulative</h6>
                  <h2 class="text-white mb-0">Growth</h2>
                </div>
                <div class="col text-right">
                  <a class="btn btn-sm btn-light" tabindex="0" role="button" data-toggle="popover" data-trigger="focus" title="Info"
                      data-content="Global cumulative growth in cases since collection of data started. Defaulted to logarithmic y-scale">
                      &nbsp;<i class="fas fa-info text-dark">&nbsp;</i>
                    </a>
                </div>
              </div>
            </div>
            <div class="card-body plotly">
              <div id="realtime_growth_chart" class="chart" style="height: 310px;"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="row mt-5">
        <div class="col-xl-8 mb-5 mb-xl-0">   <!-- Global daily growth plot -->
          <div class="card shadow">
            <div class="card-header bg-transparent">
              <div class="row align-items-center">
                <div class="col">
                  <h6 class="text-uppercase text-muted ls-1 mb-1">Global | Daily</h6>
                  <h2 class="mb-0">Daily Growth</h2>
                </div>
                <div class="col text-right">
                  <a class="btn btn-sm btn-white" tabindex="0" role="button" data-toggle="popover" data-trigger="focus" title="Info"
                      data-content="Daily time series of cases. Bars can be stacked for relative adjacent comparison by toggling 'confirmed' cases.">
                      &nbsp;<i class="fas fa-info">&nbsp;</i>
                    </a>
                </div>
              </div>
            </div>

            <div class="card-body plotly">
              <div id="daily_growth_chart" class="chart"style="height: 310px;"></div>
            </div>
          </div>
        </div>

        <div class="col-xl-4">
          <div class="card shadow">
            <div class="card-header bg-transparent">
              <div class="row align-items-center">
                <div class="col">
                  <h6 class="text-uppercase text-muted ls-1 mb-1">Global | Sortable</h6>
                  <h2 class="mb-0">Cases</h2>
                </div>
                <div class="col text-right">
                  <a href="#!" class="btn btn-sm btn-white">
                    &nbsp;<i class="fas fa-download">&nbsp;</i>
                  </a>
                </div>
              </div>
            </div>
            <div class="table-responsive">
              <!-- cases table -->
              <table id="cases_table" class="table align-items-center table-flush">
                <thead class="thead-light">
                  <tr>
                    <th scope="col">Country</th>
                    <th scope="col">Confirmed</th>
                    <th scope="col">Recovered</th>
                    <th scope="col">Deaths</th>
                    <th scope="col">Death Rate %</th>
                  </tr>
                </thead>
                <tbody id="cases_table_body"></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      {% include "includes/footer.html" %}

    </div>

{% endblock content %}

<!-- Specific JS goes HERE --> 
{% block javascripts %}
<script>
$('.nav-item a').removeClass('active');
$('.home-item a').addClass('active');
</script>

<!-- Sortable Tables -->
<script defer src="/static/assets/js/sorttable.js"></script>

<!-- Plotly.js CDN -->
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.54.6/plotly.min.js"></script>

<!-- Load and display data -->
<script defer src="/static/assets/js/fetch-data.js"></script>
{% endblock javascripts %}