{% extends "conferenceapp/layout.html" %}
{% block style %}
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css" />
{% endblock %}
{% block content %}
<div class="container">
    <div class="row header text-center">
        <div class="col-lg-3 col-md-3 col-sm-12 mt-4 text-center"> </div>
        <div class="col-lg-6 col-md-6 col-sm-12 mt-4 text-center">
            <a class="btn btn-danger float-right mt-3" type="button" id="back" href="{{ url_for('confapp.BackToHome') }}">Back</a>
            <h2>Society Index</h2>
            <table class="table table-bordered"  style="width:100% !important;" id="myTable">
            <thead style="background-color: #072645;border-color: #dee2e6;color: #FFF;">
                <tr>
                    <th>Society Id</th>
                    <th>Society Name</th>
                </tr>
            </thead>
            <tbody>
                {% for row in society_data %}
                <tr>
                    <td data-lable="Society Id">{{row.society_id}}</td>
                    <td data-lable="Society Name">{{row.society_name}}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        </div>
        
        <div class="col-lg-3 col-md-3 col-sm-12 mt-4 text-center"> </div>
        
        
    </div>
</div>
<br>


{% endblock %}
{% block bottomscript %}
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready( function () {
    
     $("#myTable").dataTable( {
        "iDisplayLength": 50
    } );
   
} );
</script>

{% endblock %}