{namespace vh=Newland\NeosViewHelpers\ViewHelpers}
<f:form action="order" objectName="order" object="{order}">
    <div class="o-container o-container--width-lg">
        <h3><f:translate id="selected_brochures" source="Views/Order"/></h3>
        <f:comment>
            <!-- template for brochure items that are added by JavaScript -->
            <div class="flex justify-between items-center mt-8">
                <h4 class="m-0">Bergerlebnis</h4>
                <a class="text-grey" href="">entfernen</a>
            </div>
        </f:comment>

        <div class="tb-brochure-form mt-4">
            <fieldset class="mb-12">
                <ul class="md:flex list-reset">
                    <li class="md:w-1/4 md:mr-4">
                        <label class="text-grey-dark font-bold" for="salutation">
                            <f:translate id="salutation" source="Models/Order"/>
                            *</label>
                        <div class="flex items-center relative">
                            <svg class="w-6 h-6 mr-1 absolute pin-r" aria-hidden="false">
                                <use xlink:href="#icon-arrow-down"></use>
                            </svg>
                            <f:form.select
                                class="bg-transparent border border-grey h-10 mt-1 pl-2 w-full rounded-none appearance-none z-0"
                                id="salutation"
                                property="salutation"
                                required="1"
                                options="{Herr: '{f:translate(id: \'salutation.male\', source: \'Models/Order\')}', Frau: '{f:translate(id: \'salutation.female\', source: \'Models/Order\')}'}"
                                prependOptionLabel="{f:translate(id: 'choose', source: 'Models/Order')}"/>

                        </div>
                    </li>
                    <li class="md:flex-1 md:mr-4 mt-4 md:mt-0">
                        <label class="text-grey-dark font-bold" for="fname">
                            <f:translate id="first_name" source="Models/Order"/>
                            *</label>
                        <div class="flex items-center relative">
                            <f:form.textfield
                                class="tb-brochure-form__validate-checkmark w-full appearance-none border border-grey h-10 mt-1 pl-2"
                                id="fname" property="firstName" required="1"/>

                            <svg class="tb-brochure-form__icon-checkmark" aria-hidden="false">
                                <use xlink:href="#icon-checkmark"></use>
                            </svg>
                        </div>
                    </li>
                    <li class="md:flex-1 mt-4 md:mt-0">
                        <label class="text-grey-dark font-bold" for="lastname">
                            <f:translate id="last_name" source="Models/Order"/>
                            *</label>
                        <div class="flex items-center relative">
                            <f:form.textfield
                                class="tb-brochure-form__validate-checkmark w-full appearance-none border border-grey h-10 mt-1 pl-2"
                                id="sname" property="lastName" required="1"/>

                            <svg class="tb-brochure-form__icon-checkmark" aria-hidden="false">
                                <use xlink:href="#icon-checkmark"></use>
                            </svg>
                        </div>
                    </li>
                </ul>
            </fieldset>
            <fieldset class="mb-12">
                <ul class="md:flex list-reset md:flex-wrap">
                    <li class="md:flex-1 md:mr-4 flex flex-col">
                        <label class="text-grey-dark font-bold" for="street">
                            <f:translate id="street" source="Models/Order"/>
                            *</label>
                        <div class="flex items-center relative">
                            <f:form.textfield
                                class="tb-brochure-form__validate-checkmark w-full appearance-none border border-grey h-10 mt-1 pl-2"
                                id="street" property="street" required="1"/>

                            <svg class="tb-brochure-form__icon-checkmark" aria-hidden="false">
                                <use xlink:href="#icon-checkmark"></use>
                            </svg>
                        </div>
                    </li>
                    <li class="md:w-1/4 flex flex-col mt-4 md:mt-0">
                        <label class="text-grey-dark font-bold" for="streetNumber">
                            <f:translate id="street_number" source="Models/Order"/>
                            *</label>
                        <div class="flex items-center relative">
                            <f:form.textfield
                                class="tb-brochure-form__validate-checkmark w-full appearance-none border border-grey h-10 mt-1 pl-2"
                                id="hnumber" property="streetNumber" required="1"/>

                            <svg class="tb-brochure-form__icon-checkmark" aria-hidden="false">
                                <use xlink:href="#icon-checkmark"></use>
                            </svg>
                        </div>
                    </li>
                </ul>
                <ul class="md:flex list-reset md:flex-wrap">
                    <li class="md:w-1/4 md:mr-4 mt-4">
                        <label class="text-grey-dark font-bold" for="zip">
                            <f:translate id="zip" source="Models/Order"/>
                            *</label>
                        <div class="flex items-center relative">
                            <f:form.textfield
                                class="tb-brochure-form__validate-checkmark w-full appearance-none border border-grey h-10 mt-1 pl-2"
                                type="number" id="postcode" property="zip" required="1"/>

                            <svg class="tb-brochure-form__icon-checkmark" aria-hidden="false">
                                <use xlink:href="#icon-checkmark"></use>
                            </svg>
                        </div>
                    </li>
                    <li class="md:flex-1 mt-4">
                        <label class="text-grey-dark font-bold" for="city">
                            <f:translate id="city" source="Models/Order"/>
                            *</label>
                        <div class="flex items-center relative">
                            <f:form.textfield
                                class="tb-brochure-form__validate-checkmark w-full appearance-none border border-grey h-10 mt-1 pl-2"
                                id="city" property="city" required="1"/>

                            <vh:form.honeypot name="secure_pay"/>
                            <svg class="tb-brochure-form__icon-checkmark" aria-hidden="false">
                                <use xlink:href="#icon-checkmark"></use>
                            </svg>
                        </div>
                    </li>
                </ul>
                <ul class="md:flex list-reset md:flex-wrap">
                    <li class="flex-1 md:mr-4 mt-4">
                        <label class="text-grey-dark font-bold" for="country">
                            <f:translate id="country" source="Models/Order"/>
                            *</label>
                        <div class="flex items-center relative">
                            <svg class="w-6 h-6 mr-1 absolute pin-r" aria-hidden="false">
                                <use xlink:href="#icon-arrow-down"></use>
                            </svg>
                            <f:form.select
                                class="bg-transparent border border-grey h-10 mt-1 pl-2 w-full rounded-none appearance-none z-0"
                                id="country" property="country" required="1"
                                options="{de: 'Deutschland', ch: 'Schweiz'}"
                                prependOptionLabel="{f:translate(id: 'choose', source: 'Models/Order')}"/>

                        </div>
                    </li>
                    <li class="md:w-1/4 mt-4">
                        <label class="text-grey-dark font-bold" for="email">
                            <f:translate id="email" source="Models/Order"/>
                        </label>
                        <div class="flex items-center relative">
                            <f:form.textfield
                                class="tb-brochure-form__validate-checkmark w-full appearance-none border border-grey h-10 mt-1 pl-2"
                                type="email" id="email" property="email" required="1"/>

                            <svg class="tb-brochure-form__icon-checkmark" aria-hidden="false">
                                <use xlink:href="#icon-checkmark"></use>
                            </svg>
                        </div>
                    </li>
                </ul>
            </fieldset>
            <fieldset class="mb-12">
                <ul>
                    <li class="flex flex-col">
                        <label class="text-grey-dark font-bold" for="referredBy">
                            <f:translate id="referred_by" source="Models/Order"/>
                            *</label>
                        <div class="flex items-center relative">
                            <svg class="w-6 h-6 mr-1 absolute pin-r" aria-hidden="false">
                                <use xlink:href="#icon-arrow-down"></use>
                            </svg>
                            <f:form.select
                                class="bg-transparent border border-grey h-10 mt-1 pl-2 w-full rounded-none appearance-none z-0"
                                id="question" property="referredBy" required="1"
                                options="{Freunde: 'Freunde', Werbung: 'Werbung'}"
                                prependOptionLabel="{f:translate(id: 'choose', source: 'Models/Order')}"/>
                                
                        </div>
                    </li>
                </ul>
            </fieldset>
            <f:comment>
                <!-- Newsletter is not a requirement yet. -->
                <fieldset class="mb-12">
                    <span><f:translate id="newsletter" source="Models/Order"/></span>
                </fieldset>
                <fieldset class="mb-12">
                    <ul class="list-reset">
                        <li>
                            <f:form.checkbox class="mr-1" id="checkbox" property="newsletter" value="1" checked="1"/>
                            <label class="text-grey-dark" for="newsletter">Newsletter abonnieren</label>
                        </li>
                    </ul>
                </fieldset>
            </f:comment>
            <fieldset class="mb-12">
                <span><f:translate id="privacy" source="Models/Order"
                                   arguments="{0: {f:uri.node(node: privacyPage)}}"</span>
            </fieldset>
            <fieldset class="mb-12">
                <input class="c-button c-button--secondary" type="submit" name="submit-order"
                       value="Prospekte bestellen">
            </fieldset>
        </div>
    </div>
</f:form>