{% block content %}

<style>
/* PDF SAFE CSS */
.body-container {
    width: 100%;
    font-size: 12px;
}

.trend-header {
    background: #8fd26f;
    color: #000;
    text-align: center;
    padding: 8px;
    font-weight: bold;
    border: 1px solid #333;
    margin-bottom: 10px;
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 11px;
}

.table th, .table td {
    border: 1px solid #333;
    padding: 6px;
    text-align: center;
}

.bg-year {
    background: #b7dbff;
}

.left {
    text-align: left;
}

.header-title {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

.sub-title {
    font-size: 13px;
    text-align: center;
    margin-bottom: 10px;
}
</style>

<div class="body-container">

    <!-- Main Title -->
    <div class="trend-header">
        DISTRICT PASS TRENDS BETWEEN {{ years.0 }} - {{ years|last }}
    </div>

    <!-- Region Name -->
    <div class="sub-title">
        REGION : {{ region.name }}
    </div>

    <!-- District Table -->
    <table class="table">

        <thead>
            <tr>
                <th rowspan="2">NO</th>
                <th rowspan="2" class="left">DISTRICT</th>

                {% for y in years %}
                    <th colspan="4" class="bg-year">{{ y }}</th>
                {% endfor %}
            </tr>

            <tr>
                {% for y in years %}
                    <th>TOTAL</th>
                    <th>PASS</th>
                    <th>%PASS</th>
                    <th>REMARK</th>
                {% endfor %}
            </tr>
        </thead>

        <tbody>
            {% for row in rows %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td class="left">{{ row.district }}</td>

                {% for yr in row.years %}
                    <td>{{ yr.total }}</td>
                    <td>{{ yr.passed }}</td>
                    <td>{{ yr.pct }}</td>
                    <td>{{ yr.remark }} {{ yr.icon }}</td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>

    </table>

</div>

{% endblock %}