
{% if not jQuery.isEmptyObject(data) %}
<table class="table table-bordered small">
	<thead>
		<tr>
			<th style="width: 16%">{{ __("Leave Type") }}</th>
			<th style="width: 16%" class="text-right">{{ __("Total Allocated Leave") }}</th>
			<th style="width: 16%" class="text-right">{{ __("Expired Leave") }}</th>
			<th style="width: 16%" class="text-right">{{ __("Used Leave") }}</th>
			<th style="width: 16%" class="text-right">{{ __("Pending Leave") }}</th>
			<th style="width: 16%" class="text-right">{{ __("Available Leave") }}</th>
		</tr>
	</thead>
	<tbody>
		{% for(const [key, value] of Object.entries(data)) { %}
			<tr>
				<td> {%= key %} </td>
				<td class="text-right"> {%= value["total_leaves"] %} </td>
				<td class="text-right"> {%= value["expired_leaves"] %} </td>
				<td class="text-right"> {%= value["leaves_taken"] %} </td>
				<td class="text-right"> {%= value["pending_leaves"] %} </td>
				<td class="text-right"> {%= value["remaining_leaves"] %} </td>
			</tr>
		{% } %}
	</tbody>
</table>
{% else %}
<p style="margin-top: 30px;"> No Leave has been allocated. </p>
{% endif %}
