{namespace jhcaptcha = Haffner\JhCaptcha\ViewHelpers}
<f:asset.css identifier="jqueryuicss" href="EXT:umj_sitepackage/Resources/Public/JavaScript/Src/thirdparty/jquery-ui-1.13.2/jquery-ui.css"/>


<div class="schoolform-wrapper black-white">
    <form class="schoolform" method="POST">
        <div class="form-group">
            <p class="form_head2"><f:translate key="tx_msevent_booking.bookingrequest"/></p>
            <p><f:translate key="tx_msevent_booking.interestedatprogram"/></p>
            <f:if condition="{error}">
                <ul style="color:red;">
                    <f:format.raw>{error}</f:format.raw>
                </ul>
            </f:if>
            <f:if condition="{captchaError}">
                <div style="color:red;">
                <strong>
                    <f:translate key="tx_mskatalogbestellung.captchaerr" extensionName="ms_katalogbestellung"/>:
                </strong>
                <f:for as="error" each="{captchaError}">
                    <p>
                        {error.message}
                    </p>
                </f:for>
                </div>
            </f:if>
            <f:comment>
                <div class="row clearfix">
                    <p name="anrede"><f:translate key="tx_mskatalogbestellung.salutation" extensionName="ms_katalogbestellung"/>:<span class="required">*</span></p>
                    <div class="gender">
                        <label for="herr" class="genderLabel"><input type="radio" data-required-gender="true"
                                                                     class="genderRadio" name="anrede" id="herr"
                                                                     value="Herr"
                            <f:if condition="{data.anrede} == 'Herr'">checked</f:if>
                            > <f:translate key="tx_mskatalogbestellung.male"/></label>
                        <label for="frau" class="genderLabel"><input type="radio" data-required-gender="true"
                                                                     class="genderRadio" name="anrede" id="frau"
                                                                     value="Frau"
                            <f:if condition="{data.anrede} == 'Frau'">checked</f:if>
                            > <f:translate key="tx_mskatalogbestellung.female"/></label>
                    </div>
                </div>
            </f:comment>

            <div class="row inputs clearfix">
                <input type="text" data-required="true" class="textField" id="vorname"
                       name="vorname"
                       value="{data.vorname}"
                       placeholder=" ">
                <label for="vorname">
                    <f:translate key="tx_mskatalogbestellung.firstname" extensionName="ms_katalogbestellung"/>:
                    <span class="required">*</span></label>
                <span class="error"></span>
            </div>
            <div class="row inputs clearfix">
                <input type="text" data-required="true" class="textField" id="nachname" name="nachname"
                       value="{data.nachname}"
                       placeholder=" ">
                <label for="nachname">
                    <f:translate key="tx_mskatalogbestellung.lastname" extensionName="ms_katalogbestellung"/>:
                    <span class="required">*</span></label>
                <span class="error"></span>
            </div>
            <div class="row inputs clearfix">
                <input type="text" data-required="true" class="textField" id="institution" name="institution"
                       value="{data.institution}"
                       placeholder=" ">
                <label for="institution">
                    <f:translate key="tx_msevent_booking.institution"/>:
                    <span class="required">*</span></label>
                <span class="error"></span>
            </div>
            <div class="row inputs clearfix">
                <input type="text" data-required="true" class="textField" id="klassenbezeichnung" name="klassenbezeichnung"
                       value="{data.klassenbezeichnung}"
                       placeholder=" ">
                <label for="institution">
                    <f:translate key="tx_msevent_booking.klassenbezeichnung"/>:
                    <span class="required">*</span></label>
                <span class="error"></span>
            </div>
            <div class="row inputs clearfix">
                <input type="text" data-required-email="true" class="textField" id="email" name="email"
                       value="{data.email}"
                       placeholder=" ">
                <label for="email">
                    <f:translate key="tx_mskatalogbestellung.email" extensionName="ms_katalogbestellung"/>:
                    <span class="required">*</span></label>
                <span class="error"></span>
            </div>

            <p class="header_label"><f:translate key="tx_msevent_booking.mobile"/>:<span class="required">*</span></p>
            <div class="flex_fields">
                <div class="row inputs clearfix">
                    <input type="text" data-required-tel="true" class="textField textboxInline" id="telefonVorwahl"
                           name="telefonVorwahl" maxlength="5" value="{data.telefonVorwahl}"
                           placeholder=" ">
                    <label for="telefonVorwahl">
                        <f:translate key="tx_msevent_booking.prefix"/>:
                        <span class="required">*</span></label>
                    <span class="error"></span>
                </div>
                <div class="row inputs clearfix">
                    <input type="text" data-required-tel="true" class="textField textboxInline" id="telefon"
                           name="telefon"
                           value="{data.telefon}"
                           placeholder=" ">
                    <label for="telefon">
                        <f:translate key="tx_msevent_booking.number"/>:
                        <span class="required">*</span></label>
                    <span class="error"></span>
                </div>
            </div>
            <div class="row inputs clearfix">
                <input type="text" data-required="true" class="textField" data-requireflatpickr="true" id="date1" name="date1"
                       value="{data.date1}"
                       placeholder=" ">
                <label for="date1">
                    <f:translate key="tx_msevent_booking.preferreddate"/>:
                    <span class="required">*</span></label>
                <span class="error"></span>
            </div>
            <div class="row inputs clearfix">
                <input type="text" data-required="true" class="textField" data-requireflatpickr="true" id="date2" name="date2"
                       value="{data.date2}"
                       placeholder=" ">
                <label for="date2">
                    <f:translate key="tx_msevent_booking.alternativedate"/> 1:
                    <span class="required">*</span></label>
                <span class="error"></span>
            </div>
            <div class="row inputs clearfix">
                <input type="text" class="textField" id="date3" data-requireflatpickr="true" name="date3" value="{data.date3}"
                       placeholder=" ">
                <label for="date3">
                    <f:translate key="tx_msevent_booking.alternativedate"/> 2:
                </label>
                <span class="error"></span>
            </div>
            <div class="row inputs clearfix">
                <input type="text" data-required="true" class="textField" id="age" name="age"
                       value="{data.age}"
                       placeholder=" ">
                <label for="age">
                    <f:translate key="tx_msevent_booking.age"/>:
                    <span class="required">*</span></label>
                <span class="error"></span>
            </div>
            <div class="row inputs clearfix">
                <input type="text" data-required="true" class="textField" id="groupsize" name="groupsize"
                       value="{data.groupsize}"
                       placeholder=" ">
                <label for="groupsize">
                    <f:translate key="tx_msevent_booking.groupsize"/>:
                    <span class="required">*</span></label>
                <span class="error"></span>
            </div>
            <div class="row inputs clearfix">
                <input type="text" data-required="true" class="textField" id="attendants" name="attendants"
                       value="{data.attendants}"
                       placeholder=" ">
                <label for="attendants">
                    <f:translate key="tx_msevent_booking.accompanyingpersons"/>:
                    <span class="required">*</span></label>
                <span class="error"></span>
            </div>
            <div class="textarea">
                <div class="row inputs clearfix">
                                <textarea class="textField" id="notes" name="notes"
                                          title="{f:translate(key: 'tx_msevent_booking.textareaexampletext')}">{data.notes}</textarea>
                    <label for="notes"
                           title="{f:translate(key: 'tx_msevent_booking.textareaexampletext')}"><f:translate key="tx_msevent_booking.notes"/>:
                    </label>

                </div>
            </div>
        </div>
        <div class="radio-group">
            <p class="header_label" name="schoolcard"><f:translate key="tx_msevent_booking.owncardtext"/>:<span
                    class="required">*</span></p>
            <div class="flex_fields">
                <div class="row inputs clearfix">
                    <div class="radio-btns">
                        <input type="radio" data-required-schoolcard="true"
                               class="schoolcardRadio" name="schoolcard" id="ja"
                               value="Ja"
                        <f:if condition="{data.schoolcard} == 'Ja'">checked</f:if>
                        >
                        <label for="ja">
                            {ms:button(type: 'radioCheckbox')}
                            <f:translate key="tx_msevent_booking.yes"/>
                        </label>
                    </div>
                </div>
                <div class="row inputs clearfix">
                    <div class="radio-btns">
                        <input type="radio" data-required-schoolcard="true"
                               class="schoolcardRadio" name="schoolcard"
                               id="nein"
                               value="Nein"
                        <f:if condition="{data.schoolcard} == 'Nein'">checked</f:if>
                        >
                        <label for="nein">
                            {ms:button(type: 'radioCheckbox')}
                            <f:translate key="tx_msevent_booking.no"/>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <f:comment>
                <div class="clearfix rowLine agbWrap" style="">
                    <label for="newsletter" id="schoolNewsletterlabel" class="inRow"><input type="checkbox"
                                                                                            id="newsletter"
                                                                                            name="newsletter"
                                                                                            class="newsletterCheckbox"
                                                                                            value="Ja">&nbsp;<f:translate key="tx_msevent_booking.subscribenewsletter"/></label>
                </div>
            </f:comment>
            <div class="agb">
                <div class="checkbox">
                    <div class="checkbox-elem">
                        <div class="clearfix inputs rowLine agbWrap">
                            <input type="checkbox" id="acceptAGB" name="acceptAGB" class="agbCheckbox" value="acceptAGB"
                                   data-required-rechnung-agb="true">
                            <label for="acceptAGB" id="acceptAGBlabel" class="inRow">
                                {ms:button(type: 'radioCheckbox')}
                                <p>
                                    <f:translate key="tx_msevent_booking.ihave"/>
                                    <f:link.page pageUid="2407" target="_blank">
                                        <f:translate key="tx_msevent_booking.termsandconditions"/>
                                    </f:link.page>
                                    <f:translate key="tx_msevent_booking.readandaccept"/><span class="required">*</span>
                                </p>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="checkbox">
                    <div class="checkbox-elem">
                        <div class="clearfix inputs rowLine agbWrap">
                            <input type="checkbox" id="acceptDP" name="acceptDP" class="dpCheckbox" value="acceptDP"
                                   data-required-rechnung-dp="true">
                            <label for="acceptDP" id="acceptDPlabel" class="inRow">
                                {ms:button(type: 'radioCheckbox')}
                                <p>
                                    <f:translate key="tx_msevent_booking.agreepersonaldata"/><span class="required">*</span>
                                </p>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <f:comment>
                <div class="submitBT">
                    <input class="BTnext" name="submit" value="Absenden" type="submit">
                </div>
            </f:comment>

            <jhcaptcha:reCaptcha/>
            <f:form.textfield id="captchaResponse" name="captchaResponse" type="hidden"
                              property="captchaResponse"/>

            <div class="submitBT">
                <a class="btn btn-primary BTnext submit sendNow" tabindex="0">
                    <input type="hidden" name="send">
                    <ms:button type="text" text="{f:translate(key: 'tx_msevent_booking.submit')}"
                               direction="right" border="0"></ms:button>
                </a>
            </div>
        </div>
    </form>
</div>