<div class="tabs-wrapper route-search" data-module="routeSearch">
    <div class="grid-container">
        <div class="grid-x">
            <div class="cell medium-10 medium-offset-1">
                <div class="tab__tabs">
                    <div data-module="tabs" class="tabs">
                        <button class="button-tab js-button-tab button-tab--with-icon button-tab--flights active" role="button" data-target="flights" data-type="flights">Flights</button>
                        <button class="button-tab js-button-tab button-tab--with-icon button-tab--ferries " role="button" data-target="ferries" data-type="ferries">Ferries</button>
                    </div>
                </div>
                <div class="route tab__section" data-search-api-endpoint="/data/flights-data.json" data-show-your-location="true" data-flight-from-text="From" data-flight-stops-text="stops" data-flight-direct-text="direct" data-flight-cta-text="Book on" data-flight-time-text="h" data-tab-section-id="flights">
                    <section class="grid-x">
                        <div class="route__tab-content cell medium-8 medium-offset-2 large-10 large-offset-1">
                            <h2 class="route__title">Find a flight route</h2>
                            <div class="grid-x route__input-container">
                                <div class="cell medium-12 large-auto route__input">
                                    <label text="From" class="label is-default">From</label>
                                    <input type="text" id="route-from-flights" placeholder="Your location" class="input-text route-from is-default js-route-from" autocomplete="off" data-endpoint="/data/airports-data.json" data-geotext="Your location" />
                                    <div class="route__list"></div>
                                </div>
                                <div class="cell medium-12 large-auto route__input">
                                    <label text="To" class="label is-default">To</label>
                                    <input type="text" id="route-to-flights" placeholder="Destination" class="input-text route-to is-default" autocomplete="off" data-options='[{&quot;label&quot;:&quot;Ireland&quot;,&quot;value&quot;:&quot;IRE&quot;},{&quot;label&quot;:&quot;City of Derry Airport&quot;,&quot;value&quot;:&quot;LDY&quot;},{&quot;label&quot;:&quot;Belfast International Airport&quot;,&quot;value&quot;:&quot;BFS&quot;},{&quot;label&quot;:&quot;George Best Belfast City Airport&quot;,&quot;value&quot;:&quot;BHD&quot;},{&quot;label&quot;:&quot;Dublin Airport&quot;,&quot;value&quot;:&quot;DUB&quot;},{&quot;label&quot;:&quot;Cork Airport&quot;,&quot;value&quot;:&quot;ORK&quot;},{&quot;label&quot;:&quot;Kerry Airport&quot;,&quot;value&quot;:&quot;KIR&quot;},{&quot;label&quot;:&quot;Shannon Airport&quot;,&quot;value&quot;:&quot;SNN&quot;},{&quot;label&quot;:&quot;Ireland West Airport Knock&quot;,&quot;value&quot;:&quot;NOC&quot;},{&quot;label&quot;:&quot;Donegal Airport&quot;,&quot;value&quot;:&quot;CFN&quot;}]' readonly="readonly" />
                                    <div class="route__list"></div>
                                </div>
                                <div class="cell medium-12 large-auto route__input js-date-picker">
                                    <div data-module='datepicker' class='datepicker' data-offset='0' data-min-date-offset="3" data-max-day='12' data-max-month='07' data-max-year='2021' data-monday='Mo' data-tuesday='Tu' data-wednesday='We' data-thursday='Th' data-friday='Fr' data-saturday='Sa' data-sunday='Su' data-january='January' data-february='February' data-march='March' data-april='April' data-may='May' data-june='June' data-july='July' data-august='August' data-september='September' data-october='October' data-november='November' data-december='December'>
                                        <label class="label" for="datepicker">Depart</label>
                                        <input type="text" class="input-date" readonly max="2021-07-12" placeholder="Depart" value="" id="datepicker" />
                                    </div>
                                </div>
                            </div>
                            <div class="grid-x">
                                <div class="cell route__cta">
                                    <a href="flights" class="button-p1 button-p1--with-icon-search disabled route__search-button  " role="button">Search</a>
                                </div>
                                <div class="route__footer cell">
                                    <p class="route__footer-disclaimer">Searching for economy seats for 1 person across any flight operator at any time of day. Additional search criteria can be included on Skyscanner.com</p>
                                </div>
                                <p class="route__footer-error js-error">No results found.</p>
                            </div>
                        </div>
                        <div class="route-search-results cell">
                            <div class="route-search-results__loader">
                                <div class="loader">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                            <div class="route-search-results__results"></div>
                        </div>
                    </section>
                </div>
                <div class="route tab__section" data-search-api-endpoint="/components/preview/cp-ferry-route-cards--default" data-show-your-location="false" data-flight-from-text="" data-flight-stops-text="" data-flight-direct-text="" data-flight-cta-text="" data-flight-time-text="" data-tab-section-id="ferries">
                    <section class="grid-x">
                        <div class="route__tab-content cell medium-8 medium-offset-2 large-10 large-offset-1">
                            <h2 class="route__title">Find a ferry route</h2>
                            <div class="grid-x route__input-container">
                                <div class="cell medium-12 large-auto route__input">
                                    <label text="From" class="label is-default">From</label>
                                    <input type="text" id="route-from-ferries" placeholder="Your location" class="input-text route-from is-default js-route-from" autocomplete="off" data-options='[{&quot;label&quot;:&quot;United Kingdom&quot;,&quot;value&quot;:&quot;UK&quot;},{&quot;label&quot;:&quot;Liverpool&quot;,&quot;value&quot;:&quot;LIV&quot;},{&quot;label&quot;:&quot;France&quot;,&quot;value&quot;:&quot;FR&quot;}]' readonly="readonly" data-geotext="Your location" />
                                    <div class="route__list"></div>
                                </div>
                                <div class="cell medium-12 large-auto route__input">
                                    <label text="To" class="label is-default">To</label>
                                    <input type="text" id="route-to-ferries" placeholder="Destination" class="input-text route-to is-default" autocomplete="off" data-options='[{&quot;label&quot;:&quot;Ireland&quot;,&quot;value&quot;:&quot;&quot;},{&quot;label&quot;:&quot;Ballycastle&quot;,&quot;value&quot;:&quot;BAL&quot;},{&quot;label&quot;:&quot;Larne&quot;,&quot;value&quot;:&quot;LAR&quot;},{&quot;label&quot;:&quot;Belfast&quot;,&quot;value&quot;:&quot;BFS&quot;},{&quot;label&quot;:&quot;Dublin&quot;,&quot;value&quot;:&quot;DUB&quot;},{&quot;label&quot;:&quot;Rosslare&quot;,&quot;value&quot;:&quot;ROS&quot;},{&quot;label&quot;:&quot;Cork&quot;,&quot;value&quot;:&quot;ORK&quot;}]' readonly="readonly" />
                                    <div class="route__list"></div>
                                </div>
                            </div>
                            <div class="grid-x">
                                <div class="cell route__cta">
                                    <a href="ferries" class="button-p1 button-p1--with-icon-search disabled route__search-button  " role="button">Search</a>
                                </div>
                                <div class="route__footer cell">
                                    <p class="route__footer-disclaimer">Searching for routes across any ferry operator at any time of day.</p>
                                </div>
                                <p class="route__footer-error js-error"></p>
                            </div>
                        </div>
                        <div class="route-search-results cell">
                            <div class="route-search-results__loader">
                                <div class="loader">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                            <div class="route-search-results__results"></div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="tabs-wrapper route-search" data-module="routeSearch">
    <div class="grid-container">
        <div class="grid-x">
            <div class="cell medium-10 medium-offset-1">
                <div class="tab__tabs">
                    {{> @cp-tabs-buttons tabs}}
                </div>
                {{#each routes}}
                {{> @cp-route-travel}}
                {{/each}}
            </div>
        </div>
    </div>
</div>
{
  "tabs": [
    {
      "icon": "flights",
      "text": "Flights",
      "target": "flights",
      "active": true,
      "dataAttributes": [
        {
          "name": "type",
          "value": "flights"
        }
      ]
    },
    {
      "icon": "ferries",
      "text": "Ferries",
      "target": "ferries",
      "active": false,
      "dataAttributes": [
        {
          "name": "type",
          "value": "ferries"
        }
      ]
    }
  ],
  "routes": [
    {
      "id": "flights",
      "title": "Find a flight route",
      "showYourLocation": true,
      "searchApiEndpoint": "/data/flights-data.json",
      "flight": {
        "fromText": "From",
        "stopsText": "stops",
        "directText": "direct",
        "ctaText": "Book on",
        "timeText": "h"
      },
      "from": {
        "label": "From",
        "geolocateText": "Your location",
        "placeholder": "Your location",
        "endpoint": "/data/airports-data.json"
      },
      "to": {
        "label": "To",
        "placeholder": "Destination",
        "options": [
          {
            "label": "Ireland",
            "value": "IRE"
          },
          {
            "label": "City of Derry Airport",
            "value": "LDY"
          },
          {
            "label": "Belfast International Airport",
            "value": "BFS"
          },
          {
            "label": "George Best Belfast City Airport",
            "value": "BHD"
          },
          {
            "label": "Dublin Airport",
            "value": "DUB"
          },
          {
            "label": "Cork Airport",
            "value": "ORK"
          },
          {
            "label": "Kerry Airport",
            "value": "KIR"
          },
          {
            "label": "Shannon Airport",
            "value": "SNN"
          },
          {
            "label": "Ireland West Airport Knock",
            "value": "NOC"
          },
          {
            "label": "Donegal Airport",
            "value": "CFN"
          }
        ]
      },
      "button": {
        "text": "Search"
      },
      "datepicker": {
        "label": "Depart",
        "id": "datepicker",
        "name": "datepicker",
        "value": "",
        "placeholder": "Depart",
        "offset": 0,
        "max": {
          "year": "2021",
          "month": "07",
          "day": "12"
        },
        "days": {
          "sunday": "Su",
          "monday": "Mo",
          "tuesday": "Tu",
          "wednesday": "We",
          "thursday": "Th",
          "friday": "Fr",
          "saturday": "Sa"
        },
        "months": {
          "january": "January",
          "february": "February",
          "march": "March",
          "april": "April",
          "may": "May",
          "june": "June",
          "july": "July",
          "august": "August",
          "september": "September",
          "october": "October",
          "november": "November",
          "december": "December"
        }
      },
      "disclaimer": "Searching for economy seats for 1 person across any flight operator at any time of day. Additional search criteria can be included on Skyscanner.com",
      "error": "No results found."
    },
    {
      "id": "ferries",
      "title": "Find a ferry route",
      "showYourLocation": false,
      "searchApiEndpoint": "/components/preview/cp-ferry-route-cards--default",
      "from": {
        "label": "From",
        "geolocateText": "Your location",
        "placeholder": "Your location",
        "options": [
          {
            "label": "United Kingdom",
            "value": "UK"
          },
          {
            "label": "Liverpool",
            "value": "LIV"
          },
          {
            "label": "France",
            "value": "FR"
          }
        ]
      },
      "to": {
        "label": "To",
        "placeholder": "Destination",
        "options": [
          {
            "label": "Ireland",
            "value": ""
          },
          {
            "label": "Ballycastle",
            "value": "BAL"
          },
          {
            "label": "Larne",
            "value": "LAR"
          },
          {
            "label": "Belfast",
            "value": "BFS"
          },
          {
            "label": "Dublin",
            "value": "DUB"
          },
          {
            "label": "Rosslare",
            "value": "ROS"
          },
          {
            "label": "Cork",
            "value": "ORK"
          }
        ]
      },
      "button": {
        "text": "Search"
      },
      "disclaimer": "Searching for routes across any ferry operator at any time of day."
    }
  ]
}

There are no notes for this item.