{% extends "layout.html" %}
        {% block title %}
         Global Stats
        {% endblock %}
        {% block content %}

<h3 class="display-4 m-0 text-center">Global</h3>

<!--Start Here-->
<div class="container">
<div class="row">
<div class="col">
<div class="table-responsive">    
 <table class="table table-sm text-md-center text-lg-center"> 
    <tbody>
     <tr class="bg-light p-0">
        
        <th>Confirmed</th>
        <th>Active</th>
        <th>Recovered</th>
        <th>Deceased</th>
      </tr>
      <tr class="text-center">
       <td class="bg-warning" id ="value2">
            <b>{{globalData['TotalConfirmed'] | comafy  }} </b>
        </td>

        <td class="bg-primary">
             <b>{{ (globalData['TotalConfirmed'] - globalData['TotalDeaths'] - globalData['TotalRecovered']) | comafy }}</b>
        </td>
       
        <td class="bg-success">
            <b>    {{globalData['TotalRecovered'] | comafy  }} </b>
        </td>
        <td class="bg-danger">
            <b>  {{globalData['TotalDeaths'] | comafy  }} </b>
        </td>
      </tr>
      </tbody>
  </table>
 </div>
  </div>
</div>
</div>
<!--End Here-->


<table class="table table-striped table-sm text-md-center text-lg-center display" id="myTable">
  <thead class="thead-light">
    <tr>
      <th scope="col">Country</th>
      <th scope="col">Confirmed</th>
      <th scope="col">Active</th>
      <th scope="col">Recovered</th>
      <th scope="col">Deceased</th>
      
    </tr>
  </thead>
  <tbody>
  {% for country in countrydatalist | sort(attribute='TotalActive',reverse=true) %}
      <tr>
      <th scope="row" class="text-left"><span class="flag-icon flag-icon-{{country['CountryCode'] | lower}}"></span>    {{country['Country']}}</th>
      
      <td class="text-secondary">{{country['TotalConfirmed'] | comafy }}</td>
      <td>{{(country['TotalActive']) | comafy }}</td>
      <td class="text-success">{{country['TotalRecovered'] | comafy }}</td>
      <td class="text-danger">{{country['TotalDeaths'] | comafy }}</td>
      
      </tr>
     {% endfor %}

   </tbody>
 </table>
  
	  <div class="alert alert-primary align-center" role="alert">
		  <small><strong> Note:  </strong>Recovered data is subject to further verification.</small>
		</div>

<script  src="{{ url_for('static', filename='js/tablescript.js')}}" > </script>
         {% endblock %}