{% set ajaxUrl = demi_demiUrl([], "demi_additionalservice_productlist", true) %}
{% do jsConfig().add('rangeDatepicker', true) %}
{% do jsConfig().add('smoothScroll', true) %}
{% do jsConfig().add('additionalServiceSearchform', true) %}
{% do jsConfig().add('additionalServices', true) %}
<section class="mt-2 mt-md-4">
<h5 class="text-center font-default-bold mb-2">{{ 'demi.additionalservice.detail.available days'|trans }}</h5>
<form action="{{ ajaxUrl }}"
class="form js-input-states js-ajax-form__form js-additional-services__form">
<input type="hidden" value="{{ offeritem.id }}" name="id">
{% set datesAndTimes = demi_additionalGetDateAndTimes(offeritem) %}
<input type="hidden" name="earliestServiceDate" value="{{ datesAndTimes['earliest'].format('Y-m-d H:i:s') }}">
{{ include('@ElementsDemiFrontend/AdditionalService/detail/vacancyresult.html.twig', {
detailExtension: offeritem.getDemiExtension(),
}) }}
</form>
<div class="js-ajax-form__notifications mb-3" hidden></div>
<div class="js-ajax-form__error-area mb-3" hidden>
<button class="js-ajax-form__retry btn btn-info ml-2">{{ 'demi.filter.retry'|trans }}</button>
</div>
<div class="js-ajax-form__loading loading-overlay" hidden>
<div class="js-ajax-form__loading loading-spinner loading-spinner--white">
<div class="loading-spinner__item loading-spinner__item--1"></div>
<div class="loading-spinner__item loading-spinner__item--2"></div>
<div class="loading-spinner__item loading-spinner__item--3"></div>
</div>
</div>
</section>