<!DOCTYPE html>
<html>
<head>
    <title>Program Articulation Matrix</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 10px;
            margin-bottom: 20px;
        }
        th, td {
            border: 1px solid #555;
            padding: 4px 5px;
            text-align: center;
            vertical-align: middle;
        }
        th {
            font-weight: bold;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
        thead {
            display: table-header-group;
        }
        tr {
            page-break-inside: avoid;
        }
        .report-title {
            font-size: 18px;
            text-align: center;
            margin-bottom: 20px;
            font-weight: bold;
        }
        .course-code-cell {
            text-align: left;
            font-weight: bold;
            white-space: nowrap;
        }
        .course-name-cell {
            text-align: left;
            white-space: normal;
        }
        #custom-report-logo {
            text-align: center;
            margin-bottom: 15px;
        }
        #college-details {
            text-align: center;
            margin-bottom: 20px;
        }
        #college-details div {
            margin: 3px 0;
        }
    </style>
</head>
<body>
    <div id="custom-report-logo">
        {% if resultDetails.header.college.collegeHeaderImage is defined and resultDetails.header.college.collegeHeaderImage is not empty %}
            <img src="{{ resultDetails.header.college.collegeHeaderImage }}" alt="College Header" height="90">
        {% else %}
            <img src="{{ resultDetails.header.college.collegeLogo }}" alt="Logo" height="90">
        {% endif %}
    </div>
    <div id="college-details">
        <div>
            <p><b>{{ resultDetails.header.college.name |upper }}</b></p>
        </div>
        <div>
            <p><b>{{ resultDetails.header.college.address1 |upper }} {{ resultDetails.header.college.address2 |upper }}</b></p>
        </div>
        <div>
            <p><b>{{ resultDetails.header.college.contact1 }}</b></p>
        </div>
        <div>
            <p><b>{{ resultDetails.header.college.contact2 }}</b></p>
        </div>
    </div>
    <br>
    <div class="report-title">PROGRAM ARTICULATION MATRIX</div>

    <table id="PROGRAM_ARTICULATION_MATRIX_PRINT-table">
        <thead>
            <tr>
                <th style="width: 10%; font-weight: bold;">Course Code</th>
                <th style="width: 22%; font-weight: bold;">Course Name</th>
                {% for po in resultDetails.result.poHeaders %}
                    <th style="font-weight: bold;">{{ po.poCode }}</th>
                {% endfor %}
                {% for pso in resultDetails.result.psoHeaders %}
                    <th style="font-weight: bold;">{{ pso.poCode }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for course in resultDetails.result.courses %}
                <tr>
                    <td class="course-code-cell">{{ course.courseCode }}</td>
                    <td class="course-name-cell">{{ course.courseName }}</td>
                    {% for cell in course.cells %}
                        <td>{{ cell }}</td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
</body>
</html>
