<style>
    .half-container {
        border: .2mm solid #ccc;
        width: 100%;
        height: 148.3mm; /* half of A4 height */
        box-sizing: border-box;
        padding: 20mm; /* adjust this for your desired margins */
        padding-top: 15mm;
    }
    .header {
        text-align: center;
    }

    .info-table {
        width: 11cm;
        margin: 0 auto;
    }
    .info-table table {
        width: 100%;
    }
    .spacer {
        width: 2cm;
    }
    .login-box {
        border: 1mm solid #ccc;
        border-radius: 3mm;

        padding: 5mm;
        padding-top: 2mm;
        box-sizing: border-box;
        margin: 0 auto;
        margin-top: 8mm;
        width: 11cm;
        text-align: center;
    }
    .login-box table {			
        margin: 0 auto;
        margin-top: 2mm;
    }
    th, td {
        text-align: left;
        border: none;
        padding: 0;
        margin: 0;
    }
    .login-info-header {
        color: #888;

        margin: 0 auto;
    }
    .signature-name {
        text-align: center;
        font-size: 12px;
    }
    .signature-line {
        border-bottom: 1px solid black;
    }

    .vspace {
        height: 10mm;
        box-sizing: border-box;
        display: inline-block;
    }


    .fill-in table {
      margin: 0  auto;
      border-collapse: collapse;
    }
    .cut-line {
      border-top: 3px dashed #000;
      position: absolute;
      top: 148.5mm;
      width: 200mm;
      margin-left: 7mm;
    }

    .hashcode-char {
      padding: 5mm 3mm;
      border: 1px solid #999;
    }
    .hashcode-dash {
      padding: 0 1mm;
      font-size: 30px;
      font-weight: bold;
      color: #999;
    }

    .cut-line:before {
      content: "\2702"; /* This is the HTML entity for scissors */
      position: absolute;
      top: -23px;
      left: -20px;
      font-size: 30px;
    }
    
    @media print {
        .hashcode-dash {
            -webkit-print-color-adjust: exact; /* For Chrome and Safari */
            print-color-adjust: exact; /* For compatibility */
            color-adjust: exact; /* For Firefox */
        }
        .half-container {
            border: none;
        }
    }
</style>

{% if language == 'de' %}
  {% set labels = {
    'hand_in_label': 'Abgeben',
    'take_home_label': 'Mitnehmen',
    'room_label': 'Raum',
    'date_label': 'Datum',
    'fill_in_label': 'Bei Abgabe ausfüllen',
    'signature_label': 'Unterschrift',
    'username_label': 'Benutzername',
    'password_label': 'Passwort'
  } %}
{% else %}
  {% set labels = {
    'hand_in_label': 'Hand In',
    'take_home_label': 'Take Home',
    'room_label': 'Room',
    'date_label': 'Date',
    'fill_in_label': 'Fill In When Handing In',
    'signature_label': 'Signature',
    'username_label': 'Username',
    'password_label': 'Password'
  } %}
{% endif %}

{% macro generate_hashcode_row(num_blocks, chars_per_block) %}
<tr style="padding-bottom: 10mm;">
    <th id="hashcode">Hashcode:</th><td style="width: 5mm;"></td>
    {% for block in range(num_blocks) %}
        {% for char in range(chars_per_block) %}
            <td class="hashcode-char"></td>
        {% endfor %}
        {% if not loop.last %}
            <td class="hashcode-dash">-</td>
        {% endif %}
    {% endfor %}
</tr>
{% endmacro %}

{% set hashcode_row = generate_hashcode_row( exam_info.hashcode_num_blocks ,  exam_info.hashcode_block_size ) %}

<div class="half-container">
    <!-- Hand In Sheet -->
    <div class="header">
    <h2>{{ labels.hand_in_label }}</h2>
    <h3>{{ exam_info.exam_name }}</h3>
    </div>
    <div class="info-table">
        <table>
            <tr>
                <th>{{ labels.room_label }}:</th><td>{{ student.room }}</td><td class="spacer"></td><th>{{ labels.date_label }}:</th><td>{{ exam_info.date }}</td>
            </tr>
            <tr>
                <th>Name:</th>
                <td colspan="4">{{ student.first_name }}&nbsp;{{ student.last_name }}</td>
            </tr>
        </table>
    </div>
    <div class="login-box">
        <span class="login-info-header">Login Info</span>
        <table>
            <tr>
                <th>{{ labels.username_label }}:</th><td class="spacer"><td>{{ student.username }}</td>
            </tr>
            <tr>
                <th>{{ labels.password_label }}:</th><td class="spacer"><td>{{ student.password }}</td>
            </tr>
        </table>
    </div>
    <div class="fill-in">
        <h4 style="text-align: center;">{{ labels.fill_in_label }}</h4>
        <table>
            {{ hashcode_row }}
            <tr class="vspace"></tr>
            <tr>
                <th>{{ labels.signature_label }}:</th><td style="width: 5mm;"></td><td colspan="14" class="signature-line"></td>
            </tr>
            <tr>
                <th></th><td style="width: 5mm;"></td><td colspan="14" class="signature-name">{{ student.first_name }}&nbsp;{{ student.last_name }}</td>
            </tr>
        </table>
    </div>
    <!-- End Of Hand In Sheet -->
</div>
<div class="cut-line"></div>
<div class="half-container">
    <!-- Take Home Sheet -->
    <div class="header">
    <h2>{{ labels.take_home_label }}</h2>
    <h3>{{ exam_info.exam_name }}</h3>
    </div>
    <div class="info-table">
        <table>
            <tr>
                <th>{{ labels.room_label }}:</th><td>{{ student.room }}</td><td class="spacer"></td><th>{{ labels.date_label }}:</th><td>{{ exam_info.date }}</td>
            </tr>
            <tr>
                <th>Name:</th>
                <td colspan="4">{{ student.first_name }}&nbsp;{{ student.last_name }}</td>
            </tr>
        </table>
    </div>
    <div style="height: 2cm;"></div>
    <div class="fill-in">
        <h4 style="text-align: center;">{{ labels.fill_in_label }}</h4>
        <table>
            {{ hashcode_row }}
        </table>
    </div>
</div>
