<br>
<br>
<div class="container-fluid mt--6">
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <div class="row">
                                <h3 class="mb-0">Notes- </h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <!-- Projects table -->
                    <table id="example" class="display table table-striped table-bordered">
                        <colgroup>
                            <col class="col-xs-2" style="width: 20px;">
                            <col class="col-xs-2"style="width: 20px;">
                            <col class="col-xs-3"style="width: 800px;">
                        </colgroup>
                        <thead class="sticky-header">
                            <tr>
                                <th> Last Modified Time</th>
                                <th>Author</th>
                                 <th>Notes</th>
                            </tr>
                        </thead>
                        {% for note in oldNotesList%}
                        <tr>
                            <td scope="row">
                                {{note.dateTime}}
                            </td>
                            <td scope="row">
                                {{note.author}}
                            </td>
                            <td scope="row" style="white-space: normal;">
                                
                                    {{note.content}}
                                
                            </td>
                        </tr>
                        {% endfor %}
                        <tbody>
                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>


<script type='text/javascript'>
    $(document).ready(function () {
        
        var table = $('#example').DataTable(
    {
        "searching": true,
        "fixedHeader": true,
        "lengthMenu": [],
        "paging":false,
	"search": true,
    "columnDefs": [
        // { "width": "10px", "targets": 0 },
        // { "width": "400px", "targets": 1 }, 
        // { "width": "400px", "targets": 2 },
        
    ]
    });
    });
</script>
