<form method="post" class="o-form" action="{{ route('vacancy.process') }}#vacancyForm" enctype="multipart/form-data">

    @csrf

    {{-- To prevent to pass the variable to each form element individually we already name it here --}}
    @php
        $formElementNoErrorArea = true;
        $composedLocationOptions = [];
        foreach ($links->locations->items as $locationItem) {
            $composedLocationOptions[$locationItem->city] = $locationItem->city;
        }
    @endphp

    @if($errors->any())
        <ul class="c-form-feedback  js-error-area  u-spacing-mb4"
            data-feedback="@lang('site/contact.feedback_message')">
            @foreach($errors->all() as $errorMessage)
                <li>{!! $errorMessage !!}</li>
            @endforeach
        </ul>
    @endif

    @include('site.components.form.hidden', ['formElementCodeName' => 'vacancy_name', 'formElementValue' => $vacancy->translation->name])

    <div class="o-form__body">
        <div class="o-form__row">
            <div class="o-form__field" data-size="3">
                @include('site.components.form.text', ['formElementCodeName' => 'first_name', 'formElementPlaceholder' => ''])
            </div>
            <div class="o-form__field" data-size="3">
                @include('site.components.form.text', ['formElementCodeName' => 'last_name', 'formElementPlaceholder' => ''])
            </div>
        </div>

        <div class="o-form__row">
            <div class="o-form__field" data-size="3">
                @include('site.components.form.email', ['formElementCodeName' => 'email', 'formElementPlaceholder' => ''])
            </div>
            <div class="o-form__field" data-size="3">
                @include('site.components.form.text', ['formElementCodeName' => 'phone', 'formElementPlaceholder' => ''])
            </div>
        </div>

        <div class="o-form__row">
            <div class="o-form__field" data-size="3">
                @include('site.components.form.select', [
                            'formElementCodeName' => 'location',
                            'formElementDisableNullOption' => true,
                            'formElementOptions' => $composedLocationOptions
                        ])
            </div>
            <div class="o-form__field" data-size="3">
                @include('site.components.form.text', ['formElementCodeName' => 'age', 'formElementPlaceholder' => ''])
            </div>
        </div>

        <div class="o-form__row">
            <div class="o-form__field" data-size="6">
                @include('site.components.form.textarea', ['formElementCodeName' => 'motivation', 'formElementPlaceholder' => ''])
            </div>
        </div>

        <div class="o-form__row">
            <div class="o-form__field" data-size="6">
                @include('site.components.form.file', ['formElementCodeName' => 'file', 'formElementLabel' => 'Foto van jezelf (max 2mb)'])
            </div>
        </div>

    </div>

    <div class="o-form__submit">
        @include('site.components.form.submit', [
            'formElementValue' => __('site/vacancies.form_send'),
            'formElementClasses' => 'c-button--roomy'
        ])
    </div>

</form>