{namespace h=SGalinski\SgJobs\ViewHelpers}
{namespace base=SGalinski\ProjectBase\ViewHelpers}
{namespace sgajax=SGalinski\SgAjax\ViewHelpers}

<f:layout name="Default" />
<f:section name="main">
    <f:asset.script identifier="dropzone-js" crossorigin="anonymous"
        src="EXT:sg_jobs/Resources/Public/node_modules/dropzone/dist/dropzone-min.js" priority="1" />
    <f:asset.css identifier="dropzone-css" crossorigin="anonymous"
        href="EXT:sg_jobs/Resources/Public/node_modules/dropzone/dist/dropzone.css" priority="1" />
    <f:if condition="{job}">
        <f:render partial="ApplyFormSchema" arguments="{_all}" />
    </f:if>

    <div class="default-content-element">
        <h1>
            <f:if condition="{job}">
                <f:then>
                    <f:translate key="frontend.apply.applyAs" />
                    <span>{job.title}</span>
                </f:then>
                <f:else>
                    <f:translate key="frontend.apply.unsolicitedApplication" />
                </f:else>
            </f:if>
        </h1>
    </div>
    <f:if condition="{job}">
        <div class="row">
            <div class="container">
                <div class="row default-content-element sgjobs-description">
                    <input id="maxFileSize" type="hidden" data-maxFileSize="{maxFileSize}" />
                    <input id="maxFileSizeMessage" type="hidden" data-maxFileSizeMessage="{maxFileSizeMessage}" />
                    <div class="col-md-8 col-sm-6 col-xs-12">
                        <div class="default-content-element">
                            <f:format.html parseFuncTSPath="lib.parseFunc_RTE">{job.task}</f:format.html>
                            <h3 class="h4">
                                <f:translate key="frontend.qualification" />
                            </h3>
                            <f:format.html parseFuncTSPath="lib.parseFunc_RTE">{job.qualification}</f:format.html>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="card shadow mb-4">
                            <div class="card-header text-bg-light">
                                <ul class="mb-0">
                                    <li>
                                        <f:format.raw>
                                            <f:translate key="frontend.jobStart" />
                                        </f:format.raw>
                                        <f:if condition="{job.alternativeStartDate}">
                                            <f:then>
                                                {job.alternativeStartDate}
                                            </f:then>
                                            <f:else>
                                                <f:format.date date="{job.startDate}" format="d.m.Y" />
                                            </f:else>
                                        </f:if>
                                    </li>
                                    <li>
                                        <f:if condition="!{job.telecommutePossible}">
                                            <f:then>
                                                <f:format.raw>
                                                    <f:translate key="frontend.locationLabel" />
                                                </f:format.raw><br>
                                                <f:for as="company" each="{job.companies}">
                                                    <span class="sgjobs-company-location-wrap">
                                                        {company.name}<br>
                                                        {company.street}<br>
                                                        <f:if condition="{company.state}">
                                                            {company.state}<br>
                                                        </f:if>
                                                        {company.zip} {company.city}<br>
                                                    </span>
                                                </f:for>
                                            </f:then>
                                            <f:else>
                                                <f:format.raw>
                                                    <f:translate key="frontend.jobLocationRemote" />
                                                </f:format.raw>
                                            </f:else>
                                        </f:if>
                                    </li>
                                    <f:if condition="{job.experienceLevel -> f:count()} > 0">
                                        <li>
                                            <strong>
                                                <f:translate key="frontend.experienceLevel" />:
                                            </strong>
                                            <f:for each="{job.experienceLevel}" as="experienceLevel" iteration="iterator">
                                                {experienceLevel.title}{f:if(condition: '!{iterator.isLast}', then: ', ')}
                                            </f:for>
                                        </li>
                                    </f:if>
                                </ul>
                            </div>
                            <div class="card-body">
                                <h3 class="card-title">
                                    <f:format.raw>
                                        <f:translate key="frontend.jobApplyNow" />
                                    </f:format.raw>
                                </h3>
                                <f:if condition="!{job.hideApplyByPostal}">
                                    <div class="py-4">
                                        <p class="mb-2">
                                            <f:format.raw>
                                                <f:translate key="frontend.job.via.post" />
                                            </f:format.raw>
                                        </p>
                                        <f:if condition="{job.company}">
                                            <p class="mb-2">
                                                {job.company.0.name}
                                            </p>
                                        </f:if>
                                        <f:if condition="{job.contact}">
                                            <f:then>
                                                <p class="mb-2">{job.contact.title} {job.contact.firstName} {job.contact.lastName}</p>
                                            </f:then>
                                            <f:else>
                                                <p class="mb-2">{job.company.contact.title} {job.company.contact.firstName} {job.company.contact.lastName}</p>
                                            </f:else>
                                        </f:if>
                                        <f:if condition="{job.contact} && {job.contact.street}">
                                            <f:then>
                                                <p class="mb-2">{job.contact.street}</p>
                                                <f:if condition="{job.contact.state}">
                                                    <p class="mb-2">{job.contact.state}</p>
                                                </f:if>
                                                <p class="mb-2">{job.contact.zip} {job.contact.city}</p>
                                                <f:if condition="{job.contact.country}">
                                                    <p class="mb-2">{job.contact.country}</p>
                                                </f:if>
                                            </f:then>
                                            <f:else>
                                                <f:if condition="{job.company.contact} && {job.company.contact.street}">
                                                    <f:then>
                                                        <p class="mb-2">{job.company.contact.street}</p>
                                                        <f:if condition="{job.company.contact.state}">
                                                            <p class="mb-2">{job.company.contact.state}</p>
                                                        </f:if>
                                                        <p class="mb-2">{job.company.contact.zip} {job.company.contact.city}</p>
                                                        <f:if condition="{job.company.contact.country}">
                                                            <p class="mb-2">{job.company.contact.country}</p>
                                                        </f:if>
                                                    </f:then>
                                                    <f:else>
                                                        <p class="mb-2">{job.company.street}</p>
                                                        <f:if condition="{job.company.state}">
                                                            <p class="mb-2">{job.company.state}</p>
                                                        </f:if>
                                                        <p class="mb-2">{job.company.zip} {job.company.city}</p>
                                                        <f:if condition="{job.company.country}">
                                                            <p class="mb-2">{job.company.country}</p>
                                                        </f:if>
                                                    </f:else>
                                                </f:if>
                                            </f:else>
                                        </f:if>
                                    </div>
                                </f:if>

                                <f:if condition="!{job.hideApplyByEmail}">
                                    <div class="py-4">
                                        <p class="mb-2">
                                            <f:format.raw>
                                                <f:translate key="frontend.job.via.email" />
                                            </f:format.raw>
                                        </p>
                                        <f:format.html parseFuncTSPath="lib.parseFunc">
                                            <a href="mailto:{f:if(condition: '{job.contact}', then: '{job.contact.email}', else: '{job.company.contact.email}')}">
                                                <f:translate key="frontend.emailContact" />
                                            </a>
                                        </f:format.html>
                                    </div>
                                </f:if>

                                <p class="py-4">
                                    <f:format.raw>
                                        <f:translate key="frontend.job.suggestForm" />
                                    </f:format.raw>
                                </p>
                            </div>
                            <div class="card-footer bg-light text-center">
                                <a href="{f:if(condition: '{job.applyExternalLink}', then: '{job.applyExternalLink}', else: '#apply')}"
                                    class="btn btn-default w-100">
                                    <f:translate key="frontend.applyNow" />
                                </a>
                            </div>
                        </div>
                        <f:if condition="{job.contact}">
                            <f:then>
                                <f:render section="contactBox"
                                    arguments="{contact: job.contact, hideApplyByEmail: job.hideApplyByEmail}" />
                            </f:then>
                            <f:else>
                                <f:render section="contactBox"
                                    arguments="{contact: job.company.contact, hideApplyByEmail: job.hideApplyByEmail}" />
                            </f:else>
                        </f:if>
                        <f:if condition="{job.attachment}">
                            <div class="card shadow mb-4 text-bg-light">
                                <div class="card-body">
                                    <f:link.typolink target="_blank"
                                        parameter="{job.attachment.0.originalResource.publicUrl}">
                                        <h:renderSvg name="fontawesome/solid/file-pdf" width="18" height="18"
                                            color="currentColor" createColorAttribute="TRUE" />
                                        <f:translate key="frontend.attachment" extensionName="SgJobs" />
                                        (PDF, {job.attachment.0.originalResource.size -> f:format.bytes()})
                                    </f:link.typolink>
                                </div>
                            </div>
                        </f:if>
                    </div>
                </div>
            </div>
        </div>
    </f:if>
    <f:if condition="!{job.applyExternalLink}">
        <div class="row default-content-element">
            <f:if condition="{job}">
                <h2>
                    <f:translate key="frontend.apply.applyAsNow" arguments="{0: '{job.title}'}" />
                </h2>
            </f:if>
            <f:form action="apply" class="was-validated" id="apply" controller="Joblist" method="post" name="applyData"
                object="{applyData}" enctype="multipart/form-data">
                <f:if condition="{job}">
                    <f:then>
                        <f:form.hidden property="job" value="{job.uid}" />
                        <f:form.hidden property="jobId" value="{job.jobId}" />
                        <f:form.hidden property="jobTitle" value="{job.title}" />
                    </f:then>
                </f:if>
                <input type="hidden" name="tx_sgjobs_jobapplication[folderName]" value="{folderName}" />

                <f:if condition="{internalError}">
                    <ul class="sg-jobs-validation-error parsley-errors-list filled">
                        <li class="parsley-required">
                            <f:translate key="frontend.apply.error.general" />
                            : {internalError}
                        </li>
                    </ul>
                </f:if>
                <div class="row">
                    <f:if condition="!{job}">
                        <div class="col-md">
                            <f:render section="formLabel" arguments="{label-for: 'company', label-text: 'company'}" />
                            <f:form.select property="company" multiple="0" size="1" id="apply-company"
                                class="form-select" options="{companies}" optionLabelField="city" optionValueField="uid"
                                prependOptionLabel="{f:translate(key:'frontend.apply.country.empty')}"
                                required="required" />
                            <f:render section="formValidation" arguments="{form-field: 'company'}" />
                        </div>
                    </f:if>
                    <div class="col-md">
                        <f:render section="formLabel" arguments="{label-for: 'gender', label-text: 'gender'}" />
                        <f:form.select property="gender" id="apply-gender" class="form-select"
                            options="{male: '{f:translate(key: \'frontend.apply.gender.male\')}', female: '{f:translate(key: \'frontend.apply.gender.female\')}', other: '{f:translate(key: \'frontend.apply.gender.other\')}'}" />
                        <f:render section="formValidation" arguments="{form-field: 'gender'}" />
                    </div>
                </div>
                <div class="row">
                    <f:render section="formTextField"
                        arguments="{wrapper-class: 'col-md', field-id: 'firstName', field-text: 'first_name', required: 'required'}" />
                    <f:render section="formTextField"
                        arguments="{wrapper-class: 'col-md', field-id: 'lastName', field-text: 'last_name', required: 'required'}" />
                </div>
                <div class="row">
                    <f:render section="formTextField"
                        arguments="{wrapper-class: 'col-md-6', field-id: 'street', field-text: 'street', required: 'required'}" />
                    <f:render section="formTextField"
                        arguments="{wrapper-class: 'col-md-4', field-id: 'city', field-text: 'city', required: 'required'}" />
                    <f:render section="formTextField"
                        arguments="{wrapper-class: 'col-md-2', field-id: 'zip', field-text: 'zip', required: 'required'}" />
                </div>
                <div class="row">
                    <div class="col-md">
                        <f:render section="formLabel" arguments="{label-for: 'country', label-text: 'country'}" />
                        <f:form.countrySelect value="DE" property="country" id="apply-country" class="form-select"
                            required="required" />
                        <f:render section="formValidation" arguments="{form-field: 'county'}" />
                    </div>

                    <div class="col-md">
                        <f:render section="formLabel"
                            arguments="{label-for: 'nationality', label-text: 'nationality'}" />
                        <f:form.countrySelect value="DE" property="nationality" id="apply-nationality"
                            class="form-select" required="required" />
                        <f:render section="formValidation" arguments="{form-field: 'nationality'}" />
                    </div>
                </div>
                <div class="row">
                    <f:render section="formTextField"
                        arguments="{wrapper-class: 'col-md', field-id: 'education', field-text: 'education', required: 'required'}" />
                    <div class="col-md">
                        <f:render section="formLabel" arguments="{label-for: 'birthDate', label-text: 'birthDate'}" />
                        <f:form.textfield type="date" property="birthDate" id="apply-birthDate" class="form-control"
                            placeholder="{f:translate(key:'frontend.apply.birthDate')}" required="required" />
                        <f:render section="formValidation" arguments="{form-field: 'birthDate'}" />
                    </div>
                </div>
                <div class="row">
                    <f:render section="formTextField"
                        arguments="{wrapper-class: 'col-md', field-id: 'phone', field-text: 'phone', required: 'required'}" />
                    <f:render section="formTextField"
                        arguments="{wrapper-class: 'col-md', field-id: 'mobile', field-text: 'mobile'}" />
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <f:render section="formLabel" arguments="{label-for: 'email', label-text: 'email'}" />
                        <f:form.textfield type="email" property="email" id="apply-email" class="form-control"
                            placeholder="{f:translate(key:'frontend.apply.email')}" required="required" />
                        <f:render section="formValidation" arguments="{form-field: 'email'}" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md">
                        <label for="apply-cover-letter" class="form-label filled">
                            <f:translate key="frontend.apply.cover_letter" />
                            (
                            <f:translate key="frontend.apply.allowed_file_extensions" />
                            {allowedFileExtensions})
                        </label>
                        <div class="coverLetter-upload jobs-upload rounded" data-max-file-amount="1"
                            data-valid-file-extensions="{settings.fileUpload.fileTypes}"
                            data-max-file-size="{maxFileSize}" data-pid="{storagePid}"
                            data-inner-text="{f:translate(key: 'frontend.DropFiles', extensionName: 'sg_jobs')}"
                            data-cancel-upload="{f:translate(key: 'frontend.CancelUpload', extensionName: 'sg_jobs')}"
                            data-remove-file="{f:translate(key: 'frontend.RemoveFile', extensionName: 'sg_jobs')}"
                            data-file-type-error="{f:translate(key: 'frontend.FileType', extensionName: 'sg_jobs')}"
                            data-upload-ajax="{sgajax:uri.ajax(extensionName: 'SgJobs', controller: 'Ajax\\Upload', action: 'uploadCoverletter', format: 'json', parameters: '{pageId: storagePid}')}">
                        </div>
                        <f:if condition="{coverLetter.name}">
                            <p class="help-block">
                                Aktuell: {coverLetter.name}
                                <input type="hidden"
                                    name="tx_sgjobs_jobapplication[applyData][coverLetter][submittedFile][name]"
                                    value="{coverLetter.name}" />
                                <input type="hidden"
                                    name="tx_sgjobs_jobapplication[applyData][coverLetter][submittedFile][type]"
                                    value="{coverLetter.type}" />
                                <input type="hidden"
                                    name="tx_sgjobs_jobapplication[applyData][coverLetter][submittedFile][tmp_name]"
                                    value="{coverLetter.tmp_name}" />
                                <input type="hidden"
                                    name="tx_sgjobs_jobapplication[applyData][coverLetter][submittedFile][error]"
                                    value="0" />
                                <input type="hidden"
                                    name="tx_sgjobs_jobapplication[applyData][coverLetter][submittedFile][size]"
                                    value="{coverLetter.size}" />
                            </p>
                        </f:if>
                        <f:render section="formValidation" arguments="{form-field: 'coverLetter'}" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md">
                        <label for="apply-cv" class="form-label filled">
                            <f:translate key="frontend.apply.cv" />
                            (
                            <f:translate key="frontend.apply.allowed_file_extensions" />
                            {allowedFileExtensions})
                        </label>

                        <div class="cv-upload jobs-upload rounded" data-max-file-amount="1"
                            data-valid-file-extensions="{settings.fileUpload.fileTypes}"
                            data-max-file-size="{maxFileSize}" data-pid="{storagePid}"
                            data-inner-text="{f:translate(key: 'frontend.DropFiles', extensionName: 'sg_jobs')}"
                            data-cancel-upload="{f:translate(key: 'frontend.CancelUpload', extensionName: 'sg_jobs')}"
                            data-remove-file="{f:translate(key: 'frontend.RemoveFile', extensionName: 'sg_jobs')}"
                            data-file-type-error="{f:translate(key: 'frontend.FileType', extensionName: 'sg_jobs')}"
                            data-upload-ajax="{sgajax:uri.ajax(extensionName: 'SgJobs', controller: 'Ajax\\Upload', action: 'uploadCv', format: 'json', parameters: '{pageId: storagePid}')}">
                        </div>
                        <f:if condition="{cv.name}">
                            <p class="help-block">
                                Aktuell: {cv.name}

                                <f:comment>
                                    <!-- Important, due to a fluid cache issue with the fluid syntax-->
                                </f:comment>
                                <input type="hidden" name="tx_sgjobs_jobapplication[applyData][cv][submittedFile][name]"
                                    value="{cv.name}" />
                                <input type="hidden" name="tx_sgjobs_jobapplication[applyData][cv][submittedFile][type]"
                                    value="{cv.type}" />
                                <input type="hidden"
                                    name="tx_sgjobs_jobapplication[applyData][cv][submittedFile][tmp_name]"
                                    value="{cv.tmp_name}" />
                                <input type="hidden"
                                    name="tx_sgjobs_jobapplication[applyData][cv][submittedFile][error]" value="0" />
                                <input type="hidden" name="tx_sgjobs_jobapplication[applyData][cv][submittedFile][size]"
                                    value="{cv.size}" />
                            </p>
                        </f:if>

                        <f:render section="formValidation" arguments="{form-field: 'cv'}" />
                    </div>
                </div>

                <div class="row">
                    <div class="col-md">
                        <label for="apply-certificate" class="form-label filled">
                            <f:translate key="frontend.apply.certificate" />
                            (
                            <f:translate key="frontend.apply.allowed_file_extensions" />
                            {allowedFileExtensions})
                        </label>

                        <div class="certificate-upload jobs-upload rounded" data-max-file-amount="1"
                            data-valid-file-extensions="{settings.fileUpload.fileTypes}"
                            data-max-file-size="{maxFileSize}" data-pid="{storagePid}"
                            data-inner-text="{f:translate(key: 'frontend.DropFiles', extensionName: 'sg_jobs')}"
                            data-cancel-upload="{f:translate(key: 'frontend.CancelUpload', extensionName: 'sg_jobs')}"
                            data-remove-file="{f:translate(key: 'frontend.RemoveFile', extensionName: 'sg_jobs')}"
                            data-file-type-error="{f:translate(key: 'frontend.FileType', extensionName: 'sg_jobs')}"
                            data-upload-ajax="{sgajax:uri.ajax(extensionName: 'SgJobs', controller: 'Ajax\\Upload', action: 'uploadCv', format: 'json', parameters: '{pageId: storagePid}')}">
                        </div>
                        <f:if condition="{certificate.name}">
                            <p class="help-block">
                                Aktuell: {certificate.name}

                                <f:comment>
                                    <!-- Important, due to a fluid cache issue with the fluid syntax-->
                                </f:comment>
                                <input type="hidden"
                                    name="tx_sgjobs_jobapplication[applyData][certificate][submittedFile][name]"
                                    value="{certificate.name}" />
                                <input type="hidden"
                                    name="tx_sgjobs_jobapplication[applyData][certificate][submittedFile][type]"
                                    value="{certificate.type}" />
                                <input type="hidden"
                                    name="tx_sgjobs_jobapplication[applyData][certificate][submittedFile][tmp_name]"
                                    value="{certificate.tmp_name}" />
                                <input type="hidden"
                                    name="tx_sgjobs_jobapplication[applyData][certificate][submittedFile][error]"
                                    value="0" />
                                <input type="hidden"
                                    name="tx_sgjobs_jobapplication[applyData][certificate][submittedFile][size]"
                                    value="{certificate.size}" />
                            </p>
                        </f:if>

                        <f:render section="formValidation" arguments="{form-field: 'certificate'}" />
                    </div>
                </div>

                <div class="row mb-4">
                    <div class="col-md">
                        <f:render section="formLabel" arguments="{label-for: 'message', label-text: 'message'}" />
                        <f:form.textarea class="form-control" rows="10" property="message" id="apply-message"
                            placeholder="{f:translate(key:'frontend.apply.message')}" />
                    </div>
                </div>
                <div class="form-check mb-4">
                    <f:form.checkbox class="form-check-input" id="privacy-policy" property="privacyPolicy" value="1"
                        additionalAttributes="{required: 'required'}" />
                    <label class="form-check-label" for="privacy-policy">
                        <f:format.raw>
                            <f:translate key="frontend.apply.privacyPolicy"
                                arguments="{0: '{f:render(section:\'privacyPolicyCheckboxLink\')}'}" />
                        </f:format.raw>
                    </label>
                    <f:render section="formValidation" arguments="{form-field: 'privacyPolicy'}" />
                </div>
                <div class="d-flex justify-content-end pt-4">
                    <button type="submit" class="btn btn-lg btn-primary">{f:translate(key:'frontend.applyNow')}</button>
                </div>
            </f:form>
        </div>
    </f:if>

    <f:if condition="{job.relatedJobs}">
        <f:then>
            <div class="row">
                <div class="container">
                    <h2>
                        <f:translate key="frontend.apply.relatedJobs" />
                    </h2>
                    <div class="row default-content-element equal-height-columns stretch-first-child">
                        <f:for each="{job.relatedJobs}" as="relatedJob">
                            <f:render partial="Teaser"
                                arguments="{job: relatedJob, applyPageUid: settings.applyPage}" />
                        </f:for>
                    </div>
                </div>
            </div>
        </f:then>
        <f:else>
            <f:if condition="{settings.enableAutomaticRelatedJobs} && {relatedJobs}">
                <div class="row">
                    <div class="container">
                        <h2>
                            <f:translate key="frontend.apply.relatedJobs" />
                        </h2>
                        <div class="row default-content-element equal-height-columns stretch-first-child">
                            <f:for each="{relatedJobs}" as="relatedJob">
                                <f:render partial="Teaser"
                                    arguments="{job: relatedJob, applyPageUid: settings.applyPage}" />
                            </f:for>
                        </div>
                    </div>
                </div>
            </f:if>
        </f:else>
    </f:if>
</f:section>

<f:section name="privacyPolicyCheckboxLink">
    <f:link.typolink target="_blank" parameter="{settings.privacyPolicyPage}">
        <f:translate key="frontend.apply.privacyPolicy.link" />
    </f:link.typolink>
</f:section>

<f:section name="contactBox">
    <div class="card shadow mb-4">
        <div class="card-header text-bg-light">
            <p class="h4">
                <f:translate key="frontend.apply.contact" />
            </p>
            <p class="py-2 mb-0">
                {contact.title} {contact.firstName} {contact.lastName}
            </p>
            <f:if condition="{contact.phone}">
                <p class="py-2 mb-0">{contact.phone}</p>
            </f:if>
            <f:if condition="{contact.email} && !{hideApplyByEmail}">
                <p class="py-2 mb-0">
                    <f:comment>
                        <!-- Spam Protection (lib.parseFunc encodes adresses) -->
                    </f:comment>
                    <f:format.html parseFuncTSPath="lib.parseFunc">
                        <a href="mailto:{contact.email}">
                            <f:translate key="frontend.emailContact" />
                        </a>
                    </f:format.html>
                </p>
            </f:if>
            <f:if condition="{contact.image}">
                <f:image image="{contact.image}" maxWidth="100" maxHeight="100"
                    alt="{contact.title} {contact.firstName} {contact.lastName}" />
            </f:if>
        </div>
        <div class="card-body">
            <p class="h4 card-title">
                <f:translate key="frontend.apply.recommend" />
            </p>
            <base:sharer />
        </div>
    </div>
</f:section>

<f:section name="formLabel">
    <label for="apply-{label-for}" class="form-label">
        <f:translate key="frontend.apply.{label-text}" />
    </label>
</f:section>


<f:section name="formTextField">
    <div class="{wrapper-class}">
        <label for="apply-{field-id}" class="form-label">
            <f:translate key="frontend.apply.{field-text}" />
        </label>
        <f:form.textfield property="{field-id}" id="apply-{field-id}" class="form-control"
            placeholder="{f:translate(key:'frontend.apply.{field-text}')}" required="{required}" />
        <f:render section="formValidation" arguments="{form-field: '{field-id}'}" />
    </div>
</f:section>

<f:section name="formValidation">
    <f:form.validationResults for="applyData.{form-field}">
        <ul class="text-danger mb-0">
            <f:for each="{validationResults.errors}" as="error">
                <li class="pt-2">{error.message}</li>
            </f:for>
        </ul>
    </f:form.validationResults>
</f:section>