<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Attendance Distribution Report</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 12px;
            margin: 0;
            padding: 15px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            font-size: 11px;
        }

        table th,
        table td {
            border: 1px solid #333;
            padding: 7px 6px;
            vertical-align: middle;
        }

        table th {
            font-weight: bold;
            font-size: 10px;
            text-align: center;
        }

        .col-slno        { width: 5%;  text-align: center; }
        .col-roll-no     { width: 10%; text-align: center; }
        .col-name        { width: 22%; text-align: left; padding-left: 8px; }
        .col-dept        { width: 18%; text-align: left; padding-left: 8px; }
        .col-batch       { width: 14%; text-align: center; }
        .col-term        { width: 6%;  text-align: center; }
        .col-present     { width: 9%;  text-align: center; }
        .col-total       { width: 9%;  text-align: center; }
        .col-percent     { width: 7%;  text-align: center; }

        .empty-state {
            text-align: center;
            font-style: italic;
            padding: 25px;
        }

        .print-date {
            text-align: right;
            font-size: 9px;
            margin-top: 25px;
            border-top: 1px solid #ddd;
            padding-top: 10px;
        }
    </style>
</head>

<body>

<!-- College Header -->
<table style="border: none; border-collapse: collapse;">
    <tr>
        <td colspan="9" style="text-align: center; padding: 10px; border: none;" data-a-h="center" data-a-v="middle" data-f-bold="true">
            {% if headerProperties.college.collegeLogo %}
                <img src="{{ headerProperties.college.collegeLogo }}" alt="College Logo" style="max-height: 80px; margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto;">
            {% endif %}
            <div style="font-size: 18px; font-weight: bold; margin: 10px auto; text-align: center;">
                {{ headerProperties.college.name|default('Institution Name') }}
            </div>
            <div style="font-size: 10px; text-align: center;">
                {{ headerProperties.college.address1|default('') }}<br>
                {{ headerProperties.college.address2|default('') }}
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="9" style="text-align: center; font-size: 15px; font-weight: bold; padding: 12px; text-transform: uppercase; text-decoration: underline; border: none;" data-a-h="center" data-a-v="middle" data-f-bold="true">
            Student Attendance Distribution Report
        </td>
    </tr>
</table>

<!-- Report Context - Dynamic Grid Layout -->
<table>
    <!-- Row 1: Slab Category & Attendance Range (always present) -->
    <tr>
        <td colspan="4" style="padding: 8px 12px; font-size: 11px; font-weight: bold;" data-a-h="left" data-f-bold="true">
            Slab Category: {{ reportHeader.slabLabel|raw }}
        </td>
        <td colspan="5" style="padding: 8px 12px; font-size: 11px; font-weight: bold;" data-a-h="left" data-f-bold="true">
            Attendance Range: {{ reportHeader.slabRange|raw }}
        </td>
    </tr>

    <!-- Row 2+: Filter context (School, Department, Batch, Term) - Dynamic columns -->
    {% set filteredContext = [] %}
    {% for ctx in reportHeader.headerContext %}
        {% if ctx.value|trim and ctx.label|trim %}
            {% set filteredContext = filteredContext|merge([ctx]) %}
        {% endif %}
    {% endfor %}

    {% if filteredContext|length > 0 %}
        {% for pair in filteredContext|batch(2) %}
        <tr>
            {% if pair|length == 2 %}
                <!-- 2 items: split evenly -->
                {% for ctx in pair %}
                <td colspan="4" style="padding: 8px 12px; font-size: 11px; font-weight: bold;" data-a-h="left" data-f-bold="true">
                    {{ ctx.label }}: {{ ctx.value|raw }}
                </td>
                {% endfor %}
            {% else %}
                <!-- 1 item: full width -->
                {% for ctx in pair %}
                <td colspan="9" style="padding: 8px 12px; font-size: 11px; font-weight: bold;" data-a-h="left" data-f-bold="true">
                    {{ ctx.label }}: {{ ctx.value|raw }}
                </td>
                {% endfor %}
            {% endif %}
        </tr>
        {% endfor %}
    {% endif %}
</table>

<!-- Student Data Table -->
<table>
    <thead>
        <tr>
            <th class="col-slno"    data-a-h="center" data-a-v="middle">Sl.No</th>
            <th class="col-roll-no" data-a-h="center" data-a-v="middle">Roll No</th>
            <th class="col-name"    data-a-h="center" data-a-v="middle">Student Name</th>
            <th class="col-dept"    data-a-h="center" data-a-v="middle">Department</th>
            <th class="col-batch"   data-a-h="center" data-a-v="middle">Batches/Sections</th>
            <th class="col-term"    data-a-h="center" data-a-v="middle">Term</th>
            <th class="col-present" data-a-h="center" data-a-v="middle">
                {% if reportHeader.attendanceMode == 'DAY_WISE' %}Days Present{% else %}Attended Hours{% endif %}
            </th>
            <th class="col-total"   data-a-h="center" data-a-v="middle">
                {% if reportHeader.attendanceMode == 'DAY_WISE' %}Total Working Days{% else %}Total Hours{% endif %}
            </th>
            <th class="col-percent" data-a-h="center" data-a-v="middle">Attendance %</th>
        </tr>
    </thead>

    <tbody>
        {% if studentList|length > 0 %}
            {% for student in studentList %}
                <tr>
                    <td class="col-slno"    data-a-h="center" data-a-v="middle">{{ loop.index }}</td>
                    <td class="col-roll-no" data-a-h="center" data-a-v="middle">{{ student.rollNo|default('N/A') }}</td>
                    <td class="col-name">{{ student.studentName|default(' ') }}</td>
                    <td class="col-dept">{{ student.deptName|default('N/A') }}</td>
                    <td class="col-batch"   data-a-h="center" data-a-v="middle">{{ student.batchName|default('N/A') }}</td>
                    <td class="col-term"    data-a-h="center" data-a-v="middle">{{ student.termName|default('N/A') }}</td>
                    <td class="col-present" data-a-h="center" data-a-v="middle">{{ student.totalPresent|default(0) }}</td>
                    <td class="col-total"   data-a-h="center" data-a-v="middle">{{ student.totalAttendance|default(0) }}</td>
                    <td class="col-percent" data-a-h="center" data-a-v="middle">{{ student.attendancePercentage|default(0) }}%</td>
                </tr>
            {% endfor %}
        {% else %}
            <tr>
                <td colspan="9" class="empty-state">No student data available.</td>
            </tr>
        {% endif %}
    </tbody>
</table>

<!-- Footer -->
<table>
    <tr>
        <td colspan="9" class="print-date" style="border: none;">
            Generated on {{ "now"|date("d-m-Y") }} at {{ "now"|date("g:i A") }}
        </td>
    </tr>
</table>

</body>
</html>
