{#
   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(9) -%}
{%- set lang = lang
    | default("en") -%}
{%- set event = event
    | default("training session") -%}
{%- set backside = backside
    | default(False) -%}
{%- set image = image
    | default("kube") -%}
{%- set clusternumber = clusternumber
    | default(None) -%}
{%- if qrcode == True -%}
    {%- set qrcode = "https://container.training/q" -%}
{%- elif qrcode -%}
    {%- set qrcode = qrcode -%}
{%- endif -%}

{# You can also set img_bottom_src instead. #}
{%- set img_logo_src = {
	"docker": "https://s3-us-west-2.amazonaws.com/www.breadware.com/integrations/docker.png",
	"swarm": "https://cdn.wp.nginx.com/wp-content/uploads/2016/07/docker-swarm-hero2.png",
	"kube": "https://avatars1.githubusercontent.com/u/13629408",
	"enix": "https://enix.io/static/img/logos/logo-domain-cropped.png",
    }[image] -%}
{%- if lang == "en" and clustersize == 1 -%}
	{%- set intro -%}
	Here is the connection information to your very own
	machine for this {{ event }}.
	You can connect to this VM with any SSH client.
	{%- endset -%}
    {%- set listhead -%}
    Your machine is:
	{%- endset -%}
{%- endif -%}
{%- if lang == "en" and clustersize != 1 -%}
	{%- set intro -%}
	Here is the connection information to your very own
	cluster for this {{ event }}.
	You can connect to each VM with any SSH client.
	{%- endset -%}
    {%- set listhead -%}
    Your machines are:
	{%- endset -%}
{%- endif -%}
{%- if lang == "fr" and clustersize == 1 -%}
	{%- set intro -%}
	Voici les informations permettant de se connecter à votre
	machine pour cette formation.
	Vous pouvez vous connecter à cette machine virtuelle
	avec n'importe quel client SSH.
	{%- endset -%}
    {%- set listhead -%}
    Adresse IP:
	{%- endset -%}
{%- endif -%}
{%- if lang == "en" and clusterprefix != "node" -%}
	{%- set intro -%}
    Here is the connection information for the
    <strong>{{ clusterprefix }}</strong> environment.
	{%- endset -%}
{%- endif -%}
{%- if lang == "fr" and clustersize != 1 -%}
	{%- set intro -%}
	Voici les informations permettant de se connecter à votre
	cluster pour cette formation.
	Vous pouvez vous connecter à chaque machine virtuelle
	avec n'importe quel client SSH.
	{%- endset -%}
    {%- set listhead -%}
	Adresses IP:
	{%- 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;
	margin: 0.2in;
}
body {
	/* this is Letter minus 0.2in margins */
	width: 8.6in;
	heigth: 10.6in;
}
{% endif %}


body, table {
    margin: 0;
    padding: 0;
    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;
}

div {
    float: left;
    border: 1px dotted black;
    {% if backside %}
    height: 33%;
    {% endif %}
    /* columns * (width+left+right) < 100% */
    /*
    width: 24.8%;
    */
    /**/
    width: 33%;
    /**/    
}

p {
    margin: 0.8em;
}

div.back {
	border: 1px dotted grey;
}

span.scale {
	white-space: nowrap;
}

img.logo {
    height: 4.5em;
    float: right;
 }

img.bottom {
    height: 2.5em;
    display: block;
    margin: 0.5em auto;
}

.qrcode img {
    width: 40%;
    margin: 1em;
}

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

.pagebreak {
    page-break-after: always;
    clear: both;
    display: block;
    height: 0;
}
</style>
<script type="text/javascript" src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/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 cluster in clusters %}
    <div>
        <p>{{ intro }}</p>
        <p>
            {% if img_logo_src %}
            <img class="logo" src="{{ img_logo_src }}" />
            {% endif %}
            <table>
            	{% if clusternumber != None %}
	            <tr><td>cluster:</td></tr>
	            <tr><td class="logpass">{{ clusternumber + loop.index }}</td></tr>
            	{% endif %}
                <tr><td>login:</td></tr>
                <tr><td class="logpass">{{ user_login }}</td></tr>
                <tr><td>password:</td></tr>
                <tr><td class="logpass">{{ user_password }}</td></tr>
            </table>

        </p>
        <p>
            {{ listhead }}
            <table>
                {% for node in cluster %}
                <tr>
                	<td>{{ clusterprefix }}{{ loop.index }}:</td>
                	<td>{{ node }}</td>
                </tr>
                {% endfor %}
            </table>
        </p>

        <p>
            {% if url %}
        	{{ slides_are_at }}
            <p>
                <span class="scale">{{ url }}</span>
            </p>
            {% endif %}
            {% if img_bottom_src %}
            <img class="bottom" src="{{ img_bottom_src }}" />
            {% endif %}
        </p>
    </div>
    {% if loop.index%pagesize==0 or loop.last %}
        <span class="pagebreak"></span>
        {% if backside %}
			{% for x in range(pagesize) %}
		        <div class="back">
				<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>
