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

<div class="c-quicksearch-wrapper" data-flatpickr-container>

    <form class="c-quicksearch{f:if(condition: quicksearchRoundEdges, then: ' c-quicksearch--round-edges')}"
          action="{link}/s"
          method="GET"
          title="{linkTitle}">

        <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}"
                        {f:if(condition: quicksearchLabel, then: "style='font-weight: 600;'", else: '')}>
                        <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-holidu-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="checkin"
                    >
                </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:if(condition: quicksearchLabel, then: "style='font-weight: 600;'", else: '')}>

                        {f:translate(id: 'date.departure', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')}
                    </label>
                    <input type="date"
                        data-holidu-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="checkout"
                    >
                </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:if(condition: quicksearchLabel, then: "style='font-weight: 600;'", else: '')}>

                {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:if(condition: quicksearchLabel, then: "style='font-weight: 600;'", else: '')}>
                            {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="adults"
                            >

                            <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:if(condition: quicksearchLabel, then: "style='font-weight: 600;'", else: '')}>
                            {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="children"
                            >

                            <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 hidden">

                    <li>
                        <label for="c-quicksearch__childone-{node.identifier}"
                        {f:if(condition: quicksearchLabel, then: "style='font-weight: 600;'", else: '')}>
                            {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="children_ages[]"
                                    required>

                                <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:if(condition: quicksearchLabel, then: "style='font-weight: 600;'", else: '')}>
                            {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="children_ages[]"
                                    required>

                                <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:if(condition: quicksearchLabel, then: "style='font-weight: 600;'", else: '')}>
                            {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="children_ages[]"
                                    required>

                                <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:if(condition: quicksearchLabel, then: "style='font-weight: 600;'", else: '')}>
                            {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="children_ages[]"
                                    required>

                                <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:if(condition: quicksearchLabel, then: "style='font-weight: 600;'", else: '')}>
                            {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="children_ages[]"
                                    required>

                                <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:if(condition: quicksearchLabel, then: "style='font-weight: 600;'", else: '')}>
                            {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="children_ages[]"
                                    required>

                                <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:if(condition: quicksearchLabel, then: "style='font-weight: 600;'", else: '')}>
                            {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="children_ages[]"
                                    required>

                                <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:if(condition: quicksearchLabel, then: "style='font-weight: 600;'", else: '')}>
                            {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="children_ages[]"
                                    required>

                                <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-holidu-flatpickr.form-param
               id="c-quicksearch__searchparam-{node.identifier}"
               type="hidden">

        <button
            class="c-button c-quicksearch__submit"
            type="submit"
            title="{f:translate(id: 'search', package: 'Newland.CityTheme', source: 'NodeTypes/Quicksearch')}"
        >

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