{namespace formvh=TYPO3\CMS\Form\ViewHelpers}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="format-detection" content="telephone=no">

    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        #recap {
            border-collapse: collapse;
            width: 80%;
            margin: 60px 10%;
        }

        .first-lvl {
            border: 1px solid #ddd;
            padding: 8px;
        }

        tr.first-lvl:nth-child(even){background-color: #f2f2f2;}

        th.first-lvl {
            padding-top: 8px;
            padding-bottom: 8px;
            text-align: left;
            background-color: #99ccff;
            color: white;
        }
    </style>
</head>
<body>

    <p><f:translate key="hello"/></p>

    <p>
        <f:translate key="your-contact-demand-has-been-sent"/>
        <f:translate key="here-is-a-summary-of-your-demand"/>
    </p>

    <table id="recap">
        <formvh:renderAllFormValues renderable="{form.formDefinition}" as="formValue">
            <tr class="first-lvl">
                <td class="first-lvl">{formvh:translateElementProperty(element: formValue.element, property: 'label')}</td>
                <td class="first-lvl">
                    <f:if condition="{formValue.value}">
                        <f:then>
                            <f:if condition="{formValue.isMultiValue}">
                                <f:then>
                                    <table>
                                        <f:for each="{formValue.processedValue}" as="value">
                                            <tr>
                                                <td>{value}</td>
                                            </tr>
                                        </f:for>
                                    </table>
                                </f:then>
                                <f:else>
                                    <table>
                                        <tr>
                                            <td><f:format.nl2br>{formValue.processedValue}</f:format.nl2br></td>
                                        </tr>
                                    </table>
                                </f:else>
                            </f:if>
                        </f:then>
                        <f:else>
                            -
                        </f:else>
                    </f:if>
                </td>
            </tr>
        </formvh:renderAllFormValues>
    </table>

    <p><f:translate key="we-ll-contact-you-back-as-soon-as-possible"/></p>

    <p><f:translate key="regards"/></p>
    <p><f:translate key="direction"/></p>

    <hr/>
    <p><i><f:translate key="this-is-an-automatic-email-do-not-answser"/></i></p>

</body>
</html>
