<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container, .row, .column {
            display: flex;
        }
        .container {
            width: 900px;
        }
        .column, .row {
            flex-grow: 1;
            justify-content: space-between;
        }
        .column {
            margin-right: 1rem;
        }
        .column-mr .column__name{
            width: 15rem;
        }
        .column-mr .column__value {
            border: none;
            width: 0;
        }

        .column-mr .column__name .de{
            font-size: 1.1rem;
            text-decoration: underline;
        }


        .de {
            //font-weight: bold;
            font-size: 1.3rem;
        }
        .column__value {
           // font-weight: bold;
            border-bottom: 1px solid black;
            text-align: center;
            flex-grow: 0.8;
            display: flex;
            justify-content: center;
            align-items: end;
            width: 10rem;
        }
        .row {
            margin-bottom: 0.5rem;
        }
        .column__name {
            width: 9rem;
        }
        .mr-row {
            border-bottom: 1px solid black;
        }
        .sig-row {
            justify-content: flex-end;
            position: relative;
            margin-top: 2rem;
        }
        .sig-text {
            border-top: 2px solid;
        }
        .signature {
            width: 50%;
            position: absolute;
            top: 5rem;
        }
        .signature-img {
            max-height: 7rem;
        }



    </style>


</head>
<body style="padding: 20px">
<h2>Gäste-Anmeldung</h2>
<div class="row">
    <div class="column">
        <div class="column__name">
                <span class="de">
                    Name:
                </span> <br/>
            Surname
        </div>
        <div class="column__value">
            <%= data.hauptGast.nname%>
        </div>
        <div></div>
    </div>
    <div class="column">
        <div class="column__name">
                <span class="de">
                    Platz-Nr:
                </span> <br/>
            Site
        </div>
        <div class="column__value">
            <%= data.plaetze.map(p => p.platzNummer).toString()%>
        </div>
        <div></div>
    </div>
</div>
<div class="row">
    <div class="column">
        <div class="column__name">
                <span class="de">
                    Vorname:
                </span> <br/>
            Firstname
        </div>
        <div class="column__value">
            <%= data.hauptGast.vname%>
        </div>
        <div></div>
    </div>
    <div class="column">
        <div class="column__name">
                <span class="de">
                    Geb. Datum
                </span> <br/>
            Date of birth
        </div>
        <div class="column__value">
            <%= moment(data.hauptGast.gebd).format('DD.MM.YYYY')%>
        </div>
        <div></div>
    </div>
</div>

<div class="row">
    <div class="column">
        <div class="column__name">
                <span class="de">
                    Straße:
                </span> <br/>
            Street
        </div>
        <div class="column__value">
            <%= data.hauptGast.str ?? data.hauptGast.strasse%>
        </div>
        <div></div>
    </div>
    <div class="column">
        <div class="column__name">
                <span class="de">
                    Nation:
                </span> <br/>
            Nationality
        </div>
        <div class="column__value">
            <%= data.hauptGast.land%>
        </div>
        <div></div>
    </div>
</div>
<div class="row">
    <div class="column">
        <div class="column__name">
                <span class="de">
                    PLZ:
                </span> <br/>
            Postcode
        </div>
        <div class="column__value">
            <%= data.hauptGast.plz%>
        </div>
        <div></div>
    </div>
    <div class="column">
        <div class="column__name">
                <span class="de">
                    Tel:
                </span> <br/>
                Phone number
        </div>
        <div class="column__value">
            <%= data.hauptGast.telefon ?? data.hauptGast.tel1%>
        </div>
        <div></div>
    </div>
</div>
<div class="row">
    <div class="column">
        <div class="column__name">
                <span class="de">
                    Ort:
                </span> <br/>
            Town
        </div>
        <div class="column__value">
            <%= data.hauptGast.ort%>
        </div>
        <div></div>
    </div>
    <div class="column">
        <div class="column__name">
                <span class="de">
                    Email:
                </span>
        </div>
        <div class="column__value">
            <%= data.hauptGast.email%>
        </div>
        <div></div>
    </div>
</div>

<div class="row" style="margin-top: 2rem;">
    <div class="column column-mr">
        <div class="column__name">
                <span class="de">
                    Name der mitreisenden Personen
                </span><br/>
                Names of the fellow travellers

        </div>
        <div class="column__value">
        </div>
        <div></div>
    </div>
    <div class="column column-mr">
        <div class="column__name">
                <span class="de">
                    Geb. Datum
                </span><br/>
                Date of birth
        </div>
        <div class="column__value">
        </div>
        <div></div>
    </div>
    <div class="column column-mr">
        <div class="column__name">
                <span class="de">
                    Nation
                </span><br/>
                Nationality
        </div>
        <div class="column__value">
        </div>
        <div></div>
    </div>
    <div class="column column-mr">
        <div class="column__name">
                <span class="de">
                    Anreise/Abreise
                </span><br/>
                Arrival/Departure
        </div>
        <div class="column__value">
        </div>
        <div></div>
    </div>


</div>

<div class="row mr-row">
    <div class="column column-mr">
        <div class="column__name">
            <%=data.hauptGast.vname %> <%=data.hauptGast.nname %>
        </div>
    </div>
    <div class="column column-mr">
        <div class="column__name">
            <%= moment(data.hauptGast.gebd).format('DD.MM.YYYY')%>

        </div>
    </div>
    <div class="column column-mr" style="width: 10rem">
        <div class="column__name">
            <%= data.hauptGast.land%>
        </div>
    </div>
    <div class="column column-mr">
        <div class="column__name">

            <%= moment(data.hauptGast.von).format('DD.MM.YYYY')%> - <%= moment(data.hauptGast.bis).format('DD.MM.YYYY')%>
        </div>
    </div>

</div>


<%if (data.mitreisende.length > 0){%>
    <% data.mitreisende.forEach(function(mitreisende) {%>

        <div class="row mr-row">
            <div class="column column-mr">
                <div class="column__name">
                    <%=mitreisende.vname %> <%=mitreisende.nname %>
                </div>
            </div>
            <div class="column column-mr">
                <div class="column__name">
                    <%= moment(mitreisende.gebd).format('DD.MM.YYYY')%>
                </div>
            </div>
            <div class="column column-mr" style="width: 10rem">
                <div class="column__name">
                    <%if (!mitreisende.land) {%>
                        <%= data.hauptGast.land%>
                    <% }%>
                        <%if (mitreisende.land) {%>
                            <%= mitreisende.land%>
                        <% }%>
                </div>
            </div>
            <div class="column column-mr">
                <div class="column__name">
                    <%= moment(mitreisende.von).format('DD.MM.YYYY')%> - <%= moment(mitreisende.bis).format('DD.MM.YYYY')%>
                </div>
            </div>

        </div>




    <%});%>
<% }%>



<div class="row sig-row">
    <div class="signature">
        <div class="sig-text">
            <span class="de">
                Unterschrift
            </span><br>
            Signature
        </div>
    </div>
    <img src="data:image/jpeg;base64, <%= signature %>" alt="signature" class="signature-img">


</div>


</body>



