@php
    // We only do this because it reads a bit easier inline :)
    $searchLocationKey = App\Komma\Availability\AvailabilityService::SEARCH_LOCATION_KEY;
    $searchDateKey = App\Komma\Availability\AvailabilityService::SEARCH_DATE_KEY;
    $searchAmountKey = App\Komma\Availability\AvailabilityService::SEARCH_AMOUNT_KEY;
@endphp

<form class="c-search @modifiers('c-search')  js-search-form  {{ $searchClasses ?? '' }}" action="{{ $links->products->route }}@if(isset($activeProductCategory))/{{  $activeProductCategory->translation->slug }}@endif">

    {{-- Location select --}}
    <div class="c-search__segment" data-label="location">
        <div class="c-input-wrapper">
            <img class="c-input__icon" src="/img/location.svg" />

            <select class="c-search__input  c-select  c-select--clean  js-search-location" name="@lang('site/availability.keys.'.$searchLocationKey)" id="{{ $labelUniquifier . '-' . $searchLocationKey }}">
                <option value="" disabled selected>Kies een locatie</option>
{{--                <option value="{{ \Str::slug(__('site/global.allLocations')) }}" @if(session()->get($searchLocationKey, null) === null) selected @endif>@lang('site/global.allLocations')</option>--}}
                @foreach($links->locations->items as $locationItem)
                    <option @if(session()->get($searchLocationKey) == $locationItem->id) selected @endif value="{{ $locationItem->translation->slug }}">{{ $locationItem->translation->name }}</option>
                @endforeach
            </select>
        </div>
    </div>

    {{-- Date picker--}}
    <div class="c-search__segment" data-label="date">
        <div class="c-input-wrapper">
            <img class="c-input__icon  c-input__icon--pull-up" src="/img/calendar.svg" />
            @include('site.components.form.datePicker', [
                'datePickerId' => $labelUniquifier . '-' . $searchDateKey,
                'datePickerInputClean' => true,
            ])
        </div>
    </div>

    {{-- Attendees select--}}
    <div class="c-search__segment" data-label="attendees">
        <div class="c-input-wrapper">
            <img class="c-input__icon" src="/img/people.svg" />
            <select class="c-search__input  c-select  c-select--clean" name="@lang('site/availability.keys.'.$searchAmountKey)" id="{{ $labelUniquifier . '-' . $searchAmountKey }}">
                <option value=""  @if(session()->get($searchAmountKey, null) === null) selected @endif disabled hidden>@lang('site/global.amount_of_persons')</option>
                @if(isset($searchAmountOfPersonsOptions))
                    @foreach($searchAmountOfPersonsOptions as $searchAmountOfPersonsOption)
                        <option @if(session()->get($searchAmountKey) == $searchAmountOfPersonsOption->id) selected @endif value="{{ $searchAmountOfPersonsOption->label }}">{{ $searchAmountOfPersonsOption->label }}</option>
                    @endforeach
                @endif
            </select>
            </div>
    </div>

    {{-- Search / form submit button--}}
    <div class="c-search__segment"  data-label="button">
        @include('site.components.button', [
            'modifiers' => isset($buttonModifiers) ? $buttonModifiers : null,
            'buttonType' => isset($buttonType) ? $buttonType : null,
            'buttonProperties' => 'type=submit',
            'buttonText' => isset($searchButtonText) ? $searchButtonText : 'Zoek',
            'isButton' => true,
        ])
    </div>
</form>