<div class="table-responsive">
    <div>
        <table class="table align-items-center table-dark">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">
                        Date and Time
                    </th>

                    <th scope="col">Notes</th>
                    <th scope="col">Action</th>

                </tr>
            </thead>
            <tbody class="list">
                
                <a data-id="{{userid}}" class="notesadd" style="cursor: pointer;">
                    Add Notes
                </a>
                
                
                {% for note in opcenterData%}
                <tr>
                    <td class="budget">
                        {{note.date}}
                    </td>
                    <td class="status">
                        <span class="badge badge-dot mr-4">
                            <i class="bg-warning"></i>{{note.content | truncate_words}}
                        </span>
                    </td>
                    <td class="budget">
                        <a data-item="{{note._id}}" class="noteedit" style="cursor: pointer;">
                            Edit
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

</div>


<script type='text/javascript'>
    $(document).ready(function () {
        $('.notesadd').click(function () {
            var userid = $(this).data('id');
            $.ajax({
                url: '/addNotes',
                type: 'post',
                data: { userid: userid },
                success: function (data) {
                    $('.modal-body').html(data);
                    $('.modal-body').append(data.htmlresponse);
                    $('#ownerClient').modal('show');
                }
            });
        });
    });
</script>
<script type='text/javascript'>
    $(document).ready(function () {
        $('.noteedit').click(function () {
            var userid = $(this).data('item');
            $.ajax({
                url: '/editNotes',
                type: 'post',
                data: { userid: userid },
                success: function (data) {
                    $('.modal-body').html(data);
                    $('.modal-body').append(data.htmlresponse);
                    $('#ownerClient').modal('show');
                }
            });
        });
    });
</script>