<h3 class="pad-cursus-title" id="pad-main-booking-form">{{pad-formTitle}}</h3>

<if-pad-paymentPossible>
    {{pad-paymentInfo}}
    <if-pad-paymentNotLive>
        <br><strong style="color: #ff0000;"><pad-translate>Let op: dit is een testbetaling</pad-translate></strong>
    </if-pad-paymentNotLive>
</if-pad-paymentPossible>

<if-pad-hasErrors>
    <h4 class="pad-errors"><pad-translate>Fouten gevonden</pad-translate></h4>
    <p style="color: #ff0000;" class="pad-p">
        <pad-translate>De boeking kan helaas niet worden doorgevoerd, corrigeer de volgende velden:</pad-translate>
    </p>
    <ul class="pad-form-errors pad-form-error-label">
        {{pad-error-message}}
    </ul>
</if-pad-hasErrors>

<pad-form data-action="#pad-main-booking-form" data-name="pad-booking-form">
    <div style="display: none;">
        <pad-platform-nonce-check data-check-name="{{pad-check-name}}"/>
        <pad-hidden-input data-field-name="course_id" data-value="{{pad-courseId}}"/>
        <pad-hidden-input data-field-name="NONCE" data-value="{{pad-formNonce}}"/>
        <if-pad-addCompanyId>
            <pad-hidden-input data-field-name="company_id" data-value="{{pad-companyId}}"/>
        </if-pad-addCompanyId>
    </div>

    <if-pad-has-message>
        <pad-info-block {{pad-success-message-type}}>
            {{pad-success-message}}
        </pad-info-block>
    </if-pad-has-message>

    <if-pad-showMaterials>
        <h4>{{pad-materialsTitle}}</h4>
        {{pad-materialsDescription}}
        <pad-materials-checklist data-course-id="{{pad-courseId}}"/>
        <br>
    </if-pad-showMaterials>

    <if-pad-showDayPartSelection>
        <pad-daypart-checklist data-course-id="{{pad-courseId}}" {{pad-showPricesDayParts}}/>
    </if-pad-showDayPartSelection>

    <if-pad-showCompanyOptions>
        <h4 class="pad-company-choice">
            <pad-translate>Bedrijf/organisatie of particulier?</pad-translate>
        </h4>
        <div class="pad-radio pad-company-choice-radio pad-toggle-source pad-toggle-targets-as-company">
            <pad-attribute-select data-field-name="as_company" data-default-value="{{pad-companyDefault}}" data-no-null data-true-title="Ja, graag inschrijven als bedrijf/organisatie" data-false-title="Nee, ik ben particulier" data-field-title=""/>
            <pad-script data-script="displayToggle"/>
            <pad-style data-style="displayToggle"/>
        </div>

        <pad-company-input/>
    </if-pad-showCompanyOptions>

    <if-pad-showAttributes>
        <pad-api-attributes-input/>
    </if-pad-showAttributes>

    <h4><pad-translate>Persoonsgegevens</pad-translate></h4>
    <if-pad-addCompanyId>
        <pad-booking-form-student-input company_id_isset="true"/>
    </if-pad-addCompanyId>
    <if-not-pad-addCompanyId>
        <pad-booking-form-student-input/>
    </if-not-pad-addCompanyId>

    <if-pad-showVoucher>
        <div class="pad-voucher">
            <label >
                <div>
                    <pad-translate>Heeft u een kortingscode?</pad-translate>
                </div>
                <pad-text-input
                        data-field-name="voucher"
                        data-field-placeholder="<pad-translate>Kortingscode</pad-translate>"
                        data-template="legacyBookingForm"/>
            </label>
        </div>
    </if-pad-showVoucher>

    <div class="pad-required-message">
        <pad-translate>Velden met * zijn verplicht voor het op de juiste manier verwerken van jouw aanvraag</pad-translate>
    </div>

    <if-pad-showTermsAndConditions>
        <div class="pad-terms-and-conditions">
            <pad-check-box data-field-name="terms_and_conditions" data-value="1" data-template="singleItemToggle">
                <pad-translate>Ik ga akkoord met de algemene voorwaarden</pad-translate>
                (<a href="{{pad-termsAndConditionsURL}}"><pad-translate>hier</pad-translate> </a>
                <pad-translate>kun je ze lezen</pad-translate>).
            </pad-check-box>
        </div>
    </if-pad-showTermsAndConditions>

    <p class="pad-p">
        <button type="submit" class="pad-submit-button">
            <pad-translate>Verstuur aanvraag</pad-translate>
        </button>
        <span class="ajax-loader"></span>
    </p>
</pad-form>
<br>