<style>
    td, th { padding: 5px; }
    .page {
        font-family:"Times New Roman", Times, serif;
        color: #000;
    }
    .college-header{
        height:35mm;
        width:80%;
        margin:0 auto;
        display:block;
    }
    .demographic-wise-result-analysis thead th {
        border: 1px solid #000;
        font-size: 16px;
    }
    .demographic-wise-result-analysis tbody td {
        border: 1px solid #000;
        font-size: 14px;
    }
    .highlight td {
       font-weight: bold;
    }
    /* Registered / Appeared / Pass Percentage are set on their side so each measure column is only as
       wide as its numbers. With a dozen reservation categories the horizontal labels alone pushed the
       table past a printable width. */
    .demographic-wise-result-analysis thead th.measure-head {
        padding: 5px 2px;
        vertical-align: bottom;
    }
    .demographic-wise-result-analysis thead th.measure-head span {
        display: inline-block;
        white-space: nowrap;
        writing-mode: vertical-rl;
        -webkit-writing-mode: vertical-rl;
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }
</style>
<div class="page" style="width:100%;">
{% set trcolSpan = 2 + (resultAnalysis.columns | length) * 4 %}
<table style='text-align:center;width: 100%;font-size:16px;' cellpadding='0' cellspacing='0' border='0' class='demographic-wise-result-analysis' id="print-result-analysis-report">
    <thead>
        {% if additionalDetails.collegeData.isHeaderEnabled %}
            <tr>
                <th style="border: 1px solid #fff;padding-bottom:10px;" colspan='{{trcolSpan}}'>
                    <img class='college-header' style="width: auto;" src='{{additionalDetails.collegeData.collegeHeader}}'>
                </th>
            </tr>
        {% endif %}
        <tr>
            <th style="border: 1px solid #fff;text-align:center;padding-bottom:10px;" colspan='{{trcolSpan}}'>
                <span style="font-size:18px">RESULT ANALYSIS</span>
            </th>
        </tr>
        <tr>
            <th style="border-top: 1px solid #fff;border-right: 1px solid #fff;border-left: 1px solid #fff;text-align:center;padding-bottom:10px;" colspan='{{trcolSpan}}'>
                <span style="font-size:18px">{{additionalDetails.examRegistrationName}}</span>
            </th>
        </tr>
        <tr>
            <th class='text-center' data-a-h='center' data-a-v='middle' rowspan='2'>Programmes</th>
            <th class='text-center' data-a-h='center' data-a-v='middle' rowspan='2'>Batch</th>
            {% for column in resultAnalysis.columns %}
                <th class='text-center' data-a-h='center' data-a-v='middle' colspan='4'>{{ column.name }}</th>
            {% endfor %}
        </tr>
        <tr>
            {# Registered, Appeared and Passed are all shown so no count is ambiguous - Pass % is Passed over Appeared.
               data-a-text-rotation carries the same rotation into the Excel export. #}
            {% for column in resultAnalysis.columns %}
                <th class='text-center measure-head' data-a-h='center' data-a-v='bottom' data-a-text-rotation='90'><span>Registered</span></th>
                <th class='text-center measure-head' data-a-h='center' data-a-v='bottom' data-a-text-rotation='90'><span>Appeared</span></th>
                <th class='text-center measure-head' data-a-h='center' data-a-v='bottom' data-a-text-rotation='90'><span>Passed</span></th>
                <th class='text-center measure-head' data-a-h='center' data-a-v='bottom' data-a-text-rotation='90'><span>Pass Percentage</span></th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for programme in resultAnalysis.programmes %}
            {% for batch in programme.batches %}
                <tr>
                    {% if loop.first %}
                        <td class="text-left" rowspan='{{ programme.batches | length }}'>{{ programme.name }}</td>
                    {% endif %}
                    <td class="text-left">{{ batch.name }}</td>
                    {% for column in resultAnalysis.columns %}
                        <td class="text-center">{{ batch.cells[column.id].registered }}</td>
                        <td class="text-center">{{ batch.cells[column.id].appeared }}</td>
                        <td class="text-center">{{ batch.cells[column.id].passed }}</td>
                        <td class="text-center">{{ batch.cells[column.id].passPercentage }}</td>
                    {% endfor %}
                </tr>
            {% endfor %}
        {% endfor %}
        {# One consolidated row for the whole report, not one per programme #}
        <tr class="highlight">
            <td colspan="2" class="text-left">Over all</td>
            {% for column in resultAnalysis.columns %}
                <td class="text-center">{{ resultAnalysis.overall[column.id].registered }}</td>
                <td class="text-center">{{ resultAnalysis.overall[column.id].appeared }}</td>
                <td class="text-center">{{ resultAnalysis.overall[column.id].passed }}</td>
                <td class="text-center">{{ resultAnalysis.overall[column.id].passPercentage }}</td>
            {% endfor %}
        </tr>
    </tbody>
</table>
</div>
