<!DOCTYPE html>
<html>
<head>
    <title>PO-Course Mapping Report</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
            margin-bottom: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
            vertical-align: middle;
        }
        th {
            font-weight: bold;
        }
        .report-title-cell {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            border: none;
        }
        .section-heading-cell {
            text-align: left;
            font-size: 14px;
            font-weight: normal;
            border: none;
        }
        /* College header row: kept in the DOM for Excel export but hidden on screen */
        .hidden {
            display: none;
        }
        .batch-header {
            font-size: 14px;
            font-weight: bold;
            background-color: white;
        }
        .term-header {
            font-weight: bold;
            background-color: white;
        }
        .po-cell {
            font-style: normal;
            font-weight: bold;
            width: 35%;
        }
        .course-list {
            font-style: normal;
            font-weight: bold;
            width: 65%;
        }
    </style>
</head>
<body>
    <table id="PO_COURSE_MAPPING_REPORT-table">
        <thead>
            {{ resultDetails.header.commonHeader|raw }}
            <tr>
                <td class="report-title-cell" colspan="2" style="font-weight: bold;">PO-COURSE MAPPING REPORT</td>
            </tr>
            <tr>
                <td class="section-heading-cell" colspan="2">Course-wise Normalized Contribution of Courses with POs/PSOs</td>
            </tr>
            <tr>
                <th style="width: 35%; font-weight: bold;">PO Number</th>
                <th style="width: 65%; font-weight: bold;">List of Courses</th>
            </tr>
        </thead>
        <tbody>
            {% for batch in resultDetails.result.headerList %}
                {% if resultDetails.courseWiseBatchData %}
                    {% for batchData in resultDetails.courseWiseBatchData %}
                        {% if batchData.batchId == batch.batchId %}
                            <tr>
                                <td class="batch-header" colspan="2">
                                    {{ batch.batchName|upper }}
                                </td>
                            </tr>
                            {% for term in batchData.termList %}
                                <tr>
                                    <td class="term-header" colspan="2">
                                        {{ term.termName }}
                                    </td>
                                </tr>
                                {% for poRow in term.poCourseRows %}
                                    <tr>
                                        <td class="po-cell">{{ poRow.poCode }}</td>
                                        <td class="course-list">
                                            {% if poRow.courses is not empty %}{{ poRow.courses }}{% else %}-{% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                            {% endfor %}
                        {% endif %}
                    {% endfor %}
                {% endif %}
            {% endfor %}
        </tbody>
    </table>
</body>
</html>
