{namespace poi=Newland\Toubiz\Poi\Neos\ViewHelpers}
{namespace neos=Neos\Neos\ViewHelpers}

<div class="c-quicksearch-wrapper" data-flatpickr-container>
    <f:if condition="{hasMultipleSiteDimensions} && {siteLang} != 'de'">
        <f:then>
            <form class="c-quicksearch"
            action="/{siteLang}/{targetUriSegment}/ukv"
                  method="GET">
        </f:then>
        <f:else>
            <form class="c-quicksearch"
                  action="/{targetUriSegment}/ukv"
                  method="GET">
        </f:else>
    </f:if>

        <fieldset class="c-quicksearch-fieldset">
            <legend class="visually-hidden">
                {f:translate(id: 'quicksearch.ukv', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')}
            </legend>

            <ul class="c-quicksearch__date-selection p-0">
                <li>
                    <label for="c-quicksearch__whenfrom-{node.identifier}">
                        <span class="visually-hidden">
                            {f:translate(id: 'date.arrival', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')}
                        </span>
                        <span aria-hidden="true">
                            {f:translate(id: 'date.when', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')}
                        </span>
                    </label>
                    <input type="date"
                        data-flatpickr.from
                        id="c-quicksearch__whenfrom-{node.identifier}"
                        class="c-quicksearch__date-input-from"
                        placeholder="{f:translate(id: 'date.arrival.short', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')}"
                        name="date_from" />
                </li>
                <li aria-hidden="true">
                    <svg class="c-icon">
                        <use xlink:href="#icon-arrow-right" />
                    </svg>
                </li>
                <li>
                    <label for="c-quicksearch__whento-{node.identifier}"
                           class="visually-hidden c-quicksearch__label-input-to">

                        {f:translate(id: 'date.departure', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')}
                    </label>
                    <input type="date"
                        data-flatpickr.to
                        id="c-quicksearch__whento-{node.identifier}"
                        class="c-quicksearch__date-input-to"
                        placeholder="{f:translate(id: 'date.departure.short', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')}"
                        name="date_to" />
                </li>
            </ul>
        </fieldset>

        <fieldset class="c-quicksearch-fieldset">
            <legend class="visually-hidden">
                {f:translate(id: 'guests', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')}
            </legend>

            <button type="button"
                    aria-haspopup="true"
                    aria-expanded="false"
                    data-target-enhancement
                    data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                    data-target-enhancement-targets.0="#guests-selection-{node.identifier}"
                    data-target-enhancement-classes.0="c-guests-selection--is-visible">

                {f:translate(id: 'guests', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')}

                <p>
                    <span data-reduce="+"
                        data-reduce.subjects.0="#c-quicksearch__adults-{node.identifier}"
                        data-reduce.subjects.1="#c-quicksearch__children-{node.identifier}">

                        2
                    </span>

                    {f:translate(id: 'people', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')}

                    <svg class="c-icon c-icon--down" aria-hidden="true">
                        <use xlink:href="#icon-angle-down" />
                    </svg>
                    <svg class="c-icon c-icon--up" aria-hidden="true">
                        <use xlink:href="#icon-angle-up" />
                    </svg>
                </p>
            </button>

            <div id="guests-selection-{node.identifier}"
                class="c-guests-selection">

                <ul class="c-guests-selection__travellers list-reset">
                    <li>
                        <label for="c-quicksearch__adults-{node.identifier}">
                            {f:translate(id: 'adults', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')}
                        </label>
                        <div class="c-quicksearch__add-remove"
                             data-amount-selection>

                            <button type="button"
                                    data-amount-selection.decrement>

                                <svg class="c-icon">
                                    <use xlink:href="#icon-remove" />
                                </svg>
                            </button>
                            <input type="number"
                                   id="c-quicksearch__adults-{node.identifier}"
                                   min="1"
                                   max="20"
                                   step="1"
                                   value="2"
                                   data-amount-selection.input
                                   name="number_adult[]" />

                            <button type="button"
                                    data-amount-selection.increment>

                                <span class="visually-hidden">
                                    f:translate(id: 'remove.adult', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')}
                                </span>

                                <svg class="c-icon">
                                    <use xlink:href="#icon-add" />
                                </svg>
                            </button>
                        </div>
                    </li>
                    <li>
                        <label for="c-quicksearch__children-{node.identifier}">
                            {f:translate(id: 'children', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')}
                        </label>
                        <div class="c-quicksearch__add-remove"
                             data-amount-selection>

                            <button type="button"
                                    data-amount-selection.decrement>

                                <span class="visually-hidden">
                                    {f:translate(id: 'add.child', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')}
                                </span>
                                <svg class="c-icon">
                                    <use xlink:href="#icon-remove" />
                                </svg>
                            </button>
                            <input type="number"
                                   id="c-quicksearch__children-{node.identifier}"
                                   min="0"
                                   max="8"
                                   step="1"
                                   value="0"
                                   data-reveal="#c-quicksearch__ageselection-{node.identifier} > li"
                                   data-amount-selection.input
                                   name="number_child[]" />

                            <button type="button"
                                    data-amount-selection.increment>

                                <span class="visually-hidden">
                                    {f:translate(id: 'add.child', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')}
                                </span>
                                <svg class="c-icon">
                                    <use xlink:href="#icon-add" />
                                </svg>
                            </button>
                        </div>
                    </li>
                </ul>

                <ul id="c-quicksearch__ageselection-{node.identifier}"
                    class="c-quicksearch__ageselection list-reset">

                    <li>
                        <label for="c-quicksearch__childone-{node.identifier}">
                            {f:translate(id: 'age.child', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')} 1
                        </label>
                        <div class="c-select-wrapper">
                            <select id="c-quicksearch__childone-{node.identifier}"
                                    name="age_child1[]">

                                <option value="" selected="selected">-</option>
                                <option>0</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                                <option>8</option>
                                <option>9</option>
                                <option>10</option>
                                <option>11</option>
                                <option>12</option>
                                <option>13</option>
                                <option>14</option>
                                <option>15</option>
                                <option>16</option>
                                <option>17</option>
                            </select>
                        </div>
                    </li>
                    <li>
                        <label for="c-quicksearch__childtwo-{node.identifier}">
                            {f:translate(id: 'age.child', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')} 2
                        </label>
                        <div class="c-select-wrapper">
                            <select id="c-quicksearch__childtwo-{node.identifier}"
                                    name="age_child2[]">

                                <option value="" selected="selected">-</option>
                                <option>0</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                                <option>8</option>
                                <option>9</option>
                                <option>10</option>
                                <option>11</option>
                                <option>12</option>
                                <option>13</option>
                                <option>14</option>
                                <option>15</option>
                                <option>16</option>
                                <option>17</option>
                            </select>
                        </div>
                    </li>
                    <li>
                        <label for="c-quicksearch__childthree-{node.identifier}">
                            {f:translate(id: 'age.child', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')} 3
                        </label>
                        <div class="c-select-wrapper">
                            <select id="c-quicksearch__childthree-{node.identifier}"
                                    name="age_child3[]">

                                <option value="" selected="selected">-</option>
                                <option>0</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                                <option>8</option>
                                <option>9</option>
                                <option>10</option>
                                <option>11</option>
                                <option>12</option>
                                <option>13</option>
                                <option>14</option>
                                <option>15</option>
                                <option>16</option>
                                <option>17</option>
                            </select>
                        </div>
                    </li>
                    <li>
                        <label for="c-quicksearch__childfour-{node.identifier}">
                            {f:translate(id: 'age.child', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')} 4
                        </label>
                        <div class="c-select-wrapper">
                            <select id="c-quicksearch__childfour-{node.identifier}"
                                    name="age_child4[]">

                                <option value="" selected="selected">-</option>
                                <option>0</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                                <option>8</option>
                                <option>9</option>
                                <option>10</option>
                                <option>11</option>
                                <option>12</option>
                                <option>13</option>
                                <option>14</option>
                                <option>15</option>
                                <option>16</option>
                                <option>17</option>
                            </select>
                        </div>
                    </li>
                    <li>
                        <label for="c-quicksearch__childone-{node.identifier}">
                            {f:translate(id: 'age.child', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')} 5
                        </label>
                        <div class="c-select-wrapper">
                            <select id="c-quicksearch__childone-{node.identifier}"
                                    name="age_child5[]">

                                <option value="" selected="selected">-</option>
                                <option>0</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                                <option>8</option>
                                <option>9</option>
                                <option>10</option>
                                <option>11</option>
                                <option>12</option>
                                <option>13</option>
                                <option>14</option>
                                <option>15</option>
                                <option>16</option>
                                <option>17</option>
                            </select>
                        </div>
                    </li>
                    <li>
                        <label for="c-quicksearch__childtwo-{node.identifier}">
                            {f:translate(id: 'age.child', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')} 6
                        </label>
                        <div class="c-select-wrapper">
                            <select id="c-quicksearch__childtwo-{node.identifier}"
                                    name="age_child6[]">

                                <option value="" selected="selected">-</option>
                                <option>0</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                                <option>8</option>
                                <option>9</option>
                                <option>10</option>
                                <option>11</option>
                                <option>12</option>
                                <option>13</option>
                                <option>14</option>
                                <option>15</option>
                                <option>16</option>
                                <option>17</option>
                            </select>
                        </div>
                    </li>
                    <li>
                        <label for="c-quicksearch__childthree-{node.identifier}">
                            {f:translate(id: 'age.child', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')} 7
                        </label>
                        <div class="c-select-wrapper">
                            <select id="c-quicksearch__childthree-{node.identifier}"
                                    name="age_child7[]">

                                <option value="" selected="selected">-</option>
                                <option>0</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                                <option>8</option>
                                <option>9</option>
                                <option>10</option>
                                <option>11</option>
                                <option>12</option>
                                <option>13</option>
                                <option>14</option>
                                <option>15</option>
                                <option>16</option>
                                <option>17</option>
                            </select>
                        </div>
                    </li>
                    <li>
                        <label for="c-quicksearch__childfour-{node.identifier}">
                            {f:translate(id: 'age.child', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')} 8
                        </label>
                        <div class="c-select-wrapper">
                            <select id="c-quicksearch__childfour-{node.identifier}"
                                    name="age_child8[]">

                                <option value="" selected="selected">-</option>
                                <option>0</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                                <option>8</option>
                                <option>9</option>
                                <option>10</option>
                                <option>11</option>
                                <option>12</option>
                                <option>13</option>
                                <option>14</option>
                                <option>15</option>
                                <option>16</option>
                                <option>17</option>
                            </select>
                        </div>
                    </li>
                </ul>
                <div class="c-quicksearch__children-information" data-show-child-age-information>
                    <span>{f:translate(id: 'age.children.info', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')}</span>
                </div>
            </div>
        </fieldset>

        <input data-flatpickr.form-param
               id="c-quicksearch__searchparam-{node.identifier}"
               type="hidden"
               name="date_unknown"
               value="1">

        <input type="hidden"
               name="doSearch"
               value="1" />

        <input type="hidden"
               name="globalReset"
               value="1" />

        <input type="hidden"
               name="persistentParameters"
               value="1" />

        <input type="hidden"
               name="lang"
               value="{siteLang}" />

        <f:if condition="{serviceProviderFeature1}">
            <input type="hidden" name="serviceProviderFeatures[]" value="{serviceProviderFeature1}" />
        </f:if>

        <f:if condition="{serviceProviderFeature2}">
            <input type="hidden" name="serviceProviderFeatures[]" value="{serviceProviderFeature2}" />
        </f:if>

        <f:if condition="{locationID}">
            <input type="hidden" name="locationIDs[]" value="{locationID}" />
        </f:if>

        <button class="c-button c-quicksearch__submit"
                type="submit">

            {f:translate(id: 'search', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')}
        </button>
    </form>
</div>