<div style="margin-top: auto; position: absolute; bottom: 5px; width: 100%;"
	class="{% if extra_space_after_diagram %}bottom-20{% endif %}">
	<div class="row w-full">
		<table class="w-full text-center">
			<thead class="font-semibold">
				<tr>
					<th class="font-extra-small">QSR</th>
					<th class="font-extra-small">QMR</th>
					<th class="font-extra-small">QOR</th>
					<th class="font-extra-small">SPR</th>
					<th class="font-extra-small">MPR</th>
					<th class="font-extra-small">OPR</th>
					<th class="font-extra-small">SPRI</th>
					<th class="font-extra-small">MPRI</th>
					<th class="font-extra-small">OPRI</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="font-extra-small">{{ pipe_ratings.qsr }}</td>
					<td class="font-extra-small">{{ pipe_ratings.qmr }}</td>
					<td class="font-extra-small">{{ pipe_ratings.qor }}</td>
					<td class="font-extra-small">{{ pipe_ratings.spr }}</td>
					<td class="font-extra-small">{{ pipe_ratings.mpr }}</td>
					<td class="font-extra-small">{{ pipe_ratings.opr }}</td>
					<td class="font-extra-small">{{ pipe_ratings.spri }}</td>
					<td class="font-extra-small">{{ pipe_ratings.mpri }}</td>
					<td class="font-extra-small">{{ pipe_ratings.opri }}</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>