<style>
	.main-div {
		padding:10mm 0 !important;
	}
	.valign-top {
		vertical-align: top !important;
	}
	.primary-table table {
		border-collapse: collapse !important;
		page-break-inside: auto;
	}
	.primary-table th {
		text-align: center;
		background: none !important;
		vertical-align: middle;
		padding: 0 2mm !important;
		font-family: 'Lora', serif;
        border: 1px solid #000;
	}
	.primary-table td {
		padding: 2mm !important;
		line-height: 18px !important;
		border: 1px solid #000;
		text-align: center;
		vertical-align: middle;
		page-break-inside: avoid !important; 
		font-family: 'Lora', serif;
	}
	.primary-table td.valign-top {
		vertical-align: top;
	}
	.print-border-0 th {
		border: 1px solid #fff !important;
		background-color: #fff !important;
		height: 5mm !important;
	}
    .print-border-1 th {
		border-top: 1px solid #fff !important;
        border-left: 1px solid #fff !important;
        border-right: 1px solid #fff !important;
		background-color: #fff !important;
	}
	.text-left {
		text-align: left !important;
	}
	.text-ceneter {
		text-align: center !important;
	}
	.text-right {
		text-align: right !important;
	}
	.m-t-20 {
		margin-top: 20px !important;
	}
	.m-b-50 {
		margin-bottom: 40px !important;
	}
	.cols td {
		height: 140px !important;
	}
	.border-rl-0 {
		border-left: 1px solid #fff !important;
		border-right: 1px solid #fff !important;
	}
	.border-0 {
		border: 1px solid #fff !important;
	}
	.report-header {
		text-align: center !important;
		width: 100% !important;
		margin-bottom: 20px !important;
	}

	.report-header * {
		text-align: center !important;
	}
</style>

<div class="text-center" style="main-div;">
	<div class="text-center m-t-20" style="min-height: 82vh!important;">
		<div class="report-header">
			{% if commonHeader  %}
				{{ commonHeader|raw }}
			{% endif %}
		</div>
		<table class="mb-4 table table-bordered border primary-table-report tr table-active" role="grid" id="evaluation-count-wise-report" data-cols-width="10,25,20,30,20,20">
			
			{# ── Title Row ── #}
			<tr>
				<th colspan="6" class='text-center' data-f-bold='true' data-a-h='center' data-a-v='middle'>
					<b>COURSE WISE ATTENDEE REPORT OF {{ evaluation.name|upper }} </b>
				</th>
			</tr>

			{# ── Column Header Row ── #}
			<tr>
				<th width='8%'  class="text-center" data-f-bold='true' data-a-h='center' data-a-v='middle'>Sl No</th>
				<th width='20%' class="text-center" data-f-bold='true' data-a-h='center' data-a-v='middle'>Batch Name</th>
				<th width='15%' class="text-center" data-f-bold='true' data-a-h='center' data-a-v='middle'>Course Code</th>
				<th width='30%' class="text-center" data-f-bold='true' data-a-h='center' data-a-v='middle'>Course Name</th>
				<th width='13%' class="text-center" data-f-bold='true' data-a-h='center' data-a-v='middle'>Attended Count</th>
				<th width='14%' class="text-center" data-f-bold='true' data-a-h='center' data-a-v='middle'>Total Count</th>
			</tr>

			{# ── Grand total accumulators ── #}
			{% set sl = 1 %}
			{% for batch in batches %}


				{% for course in batch.courses %}
					
					<tr>
						<td class="text-center" data-a-h='center' data-a-v='middle'>{{ sl }}</td>

						{% if loop.first %}
							<td class="text-center" rowspan="{{ batch.courses|length }}" style="vertical-align: middle;">
								{{ batch.groupName }}
							</td>
						{% endif %}

						<td class="text-center" data-a-h='center' data-a-v='middle'>{{ course.courseCode }}</td>
						<td class="text-left" data-a-h='left' data-a-v='middle'>{{ course.courseName }}</td>
						<td class="text-center" data-a-h='center' data-a-v='middle'>{{ course.attendedCount }}</td>
						<td class="text-center" data-a-h='center' data-a-v='middle'>{{ course.totalCount }}</td>
					</tr>
					{% set sl = sl + 1 %}
				{% endfor %}


			{% endfor %}


		</table>
	</div>
</div>