<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>

        @page {
            size: A4;
            margin: 0;
        }
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .container {
            width: 210mm; /* A4 width */
            height: 297mm; /* A4 height */
            margin: auto;
            padding: 0mm; /* adjust this for your desired margins */
            box-sizing: border-box;
			position: relative;
            border: .2mm solid #ccc;
        }
        .container_vertical {
            width: 297mm; /* A4 width */
            height: 210mm; /* A4 height */
            margin: auto;
            padding: 0mm; /* adjust this for your desired margins */
            box-sizing: border-box;
			position: relative;
            border: .2mm solid #ccc;
            transform-origin: center;
            transform: rotate(90deg);
        }
        
		
		@media print {
            .container {
                border: none;
            }
		}
    </style>
</head>
<body>
    
    {% for room, students in student_groups.items() %}
        <div class="container" style="padding: 15mm;">{% include 'exam_overview_table.html' %}</div>
        <div class="container"></div>
        {% set students_sorted_by_seat = students | sort(attribute='seat') %}
        {% for student in students_sorted_by_seat %}
            <div class="container">{% include 'seating_card.html' %}</div>
            <div class="container">{% include 'login_sheet.html' %}</div>    
        {% endfor %}
    {% endfor %}
   
</body>
</html>