<input type="hidden" name="date[from]" data-toubiz-events-from-date="data-toubiz-events-from-date">
<input type="hidden" name="date[to]" data-toubiz-events-to-date="data-toubiz-events-to-date">

<li class="tb-results-filter__list-item tb-results-filter__list-item--button">
    <button
        data-toubiz-events-date="today"
        data-toubiz-results-list.active-classes="tb-button--call-to-action"
        data-toubiz-results-list.inactive-classes="tb-button--secondary"
        class="tb-button {f:if(condition: '{state.from} == {today} && {state.to} == {today}', then: 'tb-button--call-to-action', else: 'tb-button--secondary')}">

        <f:translate
            id="group.date.today"
            package="Newland.Toubiz.Events.Neos"
            source="Views/Filter" />

    </button>
</li>
<li class="tb-results-filter__list-item tb-results-filter__list-item--button">
    <button
        data-toubiz-events-date="tomorrow"
        data-toubiz-results-list.active-classes="tb-button--call-to-action"
        data-toubiz-results-list.inactive-classes="tb-button--secondary"
        class="tb-button {f:if(condition: '{state.from} == {tomorrow} && {state.to} == {tomorrow}', then: 'tb-button--call-to-action', else: 'tb-button--secondary')}">

        <f:translate
            id="group.date.tomorrow"
            package="Newland.Toubiz.Events.Neos"
            source="Views/Filter" />

    </button>
</li>
<li class="tb-results-filter__list-item tb-results-filter__list-item--button">
    <div
        data-toubiz-date-picker
        data-toubiz-date-picker.locale="de"
        data-toubiz-date-picker.min-date="{datePickerMinDate}"
        data-toubiz-date-picker.initial-state="{initialDatepickerState}"
        data-toubiz-results-list.active-classes="is-date-selected"
        {f:if(condition: datePickerLoadPage, then: 'data-toubiz-date-picker-integration.load-page="{datePickerLoadPage}"')}
        class="tb-date-picker {f:if(condition: datePickerIsActive, then: 'is-date-selected')}">

        <!-- button for opening the date (range) selection -->
        <button
            data-toubiz-date-picker-button
            data-toubiz-results-list.active-classes="tb-button--call-to-action is-date-selected"
            data-toubiz-results-list.inactive-classes="tb-button--secondary"
            class="tb-date-picker__button tb-button tb-button--has-icon tb-button--has-icon-last {f:if(condition: datePickerIsActive, then: 'tb-button--call-to-action', else: 'tb-button--secondary')}">

            <span class="tb-button__content-wrapper">
                <!-- if value exists, only label is visible -->
                <span
                    data-toubiz-date-picker-label
                    class="tb-date-picker__label">

                    <!-- selected value will be inserted here -->
                </span>

                <!-- if no value is set yet, only placeholder is visible -->
                <span class="tb-date-picker__placeholder">
                    <f:translate
                        id="facet.date._values.selectRange"
                        package="Newland.Toubiz.Events.Neos"
                        source="Components/Filter" />

                </span>

                <svg
                    class="tb-icon"
                    aria-hidden="true"
                    focusable="false">

                    <use xlink:href="#icon-calendar"/>
                </svg>
            </span>
        </button>

        <!-- overlay containing the actual date pickers -->
        <div
            data-toubiz-date-picker-overlay
            class="tb-date-picker__overlay">

            <div data-toubiz-date-picker-range>
                <!-- date pickers for range selection will be rendered here -->
            </div>
        </div>
    </div>
</li>
