{% extends "layout.html" %}
        {% block title %}
        {{State}} Covid-19 India
        {% endblock %}
        {% block content %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="{{ url_for('static', filename='js/india_chart.js') }}"></script>
<!--<div>
<img src="{{ url_for('static', filename='images/india-flag-button-round-icon-64.png')}}" class ="img-fluid" alt="India Flag"> 
</div> -->
<div class="row align-items-center justify-content-center mt-3">
<div class="flag-icon flag-icon-in"></div>
</div>
<h3 class="display-4 m-0 text-center">India</h3>
<!--Start Here-->
<div class="container">
<div class="row">
<div class="col">
<div class="table-responsive">    
 <table class="table table-sm text-center">
    <tbody>
     <tr class="bg-light pr-3">
        <th class="bg-warning">Confirmed</th>
        <th class="bg-primary">Active</th>
        <th class="bg-success">Recovered</th>
        <th class="bg-danger">Deceased</th>
        
      </tr>
      <tr class="">
        <td><b> {{statedatalist[0]['confirmed'] | comafy}} </b></td>
        <td><b>{{ statedatalist[0]['active'] | comafy}}<b></td>
        <td><b> {{statedatalist[0]['recovered'] | comafy }} </b></div></td>
        <td><b>{{statedatalist[0]['deaths'] | 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">State</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 state in statedatalist %}
    {% if state['statecode'] != 'TT'%}
      <tr>
      
      <th scope="row" class="text-left">
      {{state['state'] }}
  
      </th>
      <td class="text-secondary">{{state['confirmed'] | comafy }}</td>
      <td>{{state['active'] | comafy }}</td>
      <td class="text-success">{{state['recovered'] | comafy }}</td>
      <td class="text-danger">{{state['deaths'] | comafy }}</td>
      
       </tr>
       {%endif%}
     {% endfor %}

   </tbody>
 </table>
<hr>
<div class="alert alert-secondary align-center">
<button type="button" class="btn btn-link" onclick="chartChange('confirm')">C </button> |
<button type="button" class="btn btn-link" onclick="chartChange('active')">A</button> |
<button type="button" class="btn btn-link" onclick="chartChange('recovered')">R</button> |
<button type="button" class="btn btn-link" onclick="chartChange('death')">D</button> 
 <canvas id="indiaChart" width="400" height="250"></canvas>
 </div>
<hr>
	<div class="alert alert-primary align-center">
		  <small><strong> Note:  </strong>Recovered data is subject to further verification.</small>
 	</div>

<script>

var india_data = {{ statedatalist | safe }}
   var indiastate_list = [];
   var india_confirmedlist = [];
   var india_activelist = [];
   var india_deceasedlist = [];
   var india_recoveredlist = [];

    for (var key in india_data) {
        // arr.push(test[key]['date']);
        if(india_data[key]['statecode'] != 'TT'){
        india_confirmedlist.push(india_data[key]['confirmed'])
        india_activelist.push(india_data[key]['active']);
        india_deceasedlist.push(india_data[key]['deaths']);
        india_recoveredlist.push(india_data[key]['recovered']);
        indiastate_list.push(india_data[key]['state'])
        }
    }
    plotIndiaChart();


</script>

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

         {% endblock %}