{% extends "layout.html" %}
        {% block title %}
        {{datetitle}}
        {% endblock %}
        {% block content %}
        
<h5 class="display-6 mt-1 text-center">{{datetitle}}</h5>

<div class="alert alert-warning text-center" role="alert">
 <small>Data contains for Street level reporting of corona positive cases in chennai shared by Chennai Corporation, use the search below to find cases in your area</small>
</div>
   
<small class="text-muted mt-1 text-center">Chennai Zonal Stats <a href="{{ url_for('chennaizonalreport') }}">report</a></small>

<div class="input-group input-group-sm mt-1 mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Search</span>
  </div>
  <input type="text" class="form-control light-table-filter" aria-label="Search"  data-table="order-table" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="table-responsive">    
 <table class="table table-striped order-table table-sm display" id="myChennaiTable">
  <thead class="thead-light">
    <tr>
      <th scope="col">Area</th>
      <th scope="col">Location</th>
      <th scope="col">Street</th>
    </tr>
  </thead>
  <tbody>
  {% for street in chennailist  %}
    <tr>
      <td>{{street['area'] | capitalize}}</td>
      <td>{{street['location'] | capitalize}}</td>
      <td>{{street['street'] | capitalize}}</td>
    </tr>
     {% endfor %}
   </tbody>
   </div>
</table>

<div class="alert alert-info" role="alert">
  <small>Data extracted from <a href="https://www.chennaicorporation.gov.in/images/POSITIVECASES.pdf" target="_blank" rel="noopener noreferrer"> Greater Chennai Corporation </a> Page 
</div>

<script>
$(document).ready(function() {
    $('#myChennaiTable').DataTable({
        "paging": false,
        "searching": false,
        "info": false
        
    });
});
 
</script>

{% endblock %}