<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>

<div class="container">
	<div class="cardtitle">
          <p class="banner-title mb-0 pb-0 bold" style="font-size: 30px;">Cron logs view</p>
          <p class="dasboard_margin">It shows all cron entries that should be ran today. We can fliter the cron details based on the date filter</p>
    </div>
</div>

<div class="container"> 
	<div class="input-group mb-3">
		<div class="input-group-prepend" style="display: block;padding: 10px;text-align: justify;width: 25em;">
		  	<label for="date_filter">Date</label>
		    <input type="date" id="date_filter" class="form-control" aria-label="Default" aria-describedby="date_filter">
		</div>
	</div>
</div>

<div class="container">
	<table id="view_logs_entries_table" class="compact table table-bordered table-striped table-hover">
		<thead><tr><th class="center-class">Sno</th><th class="center-class">Cron file</th><th class="center-class">Cron timing</th><th class="center-class">Cron log</th></tr></thead>
		<tbody>
			  {{#tablecontents}}
		          <tr>
		             <td class="center-class">{{sno}}</td>
		             <td class="center-class">{{{name}}}</td>
		             <td>{{{time}}}</td>
		             <td class="center-class">{{log}}</td>
		          </tr>
	          {{/tablecontents}}
	          {{^tablecontents}}
			  	  <tr><td colspan="4"><center>No cron files were run today!!!</center></td></tr>
			  {{/tablecontents}}
		</tbody>
	</table>
</div>

<script>
$('#view_logs_entries_table').dataTable({
	dom: 'Bfrtip',						
    "pageLength": 30,
    "lengthChange": false,
    lengthMenu: [[30, 50, 100], [30, 50, 100]]
});

</script>