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

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

        /*  TABLE */
        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: 6%; text-align: center; }
        .col-student-name { width: 30%; text-align: left; padding-left: 8px; }
        .col-roll-no { width: 15%; text-align: center; }
        .col-reg-no { width: 15%; text-align: center; }
        .col-email { width: 20%; text-align: left; padding-left: 8px; }
        .col-remark { width: 14%; text-align: center; }

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

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

<body>
<!-- Report Header -->
<table>
    <tr>
        <td colspan="6" style="text-align: center; padding: 10px;" 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="6" style="text-align: center; font-size: 16px; font-weight: bold; padding: 15px; text-transform: uppercase; text-decoration: underline;" data-a-h="center" data-a-v="middle" data-f-bold="true">
            Student Lifecycle Report
        </td>
    </tr>
</table>

<!-- Report Summary / Filter Context -->
<table>
    <tr>
        <td colspan="6" style="padding: 8px 12px; font-size: 11px; font-weight: bold;">
            Status: {{ reportHeader.status }}
        </td>
    </tr>
    {% if filterContext.schoolName %}
    <tr>
        <td colspan="6" style="padding: 8px 12px; font-size: 11px;">
            <strong>School:</strong> {{ filterContext.schoolName }}
        </td>
    </tr>
    {% endif %}
    {% if filterContext.deptName %}
    <tr>
        <td colspan="6" style="padding: 8px 12px; font-size: 11px;">
            <strong>Department:</strong> {{ filterContext.deptName }}
        </td>
    </tr>
    {% endif %}
    {% if filterContext.programName %}
    <tr>
        <td colspan="6" style="padding: 8px 12px; font-size: 11px;">
            <strong>Program:</strong> {{ filterContext.programName }}
        </td>
    </tr>
    {% endif %}
    {% if filterContext.batchName %}
    <tr>
        <td colspan="6" style="padding: 8px 12px; font-size: 11px;">
            <strong>Batch/Section:</strong> {{ filterContext.batchName }}
        </td>
    </tr>
    {% endif %}
    {% if filterContext.admissionYear %}
    <tr>
        <td colspan="6" style="padding: 8px 12px; font-size: 11px;">
            <strong>Admission Year:</strong> {{ filterContext.admissionYear }}
        </td>
    </tr>
    {% endif %}
    {% if filterContext.programLevel %}
    <tr>
        <td colspan="6" style="padding: 8px 12px; font-size: 11px;">
            <strong>Program Level:</strong> {{ filterContext.programLevel }}
        </td>
    </tr>
    {% endif %}
    {% if reportHeader.remarkName %}
    <tr>
        <td colspan="6" style="padding: 8px 12px; font-size: 11px;">
            <strong>Remark:</strong> {{ reportHeader.remarkName }}
        </td>
    </tr>
    {% endif %}
</table>

<!-- Student Data Table -->
<table>
    <thead>
        <tr>
            <th class="col-slno" data-a-h="center" data-a-v="middle">SI.No</th>
            <th class="col-student-name" data-a-h="center" data-a-v="middle">Student Name</th>
            <th class="col-roll-no" data-a-h="center" data-a-v="middle">Roll No</th>
            <th class="col-reg-no" data-a-h="center" data-a-v="middle">Reg No</th>
            <th class="col-email" data-a-h="center" data-a-v="middle">Email</th>
            <th class="col-remark" data-a-h="center" data-a-v="middle">Remark</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-student-name">{{ student.studentName|default(' ')|upper }}</td>
                    <td class="col-roll-no" data-a-h="center" data-a-v="middle">{{ student.rollNo|default(' ') }}</td>
                    <td class="col-reg-no" data-a-h="center" data-a-v="middle">{{ student.regNo|default(' ') }}</td>
                    <td class="col-email">{{ student.studentEmail|default(' ') }}</td>
                    <td class="col-remark" data-a-h="center" data-a-v="middle">{{ student.remarkType|default(' ') }}</td>
                </tr>
            {% endfor %}
        {% else %}
            <tr>
                <td colspan="6" class="empty-state">
                    No student data available.
                </td>
            </tr>
        {% endif %}
    </tbody>
</table>

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

</body>
</html>
