{{#if webAppMode}}
<div class="onboarding {{#ifEquals type "welcome"}}onboarding--welcome onboarding--active{{/ifEquals}} {{#ifEquals type "loginSignup"}}onboarding--login-signup{{/ifEquals}} {{#ifEquals type "travelDates"}}onboarding--travel-dates{{/ifEquals}} {{#ifEquals type "locationPermission"}} onboarding--location-permission {{/ifEquals}} {{#ifEquals type "notificationPermission"}} onboarding--notification-permission {{/ifEquals}}" data-my-ireland-url="{{myIrelandUrl}}" data-module="onboarding">
<div class="onboarding__inner">
<div class="onboarding__wrap">
<div class="onboarding__left">
<div class="onboarding__image">
{{#if image}}
<img src="{{image.src}}" alt="{{image.altText}}">
{{/if}}
</div>
</div>
<div class="onboarding__right">
<div class="onboarding__text">
<h2 class="onboarding__heading">{{heading}}</h2>
<p class="onboarding__subheading">{{{subHeading}}}</p>
{{#ifEquals type "welcome"}}
<p class="onboarding__description">{{{description}}}</p>
{{#if welcomeCta.url}}
<a class="button-p2" href="{{welcomeCta.url}}" target="{{welcomeCta.target}}">{{welcomeCta.text}}</a>
{{/if}}
{{/ifEquals}}
{{#if listContent}}
<div class="onboarding__list-content">
{{{listContent}}}
</div>
{{/if}}
</div>
</div>
</div>
<div class="onboarding__button-container">
{{#ifEquals type "welcome"}}
<button class="button-p1 button-p1--with-icon js-welcome-continue">{{continueButtonText}}</button>
{{/ifEquals}}
{{#ifEquals type "loginSignup"}}
<button class="button-p1 js-button-login">{{loginButtonText}}</button>
<button class="button-p2 js-button-signup">{{signupButtonText}}</button><br />
<button class="button-p3 button-p3--default js-login-button-skip-for-now">{{skipForNowButtonText}}</button>
{{/ifEquals}}
{{#ifEquals type "travelDates"}}
<button class="button-p1 js-button-trip-details">{{addTripButtonText}}</button><br />
<button class="button-p3 button-p3--default js-traveldates-idont-know-yet-button">{{iDontKnowYetButton}}</button>
{{/ifEquals}}
{{#ifEquals type "locationPermission"}}
<button class="button-p1 js-enable-location-access">{{enableLocationAccessButton}}</button><br />
<button class="button-p3 button-p3--default js-location-skip-for-now-button">{{skipForNowButtonText}}</button>
{{/ifEquals}}
{{#ifEquals type "notificationPermission"}}
<button class="button-p1 js-enable-notification-access">{{enableNotificationButton}}</button><br />
<button class="button-p3 button-p3--default js-notification-skip-for-now-button">{{skipForNowButtonText}}</button>
{{/ifEquals}}
</div>
</div>
{{#if modalContent}}
<div class="onboarding__modal js-onboarding-modal">
<div class="onboarding__modal-inner">
<div class="onboarding__modal-container">
<div class="onboarding__modal-header">
<a href="#" class="onboarding__modal-close onboarding__modal-close--arrow js-close-modal-button"><svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.79511 6.79265L2.86726 11.7205C2.85811 11.7296 2.84918 11.7389 2.84045 11.7483C2.82424 11.7626 2.80838 11.7775 2.79289 11.7929C2.40237 12.1835 2.40237 12.8166 2.79289 13.2072L7.79315 18.2074C8.18367 18.5979 8.81683 18.5979 9.20736 18.2074C9.59788 17.8169 9.59788 17.1837 9.20736 16.7932L5.91413 13.5L20.5003 13.5C21.0525 13.5 21.5003 13.0523 21.5003 12.5C21.5003 11.9477 21.0525 11.5 20.5003 11.5L5.91621 11.5L9.20932 8.20686C9.59985 7.81634 9.59985 7.18317 9.20932 6.79265C8.8188 6.40212 8.18563 6.40212 7.79511 6.79265Z" fill="white"/></svg></a>
{{#ifEquals type "loginSignup"}}
<h2 class="js-modal-header-login">{{modalContent.headingLogin}}</h2>
<h2 class="js-modal-header-signup">{{modalContent.headingSignUp}}</h2>
{{/ifEquals}}
{{#ifEquals type "travelDates" }}
<h2>{{modalContent.heading}}</h2>
{{/ifEquals}}
<a href="#" class="onboarding__modal-close js-close-modal-button"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.58929 26.2761C5.06859 25.7554 5.06859 24.9111 5.58929 24.3904L24.2554 5.72432C24.7761 5.20363 25.6203 5.20363 26.141 5.72432C26.6617 6.24502 26.6617 7.08924 26.141 7.60994L7.47491 26.2761C6.95421 26.7968 6.10999 26.7968 5.58929 26.2761Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.58942 5.72381C6.11012 5.20312 6.95434 5.20312 7.47504 5.72381L26.1412 24.3899C26.6619 24.9106 26.6619 25.7549 26.1412 26.2756C25.6205 26.7963 24.7762 26.7963 24.2555 26.2756L5.58942 7.60943C5.06872 7.08873 5.06872 6.24451 5.58942 5.72381Z" fill="white"/></svg></a>
</div>
<div class="onboarding__modal-body">
{{#ifEquals type "loginSignup" }}
{{!-- Signup form --}}
<div class="onboarding__modal-content onboarding__modal-content--active onboarding__modal-content--signup js-onboarding-signup">
{{> @auth0 id='onboarding-signup' registerText=modalContent.registerText firstNameText=modalContent.firstNameText lastNameText=modalContent.lastNameText showLogin='false' showSignUp='true' newsletterText=modalContent.newsletterText termsText=modalContent.termsText redirectUrl=modalContent.redirectUrl authDomain=modalContent.authDomain authClientId=modalContent.authClientId destinationUrl=modalContent.destinationUrl}}
</div>
{{!-- Login form --}}
<div class="onboarding__modal-content js-onboarding-login">
{{> @auth0 id='onboarding-login' showLogin='true' showSignUp='false' authDomain=modalContent.authDomain authClientId=modalContent.authClientId redirectUrl=modalContent.redirectUrl destinationUrl=modalContent.destinationUrl }}
</div>
{{/ifEquals}}
{{#ifEquals type "travelDates" }}
<div class="onboarding__travel-form">
<div class="onboarding__travel-input-wrapper">
<div class="onboarding__travel-row">
<label for="arrivalDate" class="onboarding__travel-label">{{modalContent.arrivalDateLabel}}</label>
<input type="date" id="arrivalDate" class="travel-times__input-date js-travel-input js-travel-arrival">
</div>
<div class="onboarding__travel-row">
<label for="departureDate" class="onboarding__travel-label">{{modalContent.departureDateLabel}}</label>
<input type="date" id="departureDate" class="travel-times__input-date js-travel-input js-travel-departure">
</div>
</div>
<div class="onboarding__travel-row">
<button class="button-p1 js-travel-submit disabled">{{modalContent.submitButtonText}}</button>
</div>
</div>
{{/ifEquals}}
</div>
</div>
</div>
</div>
{{/if}}
{{#ifEquals type "locationPermission"}}
<div class="location-access-modal js-onboarding-enable-loc-access">
<div class="location-access-modal__inner">
<div class="location-access-modal__header">
<a href="#" class="location-access-modal__close-icon js-close-modal-button"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.19148 19.7071C3.80096 19.3166 3.80096 18.6834 4.19148 18.2929L18.1911 4.29331C18.5816 3.90278 19.2148 3.90278 19.6053 4.29331C19.9958 4.68383 19.9958 5.317 19.6053 5.70752L5.6057 19.7071C5.21517 20.0976 4.58201 20.0976 4.19148 19.7071Z" fill="#111317"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4.19133 4.29304C4.58186 3.90252 5.21502 3.90252 5.60554 4.29304L19.6051 18.2926C19.9957 18.6832 19.9957 19.3163 19.6051 19.7068C19.2146 20.0974 18.5814 20.0974 18.1909 19.7068L4.19133 5.70726C3.80081 5.31673 3.80081 4.68357 4.19133 4.29304Z" fill="#111317"/></svg></a>
{{{modalMapIcon}}}
<h3 class="general-content">{{defaultLocationAccessModal.heading}}</h3>
<h3 class="ios-content">{{iosLocationAccessModal.heading}}</h3>
</div>
<div class="location-access-modal__content location-access-modal__content--general-content">
<div class="location-access-modal__list">
<ul>
<li>{{{defaultLocationAccessModal.step1}}}</li>
<li>{{{defaultLocationAccessModal.step2}}}</li>
<li>{{{defaultLocationAccessModal.step3}}}</li>
</ul>
</div>
</div>
<div class="location-access-modal__content location-access-modal__content--ios-content">
<div class="location-access-modal__list">
<ul>
<li>{{{iosLocationAccessModal.step1}}}</li>
<li class="list-image">
<img src="{{iosLocationAccessModal.step1Image.src}}" alt="{{iosLocationAccessModal.step1Image.altText}}">
</li>
<li>{{{iosLocationAccessModal.step2}}}</li>
<li class="list-image">
<img src="{{iosLocationAccessModal.step2Image.src}}" alt="{{iosLocationAccessModal.step2Image.altText}}">
</li>
<li>{{{iosLocationAccessModal.step3}}}</li>
<li class="list-image">
<img src="{{iosLocationAccessModal.step3Image.src}}" alt="{{iosLocationAccessModal.step3Image.altText}}">
</li>
<li>{{{iosLocationAccessModal.step4}}}</li>
<li class="list-image">
<img src="{{iosLocationAccessModal.step4Image.src}}" alt="{{iosLocationAccessModal.step4Image.altText}}">
</li>
</ul>
</div>
</div>
</div>
</div>
{{/ifEquals}}
</div>
{{/if}}