<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="initial-scale=1.0">    <!-- So that mobile webkit will display zoomed in -->
        <meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->

        <title>{{ form.titel }}</title>
        <style type="text/css">


            .ReadMsgBody { width: 100%; background-color: #eaeaea;}
            .ExternalClass {width: 100%; background-color: #eaeaea;}
            .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}
            body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
            body {margin:0; padding:0;}
            table {border-spacing:0;}
            table td {border-collapse:collapse;}
            .yshortcuts a {border-bottom: none !important;}


            /* Constrain email width for small screens */
            @media screen and (max-width: 600px) {
                table[class="container"] {
                    width: 95% !important;
                }
            }

            /* Give content more room on mobile */
            @media screen and (max-width: 480px) {
                td[class="container-padding"] {
                    padding-left: 12px !important;
                    padding-right: 12px !important;
                }
            }


        </style>
    </head>
    <body style="margin:0; padding:10px 0;" bgcolor="#eaeaea" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

        <br>

        <!-- 100% wrapper (grey background) -->
        <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#eaeaea">
            <tr>
                <td align="center" valign="top" bgcolor="#eaeaea" style="background-color: #eaeaea;">

                    <!-- 600px container (white background) -->
                    <table border="0" width="600" cellpadding="0" cellspacing="0" class="container" bgcolor="#ffffff">

                        <tr>


                            <td class="container-padding" bgcolor="#ffffff" style="background-color: #ffffff; padding-left: 30px; padding-right: 30px; font-size: 13px; line-height: 20px; font-family: Helvetica, sans-serif; color: #333;" align="left">
                                <br /><br />


                                <div style="font-family: 'Open Sans', sans-serif; font-weight: normal; font-size: 36px; line-height: 40px;">
                                    {{ form.titel }}
                                </div>
                                <br />

                                Hieronder ziet u de ingevoerde gegevens:<br />

                                <br />

                                {% for field in form.fields %}

                                <div style='font-weight: bold'>{{ field.titel }}:</div>
                                <div style='font-style: italic; color: #666;'>{% verbatim %}{{{% endverbatim %} data['{{ field.referentie }}'] {% verbatim %}}}{% endverbatim %}</div>
                                <br />
                                    
                                {% endfor %}

                                <br /><br />

                            </td>
                        </tr>
                    </table>
                    <!--/600px container -->

                </td>
            </tr>
        </table>
        <!--/100% wrapper-->
        <br>
        <br>
    </body>
</html>
