<% block('css').append('<link rel="stylesheet" href="../plugins/datatables-bs4/css/dataTables.bootstrap4.css">') %>
<% block('css').append('        <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">\n' +
        '        <link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css">\n' +
        '        <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.6/css/fixedHeader.dataTables.min.css">\n')%>

<div class="card card-primary">
    <div class="card-header">
        <h3 class="card-title"><%= title %></h3>
        <!-- /.card-tools -->
    </div>
    <!-- /.card-header -->

    <div class="card-body ">
        <table id="ind" class="table table-bordered table-hover" role="grid" aria-describedby="example2_info">
            <thead>
            <tr role="row">
                <th>#</th>
                <th>Name</th>
                <th>Email</th>
                <th>Subject</th>
                <th>Message</th>
                <th>Date</th>
            </thead>
            <tbody>
            <% msgs.forEach(msg =>  { %>
                <tr role="row" class="odd">
                    <td><%= msg.id %></td>
                    <td><%= msg.Name %></td>
                    <td><a href="mailto:<%= msg.Email %>"><%= msg.Email %></a></td>
                    <td><%= msg.Subject %></td>
                    <td><%= msg.Message %></td>
                    <td><%= msg.createdAt %></td>
                </tr>
            <% }); %>

            </tbody>
        </table>
    </div>
    <!-- /.card-body -->
</div>



<!-- include sorting in any table -->
<% block('js').append('<script src="/plugins/datatables/jquery.dataTables.js"></script>') %>
<% block('js').append('<script src="/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>') %>
<% block('js').append('        <script src="https://cdn.datatables.net/fixedheader/3.1.6/js/dataTables.fixedHeader.min.js"></script>\n' +
        '        <script src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>\n' +
        '        <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>\n' +
        '        <script src="//cdn.datatables.net/plug-ins/1.10.7/pagination/select.js"></script>\n') %>
<% block('js').append('<script> $(function () {$("#ind").DataTable({ stateSave: true,\n' +
        '                    responsive: true,\n' +
        '                    columnDefs: [\n' +
        '                        { responsivePriority: 1, targets: 0 },\n' +
        '                        { responsivePriority: 2, targets: -1 },\n' +
        '                        { responsivePriority: 3, targets: 1 }\n' +
        '                    ],\n' +
        '                    fixedHeader: {\n' +
        '                        header: true,\n' +
        '                        footer: true\n' +
        '                    },\n' +
        '                    bAutoWidth: false,\n' +
        '                    "autoWidth": false});})</script>') %>

