{% extends "layout.html" %}
        {% block title %}
        {{State}} Covid-19 Stats
        {% endblock %}
        {% block content %}

      <div class="dropdown text-center">
			<p class="text-center pt-0 mb-0"><small class="text-muted">Currently in:</small></p>
			<a class="mb-0 p-0 dropdown-btn text-primary" data-toggle='dropdown'><i class="material-icons">expand_more</i></a>
			<div class="dropdown-menu scrollable-menu dd-h">
				<a class="dropdown-item" href="?state=Tamil Nadu">Tamil Nadu</a>
				<div class="dropdown-divider"></div>
			    {% for drop_state in Statelist %}
			    <a class="dropdown-item" href="?state={{ drop_state }}">{{ drop_state }}</a>
			    {% endfor %}
			</div>
		</div>
 			
  		<!-- current country -->
 <!--{% set totalactive = [0] -%}
   {% set totalconfirmed = [0] -%}
  {% set totaldeceased = [0] -%}
  {% set totalrecovered = [0] -%} -->
<h2 class="display-5 text-center">{{State}}</h2>

 <!--   <div class="row h-2">
   <div class="col-sm-12 my-auto">
     <div class="card mb-2">Active {{totalstats['active']}} || Confirmed {{totalstats['confirmed']}} ||
     Deceased {{totalstats['deceased']}}  || Recovered {{totalstats['recovered']}}</div>
     </div>
</div> -->

<div class="d-flex justify-content-center mb-2">



    <!-- <p><small><i class="material-icons">arrow_upward</i>{{totalstats['deltaconfirmed']}}</small></p> -->
    <div class="col-3" style="padding-left: 8px;padding-right: 8px;">
      <div class="card card-block border-warning">
      <h6 class="card-header p-0 text-center" style="font-size: 13px;">Confirm</h6>
<!-- {% if totalstats['deltaconfirmed'] > 0 %}
      <div class="card-text text-center"><small>[ +{{totalstats['deltaconfirmed']}}] </small> <b>  {{totalstats['confirmed']}} </b> </div>
{% else %}
     <div class="card-text text-center"> <b>    {{totalstats['confirmed']}} </b></div>
{% endif %} -->
<div class="card-text text-center applefixcss"> <b>    {{totalstats['confirmed']| comafy }}  </b></div>
<div class="card-footer bg-warning"></div>
      
      </div>
   </div>


   <div class="col-3" style="padding-left: 8px;padding-right: 8px;">
      <div class="card border-primary">
      <h6 class="card-header p-0 text-center" style="font-size: 13px;">Active</h6>
    <div class="card-text text-center applefixcss"> <b>  {{totalstats['active'] | comafy }}</b> </div>
    <div class="card-footer bg-primary"></div>
   </div>
   </div>

       <div class="col-3" style="padding-left: 8px;padding-right: 8px;">
      <div class="card card-block border-success">
      <h6 class="card-header p-0 text-center" style="font-size: 13px;">Cured</h6>
  <!--     {% if totalstats['deltarecovered'] > 0 %}
        <div class="card-text text-center"><small> [+{{totalstats['deltarecovered']}}] </small>
    <b> {{totalstats['recovered']}} </b> </div>
       {% else %}
     <div class="card-text text-center"> <b>    {{totalstats['recovered']}} </b></div>
{% endif %} -->
        <div class="card-text text-center applefixcss"> <b>    {{totalstats['recovered'] | comafy}}  </b></div>
        <div class="card-footer bg-success"></div>

      </div>
   </div>


    <div class="col-3" style="padding-left: 8px;padding-right: 8px;">
      <div class="card card-block border-danger">
      <h6 class="card-header p-0 text-center" style="font-size: 13px;">Deaths</h6>
  <!--    {% if totalstats['deltadeceased'] > 0 %}
        <div class="card-text text-center"><small>[+{{totalstats['deltadeceased']}}]  </small>
    <b> {{totalstats['deceased']}} </b> </div>
      {% else %}
      <div class="card-text text-center"><b>    {{totalstats['deceased']}} </b></div>
      {% endif %} -->
      <div class="card-text text-center applefixcss"><b>    {{totalstats['deceased']| comafy}}  </b></div>
      <div class="card-footer bg-danger"></div>
      </div>
   </div>

</div>

{% if (totalstats['deltaconfirmed'] != 0 or totalstats['deltadeceased'] != 0 or totalstats['deltarecovered'] != 0) %}
  <div class="alert alert-success text-center">
  <i class="fa fa-ambulance d-inline" aria-hidden="true"></i>
<strong>New Cases:  </strong> There are 
  {% if totalstats['deltaconfirmed'] %}
  <b> {{totalstats['deltaconfirmed'] | comafy }} </b> confirmed, 
  {% endif %}
    {% if totalstats['deltadeceased'] == 1 %}
    <b>{{totalstats['deltadeceased'] }}</b> death,
    {% elif totalstats['deltadeceased'] > 1%}
     <b>{{totalstats['deltadeceased'] | comafy }}</b> deaths, 
  {% endif %}
  {% if totalstats['deltarecovered'] %}
    <b>{{totalstats['deltarecovered'] | comafy }}</b> recovered.
    {% endif %}
</div>
{% endif %}



<div class="container">
<div class="table-responsive">  
<table class="table table-striped table-sm text-md-center text-lg-center display" id="myTable">
  <thead class="thead-light">
    <tr>
      <th scope="col">District</th>
      <th scope="col">Confirm</th>
      <th scope="col">Active</th>
      <th scope="col">Cured</th>      
      <th scope="col">Deaths</th>
    </tr>
  </thead>
  <tbody>
  {% for District in Statedata %}
  {% set Dataval = District %}
      <tr>
      <th scope="row" class="text-left text-lg-justify">{{District}}</th>
      <td class="text-secondary">{{Statedata[District]['confirmed'] | comafy  }}</td>
      <td>{{Statedata[District]['active'] | comafy }}</td>
      <td class="text-success">{{Statedata[District]['recovered'] | comafy  }}</td>
      <td class="text-danger">{{Statedata[District]['deceased'] | comafy  }}</td>
        <!-- {% if totalactive.append(totalactive.pop()+ Statedata[District]['active']) -%}{% endif %}
      {% if totalconfirmed.append(totalconfirmed.pop()+ Statedata[District]['confirmed']) -%}{% endif %}
      {% if totaldeceased.append(totaldeceased.pop()+ Statedata[District]['deceased']) -%}{% endif %}
      {% if totalrecovered.append(totalrecovered.pop()+ Statedata[District]['recovered']) -%}{% endif %} -->
      </tr>
     {% endfor %}
  <!-- <tr class="table-info">
   <th scope="row">Total Cases</th>
   <th scope="row">{{totalactive|join(' ')}}</th>
   <th scope="row">{{totalconfirmed|join(' ')}}</th>
   <th scope="row">{{totaldeceased|join(' ')}}</th>
   <th scope="row">{{totalrecovered|join(' ')}}</th>
  </tr> -->
   </tbody>
 </table>
</div>
</div>
		<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 %}