{#
   The variables below can be customized here directly, or in your
   settings.yaml file. Any variable in settings.yaml will be exposed
   in here as well.
#}

{%- set url = url
    | default("http://FIXME.container.training/") -%}
{%- set pagesize = pagesize
    | default(10) -%}
{%- set lang = lang
    | default("en") -%}
{%- set event = event
    | default("training session") -%}
{%- set backside = backside
    | default(False) -%}
{%- set image = image
    | default(False) -%}
{%- set clusternumber = clusternumber
    | default(None) -%}
{%- set thing = thing
    | default("lab environment") -%}

{%- if lang == "en" -%}
    {%- set intro -%}
    Here is the connection information to your very own
    {{ thing }} for this {{ event }}.
    You can connect to it with any SSH client.
    {%- endset -%}
{%- endif -%}
{%- if lang == "fr" -%}
    {%- set intro -%}
    Voici les informations permettant de se connecter à votre
    {{ thing }} pour cette formation.
    Vous pouvez vous y connecter
    avec n'importe quel client SSH.
    {%- endset -%}
{%- endif -%}
{%- if lang == "en"  -%}
    {%- set slides_are_at -%}
    You can find the slides at:
    {%- endset -%}
{%- endif -%}
{%- if lang == "fr" -%}
    {%- set slides_are_at -%}
      Le support de formation est à l'adresse suivante :
    {%- endset -%}
{%- endif -%}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Slabo+27px');

{% if paper_size == "A4" %}
@page {
    size: A4; /* Change from the default size of A4 */
    margin: 0.5cm; /* Set margin on each page */
}
body {
    /* this is A4 minus 0.5cm margins */
    width: 20cm;
    height: 28.7cm;
}
{% elif paper_size == "Letter" %}
@page {
    size: Letter; /* 8.5in x 11in */
}
body {
    width: 6.75in; /* two cards wide */
    margin-left: 0.875in; /* (8.5in - 6.75in)/2 */
    margin-top: 0.1875in; /* (11in - 5 cards)/2 */
}
{% endif %}

body, table {
    line-height: 1em;
    font-size: 15px;
    font-family: 'Slabo 27px';
}

table {
    border-spacing: 0;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
    border-left: 0.8em double grey;
    padding-left: 0.4em;
}

td:first-child {
    width: 10.5em;
}

div.card {
    float: left;
    border: 0.01in dotted black;
    /*
      columns * (width+left+right) < 100% 
      height: 33%;
      width: 24.8%;
      width: 33%;
    */
    width: 3.355in; /* 3.375in minus two 0.01in borders */
    height: 2.105in; /* 2.125in minus two 0.01in borders */
}

p {
    margin: 0.8em;
}

div.front {
    {% if image %}
    background-image: url("{{ image }}");
    background-repeat: no-repeat;
    background-size: 1in;
    background-position-x: 2.8in;
    background-position-y: center;
    {% endif %}
}

span.scale {
    white-space: nowrap;
}

.qrcode img {
    height: 5.8em;
    padding: 1em 1em 0.5em 1em;
    float: left;
}

.logpass {
    font-family: monospace;
    font-weight: bold;
}

.pagebreak {
    page-break-after: always;
    clear: both;
    display: block;
    height: 0;
}
</style>
<script type="text/javascript" src="qrcode.min.js"></script>
<script type="text/javascript">
function qrcodes() {
    [].forEach.call(
        document.getElementsByClassName("qrcode"),
        (e, index) => {
            new QRCode(e, {
                text: "{{ qrcode }}",
                correctLevel: QRCode.CorrectLevel.L
            });
        }
    );
}

function scale() {
    [].forEach.call(
        document.getElementsByClassName("scale"),
        (e, index) => {
            var text_width = e.getBoundingClientRect().width;
            var box_width = e.parentElement.getBoundingClientRect().width;
            var percent = 100 * box_width / text_width + "%";
            e.style.fontSize = percent;
        }
    );
}
</script>
</head>
<body onload="qrcodes(); scale();">
{% for login in logins %}
    <div class="card front">
        <p>{{ intro }}</p>
        <p>
            <table>
              <tr>
                <td>login:</td>
                <td>password:</td>
              </tr>
              <tr>
                <td class="logpass">{{ login.login }}</td>
                <td class="logpass">{{ login.password }}</td>
              </tr>
              <tr>
                <td>IP address:</td>
                {% if login.port %}
                <td>port:</td>
                {% endif %}
              </tr>
              <tr>
                <td class="logpass">{{ login.ipaddrs.split("\t")[0] }}</td>
                {% if login.port %}
                <td class="logpass">{{ login.port }}</td>
                {% endif %}
              </tr>
            </table>
        </p>
        <p>
            {% if url %}
            {{ slides_are_at }}
            <p>
                <span class="scale">{{ url }}</span>
            </p>
            {% endif %}
        </p>
    </div>
    {% if loop.index%pagesize==0 or loop.last %}
        <span class="pagebreak"></span>
        {% if backside %}
            {% for x in range(pagesize) %}
                <div class="card back">
                {{ backside }}
                {#
                <p>Thanks for attending
                "Getting Started With Kubernetes and Container Orchestration"
                during CONFERENCE in Month YYYY!</p>
                <p>If you liked that workshop,
                I can train your team, in person or
                online, with custom courses of
                any length and any level.
                </p>
                {% if qrcode %}
                <p>If you're interested, please scan that QR code to contact me:</p>
                <span class="qrcode"></span>
                {% else %}
                <p>If you're interested, you can contact me at:</p>
                {% endif %}
                <p>jerome.petazzoni@gmail.com</p>
                #}
                </div>
            {% endfor %}
        <span class="pagebreak"></span>
        {% endif %}
    {% endif %}
{% endfor %}
</body>
</html>
