{# -*- engine:django -*- #}

{% extends "core/base_simple_print.html" %}

{% load i18n static barcode %}

{% block size %}
  {% with width=86 height=55 %}
    {{ block.super }}
  {% endwith %}
{% endblock %}

{% block browser_title %}{% blocktrans %}Test PDF generation{% endblocktrans %}{% endblock %}
{% block page_title %}{% blocktrans %}Test PDF generation{% endblocktrans %}{% endblock %}

{% block extra_head %}
  <style>
      @import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

      body {
          font-family: 'Cabin', sans-serif;

      }

      .front-header {
          margin-left: 1mm;
          margin-right: 2mm;
          margin-top: 1mm;
      }

      .front-header {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: flex-start;
      }

      .front-logo {
          width: 36mm;
      }

      .front-header .title .top-title {
          font-weight: 700;
          font-size: 13.5pt;
          text-align: right;
          line-height: 1.4;
      }

      .front-header .title .bottom-title {
          font-weight: 500;
          font-size: 8.1pt;
          text-align: right;
          line-height: 1;
      }

      .front-picture {
          width: 23mm;
          margin-left: 3mm;
          margin-right: 3mm;
      }

      .front-main {
          margin-top: 1mm;
          display: flex;
          flex-direction: row;
          justify-content: stretch;
          align-items: flex-start;
      }

      .front-left {
          display: flex;
          flex-direction: column;
          align-items: center;
      }

      svg {
          float: left;
      }

      .info-item {
          margin-bottom: 1mm;
      }

      .info-title {
          font-size: 6.5pt;
          line-height: 1;
      }

      .info-value {
          font-size: 9pt;
      }

      .front-footer {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
      }

      .stamp img {
          height: 10mm;
          width: 10mm;
      }

      .signature {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: -1mm;
      }

      .signature img {
          height: 6mm;
          width: auto;
      }

      .stamp {
          position: absolute;
          right: 2mm;
          bottom: 2mm;
      }

      .front-footer .signature {
          font-size: 6pt;
      }

      .front {
          background-color: white;
          background-image: url('{% static 'kort/logo-background.png' %}');
          background-repeat: no-repeat;
          background-size: contain;
          background-position-y: center;
          background-position-x: right;
      }

      .back {
          background-image: url('{% static 'kort/building.png' %}');
          background-repeat: no-repeat;
          background-size: cover;
          background-position-y: center;
          background-position-x: center;
      }

      .back .back-logo {
          position: absolute;
          top: 2mm;
          left: 2mm;
          width: 30mm;
      }

      .back .back-text {
          position: absolute;
          top: 34mm;
          left: 2mm;
          right: 2mm;
          color: white;
          text-align: center;
          line-height: 1.2;
          font-size: 9pt;
          font-weight: 500;
      }

  </style>
{% endblock %}

{% block content %}
  <section class="sheet front">
    <div class="front-header">
      <img src="{% static "kort/logo.png" %}" class="front-logo">
      <div class="title">
        <div class="top-title">Schüler:innenausweis</div>
        <div class="bottom-title">Student ID Card / Carte de Collégien</div>
      </div>
    </div>
    <div class="front-main">
      <div class="front-left">
        <img src="https://picsum.photos/id/1074/200/270" class="front-picture">
      </div>
      <div class="front-right">
        <div class="info-item">
          <div class="info-title">
            Name/Surname/Nom
          </div>
          <div class="info-value">
            {{ person.last_name }}
          </div>
        </div>
        <div class="info-item">
          <div class="info-title">
            Vornamen/Given names/Prénoms
          </div>
          <div class="info-value">
            {{ person.first_name }} {{ person.additional_name }}
          </div>
        </div>
        <div class="info-item">
          <div class="info-title">
            Wohnort/Residence/Résidence
          </div>
          <div class="info-value">
            {{ person.street }} {{ person.housenumber }}, {{ person.postal_code }} {{ person.place }}
          </div>
        </div>
        <div class="info-item">
          <div class="info-title">
            Geburtsdatum/Date of birth/Date de naissance
          </div>
          <div class="info-value">
            {{ person.date_of_birth|date:"SHORT_DATE_FORMAT" }}
          </div>
        </div>

      </div>
    </div>
    <div class="front-footer">
      {% generate_barcode chip_number %}
      <div class="signature">
        Lübeck, den {% now "SHORT_DATE_FORMAT" %}
        <img src="{% static "kort/signature.png" %}">
      </div>
      <div class="stamp">
        <img src="{% static "kort/stamp.png" %}">
      </div>
    </div>
  </section>
  <section class="sheet back">
    <img src="{% static "kort/logo.png" %}" class="back-logo">

    <div class="back-text">
      Katharineum zu Lübeck <br>
      Städtisches Gymnasium mit altsprachlichen Zweig<br>
      <br>
      Königstraße 27-31 <br>
      23552 Lübeck
    </div>


  </section>
{% endblock %}