{namespace vh=Newland\NeosViewHelpers\ViewHelpers}
<f:form action="order" objectName="order" object="{order}">
    <div class="o-container o-container--width-lg">
        <h3>Ausgewählte Prospekte</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="Model/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: 'form.salutation.male', source: 'Model/Order')}, 'Frau': {f:translate(id: 'form.salutation.female', source: 'Model/Order')}}"
                                    prependOptionLabel="{f:translate(id: 'form.choose', source: 'Model/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="Model/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="Model/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="Model/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="Model/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="Model/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="Model/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="Model/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: 'form.choose', source: 'Model/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="Model/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="Model/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: 'form.choose', source: 'Model/Order')}"/>
                            </f:form.select>
                        </div>
                    </li>
                </ul>
            </fieldset>
            <fieldset class="mb-12">
                <span><f:translate id="newsletter" source="Model/Order"/></span>
            </fieldset>
            <fieldset class="mb-12">
                <ul class="list-reset">
                    <li>
                        <f:form.checkbox class="mr-1" id="checkbox" property="newsletter" checked="1">
                            <label class="text-grey-dark" for="newsletter">Newsletter abonnieren</label>
                    </li>
                </ul>
            </fieldset>
            <fieldset class="mb-12">
                <span><f:translate id="privacy" source="Model/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>