CINXE.COM
Booking Engine
<!DOCTYPE html> <!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]--> <head> <title>Booking Engine</title> <meta charset="utf-8"> <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> <link rel="apple-touch-icon" sizes="57x57" href="/Content/favicons/apple-touch-icon-57x57.png?v=a1"> <link rel="apple-touch-icon" sizes="60x60" href="/Content/favicons/apple-touch-icon-60x60.png?v=a1"> <link rel="apple-touch-icon" sizes="72x72" href="/Content/favicons/apple-touch-icon-72x72.png?v=a1"> <link rel="apple-touch-icon" sizes="76x76" href="/Content/favicons/apple-touch-icon-76x76.png?v=a1"> <link rel="apple-touch-icon" sizes="114x114" href="/Content/favicons/apple-touch-icon-114x114.png?v=a1"> <link rel="apple-touch-icon" sizes="120x120" href="/Content/favicons/apple-touch-icon-120x120.png?v=a1"> <link rel="apple-touch-icon" sizes="144x144" href="/Content/favicons/apple-touch-icon-144x144.png?v=a1"> <link rel="apple-touch-icon" sizes="152x152" href="/Content/favicons/apple-touch-icon-152x152.png?v=a1"> <link rel="apple-touch-icon" sizes="180x180" href="/Content/favicons/apple-touch-icon-180x180.png?v=a1"> <link rel="icon" type="image/png" href="/Content/favicons/favicon-32x32.png?v=a1" sizes="32x32"> <link rel="icon" type="image/png" href="/Content/favicons/favicon-194x194.png?v=a1" sizes="194x194"> <link rel="icon" type="image/png" href="/Content/favicons/favicon-96x96.png?v=a1" sizes="96x96"> <link rel="icon" type="image/png" href="/Content/favicons/android-chrome-192x192.png?v=a1" sizes="192x192"> <link rel="icon" type="image/png" href="/Content/favicons/favicon-16x16.png?v=a1" sizes="16x16"> <link rel="manifest" href="/Content/favicons/manifest.json?v=a1"> <link rel="mask-icon" href="/Content/favicons/safari-pinned-tab.svg?v=a1" color="#5bbad5"> <link rel="shortcut icon" href="/Content/favicons/favicon.ico?v=a1"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileImage" content="/Content/favicons/mstile-144x144.png?v=a1"> <meta name="msapplication-config" content="/Content/favicons/browserconfig.xml?v=a1"> <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="/Content/css/jquery-ui.min.css" /> <link rel="stylesheet" href="/Scripts/bootstrap/css/bootstrap.min.css" /> <link rel="stylesheet" href="/Content/css/fontawesome-5/css/all.min.css" /> <link rel="stylesheet" href="/Content/css/perfect-scrollbar.css" /> <link rel="stylesheet" href="/Content/css/be-modal.css" /> <link rel="stylesheet" href="/Content/css/select2.css" /> <link rel="stylesheet" href="/Content/css/intlTelInput.css" /> <link rel="stylesheet" href="/Content/css/hotel-datepicker.css" /> <link rel="stylesheet" href="/Content/less/main.less?id=RwLSNfQB4T8LeBKchS1FAqBpPmDEsodK" /> <link rel="stylesheet" href="/Content/less/responsive.less?id=RwLSNfQB4T8LeBKchS1FAqBpPmDEsodK" /> <link rel="stylesheet" href="/Content/less/footer.less?id=RwLSNfQB4T8LeBKchS1FAqBpPmDEsodK" /> <link rel="stylesheet" href="/Content/less/footer.less?id=RwLSNfQB4T8LeBKchS1FAqBpPmDEsodK" /> <link rel="stylesheet" href="/Content/less/footer.less?id=RwLSNfQB4T8LeBKchS1FAqBpPmDEsodK" /> <link rel="stylesheet" href="/Content/css/perfect-scrollbar.css" /> <link rel="stylesheet" href="/Content/css/stripe.css" /> <link rel="stylesheet" href="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.49.6/adyen.css" integrity="sha384-k6qYnmoHaucEm97eQQAs3MK5e44JQ2sksrue2tfdDOnnedKzc0VYQwxzdYWZu8Mj" crossorigin="anonymous"> <!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <!--[if lt IE 9]> <script src="/Scripts/html5shiv.js"></script> <![endif]--> <script> window.onerror = function (e) { console.error(e) } </script> <!-- Hotjar Tracking Code for https://be-new-dev.frontdeskmaster.com/ --> <script> (function (h, o, t, j, a, r) { h.hj = h.hj || function () { (h.hj.q = h.hj.q || []).push(arguments) }; h._hjSettings = { hjid: 1695369, hjsv: 6 }; a = o.getElementsByTagName('head')[0]; r = o.createElement('script'); r.async = 1; r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv; a.appendChild(r); })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv='); </script> <style> .main-container p { margin: 0px !important; } </style> </head> <body> <header class="header-container" id="booking-engine-header" data-bind="template: { name: 'tpl-booking-engine-header', data: HeaderViewModel }"></header> <div class="container"> <div class="fa-tripadvisor"> </div> <div class="content"> <div id="booking-engine-breadcrumb" data-bind="template: { name: 'tpl-booking-engine-breadcrumb', data: TopMenuViewModel }, visible: TopMenuViewModel.IsVisible" class="breadcrumbs"> </div> <!-- ko template: { name: 'tpl-booking-engine-booking-thanks', data: BookingThanksViewModel } --><!-- /ko --> <!-- ko template: { name: 'tpl-booking-engine-booking-cancelled', data: BookingDetailsViewModel } --><!-- /ko --> <div id="booking-engine-filter" data-bind="template: { name: 'tpl-booking-engine-filter', data: FilterViewModel, afterRender: FilterViewModel.AfterRender }, visible: FilterViewModel.IsVisible"></div> <!-- ko template: { name: ContentController.TemplateContext().TemplateName, data: ContentController.TemplateContext().DataContext, afterRender: ContentController.AfterRender } --><!-- /ko --> </div> <div id="booking-engine-footer" data-bind="template: { name: 'tpl-booking-engine-footer', data: FooterViewModel }"></div> </div> <div id="be-cooke-policy" data-bind="template: { name: 'tpl-booking-engine-cooke-policy', data: CookePolicyViewModel}"></div> <div id="fb-root"></div> <script type="text/template" id="tpl-controls-dropdown"> <div class="be-dropdown"> <button class="btn btn-link" data-bind="visible: SelectedValue(), click: OnClear, i18n: $root.D.Terms.ClearSelection">Clear selection</button> <div class="dropdown" data-bind="click: ToggleContent"> <span class="comment" data-bind="text: CommentText()"></span> <!-- ko if: $parent.IsCaptionAsHtml --> <h5 class="displayed-value" data-bind="html: SelectedCaption"></h5> <!-- /ko --> <!-- ko ifnot: $parent.IsCaptionAsHtml --> <h5 class="displayed-value" data-bind="text: SelectedCaption"></h5> <!-- /ko --> <div class="dropdown-content" data-bind="foreach: Items, visible: IsContentVisible"> <!-- ko if: $parent.IsCaptionAsHtml --> <p data-bind="html: Caption, attr: { 'data-opt-val': Value }, click: $parent.OnSelect"></p> <!-- /ko --> <!-- ko ifnot: $parent.IsCaptionAsHtml --> <p data-bind="text: Caption, attr: { 'data-opt-val': Value }, click: $parent.OnSelect"></p> <!-- /ko --> </div> </div> </div> </script> <script type="text/template" id="tpl-controls-spinner"> <div class="spinner" data-bind="css: { 'sm' : IsSmall }"> <div class="spinner-content"> <div class="spinner-value" data-bind="text: SpinnerValue"></div> <div class="spinner-text" data-bind="text: SpinnerText()"> Adult </div> <div class="spinner-buttons"> <div class="spinner-button-decrease" data-bind="click: DecreaseValue"> <i class="fas fa-minus"></i> </div> <div class="spinner-button-increase" data-bind="click: IncreaseValue"> <i class="fas fa-plus"></i> </div> </div> </div> </div> </script> <script type="text/template" id="tpl-controls-extra-button"> <div class="extra-button-container"> <!-- ko if: $parent.IsFreeItem --> <div class="extra-button" data-bind="click: OnSelect , css: { 'selected': IsSelected }"> <span class="comment" data-bind="text: CommentText(), visible: IsSelected"></span> <h5 class="displayed-value" data-bind="text: SelectedCaption "></h5> </div> <!-- /ko --> <!-- ko ifnot: $parent.IsFreeItem --> <div class="extra-button" data-bind="click: OnSelect, css: { 'selected': IsSelected }"> <span class="comment" data-bind="text: CommentText(), visible: IsSelected"></span> <h5 class="displayed-value" data-bind="text: SelectedCaption "></h5> </div> <!-- /ko --> <button class="btn btn-link clear-selection" , data-bind="visible: IsSelected, click: OnClear, i18n: $root.D.Terms.ClearSelection">Clear selection</button> </div> </script> <script type="text/template" id="tpl-controls-tooltip-button"> <button class="btn btn-link" data-bind="event: { mouseover: OnToggle, mouseout: OnToggle }"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> <g fill="#4A90E2" fill-rule="nonzero"> <path d="M8.286 6.452c.042.083.083.165.125.226.041.062.104.123.146.185.062.061.124.123.208.184.062.041.145.103.25.123a1.3 1.3 0 0 0 .541.103c.083 0 .187 0 .27-.02.084-.021.167-.042.23-.083h.02c.084-.04.167-.082.25-.143.063-.041.125-.103.188-.164l.02-.02c.063-.062.104-.124.146-.185.042-.062.083-.123.104-.206 0-.02 0-.02.021-.04.042-.083.062-.185.083-.267.021-.082.021-.185.021-.267 0-.082 0-.184-.02-.266a1.883 1.883 0 0 0-.084-.267 1.163 1.163 0 0 0-.25-.369l-.041-.04c-.063-.062-.125-.103-.209-.165-.083-.041-.145-.082-.229-.123a1.186 1.186 0 0 0-.25-.082c-.104-.02-.187-.02-.27-.02-.083 0-.188 0-.27.02-.084.02-.167.041-.25.082h-.021c-.084.041-.167.082-.23.123-.083.062-.145.103-.208.164-.062.062-.125.123-.166.185a2.227 2.227 0 0 0-.125.225 1.144 1.144 0 0 0-.083.246c-.021.103-.021.185-.021.267 0 .082 0 .184.02.266.021.164.063.246.084.328zM11.36 13.396h-.407V8.682c0-.27-.194-.5-.459-.5H8.641c-.247 0-.46.211-.46.5v1.039c0 .27.195.5.46.5h.37v3.194h-.37c-.247 0-.46.212-.46.5v1.04c0 .269.195.5.46.5h2.718c.247 0 .46-.212.46-.5v-1.04c0-.288-.213-.52-.46-.52z" /> <path d="M10 0C4.479 0 0 4.479 0 10s4.479 10 10 10 10-4.479 10-10S15.521 0 10 0zm0 18.684c-4.79 0-8.684-3.894-8.684-8.684 0-4.79 3.894-8.684 8.684-8.684 4.79 0 8.684 3.894 8.684 8.684 0 4.79-3.894 8.684-8.684 8.684z" /> </g> </svg> <span class="be-tooltip" data-bind="visible: IsVisible(), text: Text"> There is a 0,75 EUR city tax per person per night, which is not included in the price (max 7 nights). People under 16 years old are exempt. </span> </button> </script> <script type="text/template" id="tpl-booking-engine-header"> <div class="container"> <div class="header-menu"> <div class="header-logo"> <a target="_blank" data-bind="attr: { href: LogoNavigation}"> <img data-bind="attr: { src: LogoUrl }" /> <div class="title"> <p data-bind="text: PropertyName"></p> <p class="description" data-bind="i18n: $root.D.Terms.BookYourStay">Book your stay</p> </div> </a> </div> <div class="header-list"> <ul> <li class="languages-list" data-bind="template: { name: 'tpl-booking-engine-header-dropdown', data: LanguageDropdown }, visible: !LanguageDropdown.Disabled(), style: { opacity: LanguageDropdown.Disabled() ? 0.5 : 1 }, event: { mouseover: LanguageDropdown.ShowContent, mouseout: LanguageDropdown.HideContent }"></li> <li class="currencies-list" data-bind="template: { name: 'tpl-booking-engine-header-dropdown', data: CurrencyDropdown }, visible: !CurrencyDropdown.Disabled(), style: { opacity: CurrencyDropdown.Disabled() ? 0.5 : 1 }, event: { mouseover: CurrencyDropdown.ShowContent, mouseleave: CurrencyDropdown.HideContent }"></li> </ul> <div id="session" data-bind="visible: TimeRemaining() <= 0"> <div class="session-popup"> <h3 data-bind="i18n: D.Terms.SessionPopupText">Session end. Refresh page.</h3> <button class="btn btn-success be-modal-close" data-bind="click: RefreshPage, i18n: D.Terms.SessionButtonText"></button> </div> <div class="session-overlay" data-bind="visible: TimeRemaining() <= 0"></div> </div> <div class="session-info" data-bind="visible: TimeRemaining() > 0 && ShowSessionInfo()"> <h1><span data-bind="text: FormattedTime"></span></h1> </div> </div> </div> </div> </script> <script type="text/template" id="tpl-booking-engine-header-dropdown"> <a href="#"><!-- ko text: SelectedCaption --><!-- /ko --> <i class="fa fa-caret-down"></i></a> <ul data-bind="foreach: Items"> <li> <a href="#" data-bind="text: Caption, click: function(item, target) { if (Value != '---') $parent.OnSelect(item, target); }"></a> </li> </ul> </script> <script type="text/template" id="tpl-booking-engine-top-menu"> <ul data-bind="foreach: Steps"> <li data-bind="attr: { 'class': Class }, css: { 'custom-bg only-small': IsCurrent() }"> <a href="#" data-bind="text: Caption, click: $parent.Click, css: { 'disabled-button': !IsEnabled() }"></a> </li> </ul> </script> <script type="text/template" id="tpl-booking-engine-breadcrumb"> <div class="inner"> <ul data-bind="foreach: Steps" class="cf"> <li data-bind="attr: { 'class': Class }, css: { 'active': IsActive(), 'finished': IsFinished() }"> <a href="#" data-bind="click: $parent.Click, css: { 'disabled-button': !IsActive() && !IsFinished() }"> <span data-bind="text: ($index() + 1)"></span> <span data-bind="text: Caption"></span> </a> </li> </ul> </div> </script> <script type="text/template" id="tpl-booking-engine-filter"> <div class="white-box hostel-name cf" data-bind="visible: IsHostelSelected, css: { 'selected': IsHostelSelected() }" style="display: none;"> <div class="row"> <div class="col-lg-5 col-md-6 col-sm-12 col-12" data-bind="visible: IsHostelSelected()"> <div class="selected-hostel"> <img class="hostel" data-bind="attr: { src: CurrentHostel() && CurrentHostel().MainPhoto() ? CurrentHostel().MainPhoto() : 'Content/img/ph-main.png' }" /> <div class="hostel-buttons pt-2 pl-2"> <p class="mb-3" data-bind="i18n: D.Terms.AboutProperty">About the hostel</p> <div> <button class="btn btn-link" data-bind="event: { click: function(data, event, id) { ShowHostelDetails(data, event, '#map') }}"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="26" viewBox="0 0 20 26"> <g fill="#4A90E2" fill-rule="nonzero"> <path d="M9.995.546C4.485.546 0 5.101 0 10.696a10.138 10.138 0 0 0 .246 2.244 10.1 10.1 0 0 0 .669 2.001c1.077 2.575 3.445 6.53 8.64 10.765a.703.703 0 0 0 .89 0c5.19-4.236 7.563-8.19 8.64-10.765a9.987 9.987 0 0 0 .737-2.34c.115-.627.178-1.269.178-1.906C19.99 5.101 15.504.546 9.995.546zm8.426 11.805c0 .01-.005.021-.005.032-.005.027-.02.106-.047.228v.01a8.516 8.516 0 0 1-.58 1.731c-.005.006-.005.016-.01.021-.978 2.352-3.121 5.94-7.784 9.852-4.663-3.912-6.806-7.5-7.784-9.852-.005-.005-.005-.015-.01-.02a9.084 9.084 0 0 1-.58-1.731v-.01c-.032-.123-.042-.202-.048-.229 0-.01-.005-.021-.005-.037a8.797 8.797 0 0 1-.157-1.656c0-4.804 3.853-8.716 8.584-8.716 4.73 0 8.583 3.912 8.583 8.716a8.77 8.77 0 0 1-.157 1.661z" /> <path d="M10 3.711c-3.391 0-6.154 2.842-6.154 6.33S6.61 16.37 10 16.37s6.154-2.842 6.154-6.33S13.39 3.71 10 3.71zm0 11.252c-2.641 0-4.785-2.21-4.785-4.922 0-2.711 2.15-4.922 4.785-4.922 2.636 0 4.785 2.21 4.785 4.922 0 2.711-2.144 4.922-4.785 4.922z" /> </g> </svg> <span data-bind="i18n: $parent.D.Terms.Map"></span> </button> <button class="btn btn-link" data-bind="event: { click: function(data, event, id) { ShowHostelDetails(data, event, '#info') }}"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> <g fill="#4A90E2" fill-rule="nonzero"> <path d="M8.286 6.452c.042.083.083.165.125.226.041.062.104.123.146.185.062.061.124.123.208.184.062.041.145.103.25.123a1.3 1.3 0 0 0 .541.103c.083 0 .187 0 .27-.02.084-.021.167-.042.23-.083h.02c.084-.04.167-.082.25-.143.063-.041.125-.103.188-.164l.02-.02c.063-.062.104-.124.146-.185.042-.062.083-.123.104-.206 0-.02 0-.02.021-.04.042-.083.062-.185.083-.267.021-.082.021-.185.021-.267 0-.082 0-.184-.02-.266a1.883 1.883 0 0 0-.084-.267 1.163 1.163 0 0 0-.25-.369l-.041-.04c-.063-.062-.125-.103-.209-.165-.083-.041-.145-.082-.229-.123a1.186 1.186 0 0 0-.25-.082c-.104-.02-.187-.02-.27-.02-.083 0-.188 0-.27.02-.084.02-.167.041-.25.082h-.021c-.084.041-.167.082-.23.123-.083.062-.145.103-.208.164-.062.062-.125.123-.166.185a2.227 2.227 0 0 0-.125.225 1.144 1.144 0 0 0-.083.246c-.021.103-.021.185-.021.267 0 .082 0 .184.02.266.021.164.063.246.084.328zM11.36 13.396h-.407V8.682c0-.27-.194-.5-.459-.5H8.641c-.247 0-.46.211-.46.5v1.039c0 .27.195.5.46.5h.37v3.194h-.37c-.247 0-.46.212-.46.5v1.04c0 .269.195.5.46.5h2.718c.247 0 .46-.212.46-.5v-1.04c0-.288-.213-.52-.46-.52z" /> <path d="M10 0C4.479 0 0 4.479 0 10s4.479 10 10 10 10-4.479 10-10S15.521 0 10 0zm0 18.684c-4.79 0-8.684-3.894-8.684-8.684 0-4.79 3.894-8.684 8.684-8.684 4.79 0 8.684 3.894 8.684 8.684 0 4.79-3.894 8.684-8.684 8.684z" /> </g> </svg> <span data-bind="i18n: $parent.D.Terms.Info"></span> </button> <button class="btn btn-link" data-bind="event: { click: function(data, event, id) { ShowHostelDetails(data, event, '#photos') }}"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" viewBox="0 0 20 18"> <g fill="#4A90E2" fill-rule="nonzero"> <path d="M9.2 8.016c1.103 0 2-.922 2-2.057 0-1.134-.897-2.057-2-2.057s-2 .923-2 2.057c0 1.135.897 2.057 2 2.057zm0-2.907a.84.84 0 0 1 .827.85.84.84 0 0 1-.827.85.84.84 0 0 1-.827-.85c0-.469.371-.85.827-.85z" /> <path d="M19.27.61H.73C.328.61 0 .94 0 1.347v15.809c0 .406.328.736.73.736h18.54c.402 0 .73-.33.73-.736V1.346a.734.734 0 0 0-.73-.735zm-.442 1.181v9.343L15.143 7.42a.614.614 0 0 0-.872 0L9.06 12.672l-3.33-3.354a.61.61 0 0 0-.872 0L1.172 13.03V1.791h17.656zM1.172 16.711V14.7l4.121-4.152 3.33 3.354a.61.61 0 0 0 .871 0l5.213-5.25 4.121 4.151v3.907H1.172z" /> </g> </svg> <span data-bind="i18n: $parent.D.Terms.Photos"></span> </button> </div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-6 pb-4" data-bind="visible: !IsHostelSelected()"> <div class="filter-item info"> <span class="bold" data-bind="i18n: D.Terms.ChooseHostel"></span> <br /> <span>in</span> <span class="bold" data-bind="text: HostelLocation"></span> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6 pb-4" data-bind="visible: !IsHostelSelected()"> <div class="filter-item"> <span data-bind="i18n: D.Terms.SelectedHostelLocation"></span> <br /> <span data-bind="text: HostelLocation"></span> </div> </div> <div class="col-lg-2 col-md-1 col-sm-3 col-4" data-bind="css: { 'pt-4': IsHostelSelected(), 'pb-4': !IsHostelSelected() }"> <div class="filter-item"> <span data-bind="i18n: D.Terms.CheckIn"></span> <br /> <span data-bind="text: ArrivalDateFormatted"></span> </div> </div> <div class="col-lg-2 col-md-2 col-sm-3 col-4" data-bind="css: { 'pt-4': IsHostelSelected(), 'pb-4': !IsHostelSelected() }"> <div class="filter-item"> <span data-bind="i18n: D.Terms.CheckOut"></span> <br /> <span data-bind="text: CheckOutDate"></span> </div> </div> <div class="col-lg-1 col-md-1 col-sm-3 col-4" data-bind="css: { 'pt-4': IsHostelSelected(), 'pb-4': !IsHostelSelected() }"> <div class="filter-item"> <span data-bind="i18n: D.Terms.PAX"></span> <br /> <span data-bind="text: MaximumGuests"></span><span style="text-transform: none;" data-bind="i18n: D.Terms.AdultsInfo"> Adults</span> </div> </div> <div class="col-lg-3 col-md-2 col-sm-3 col-12 text-right pb-4" data-bind="visible: !IsConfirmation(), css: { 'pt-4': IsHostelSelected() }"> <a href="#" class="btn btn-link change-hostel-btn" data-bind="click: ShowFilter, i18n: D.Terms.Change"></a> </div> </div> </div> <!-- ko template: { name: 'tpl-booking-engine-filter-email', data: SendEmailViewModel } --><!-- /ko --> <div class="filter-select" data-bind="visible: IsFilterVisible" style="display: none;"> <!-- ko template: { name: 'tpl-booking-engine-filter-select', data: FilterSelectViewModel, afterRender: FilterSelectViewModel.AfterRender } --><!-- /ko --> </div> <!-- ko if: CurrentHostel() != null --> <div data-bind="template: { name: 'tpl-booking-engine-hostel-details', data: CurrentHostel }"></div> <!-- /ko --> </script> <style type="text/css"> .dropdown h5.error { border: 1px solid #ec8a90; } </style> <script type="text/template" id="tpl-booking-engine-filter-select"> <form style="display: none;"> <div class="row"> <div class="col-sm-6 col-12 mb-3"> <div class="white-box"> <h2 data-bind="i18n: D.Terms.HostelLocation"></h2> <!-- ko template: { name: 'tpl-controls-dropdown', data: HostelLocationDropdown, afterRender: HostelLocationDropdown.AfterRender } --><!-- /ko --> </div> </div> <div class="col-sm-6 col-12 mb-3"> <div class="white-box"> <h2 data-bind="i18n: D.Terms.People"></h2> <!-- ko template: { name: 'tpl-controls-spinner', data: Guests } --><!-- /ko --> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <div class="white-box two-month"> <h2 data-bind="i18n: D.Terms.ArrivalDateA"></h2> <input type="hidden" id="datepicker1" readonly="readonly" data-bind="css: { 'error' : ArrivalDateHasErrors }"> </div> </div> </div> <div class="row"> <div class="col-sm-6 offset-sm-6 col-12 p-4"> <button class="btn btn-primary btn-lg btn-block" type="submit" data-bind="click: Submit, i18n: $root.D.Terms.Search"></button> </div> </div> </form> <form> <div class="row"> <div class="col-12 mb-3"> <div class="white-box two-month"> <h2 data-bind="i18n: D.Terms.ArrivalDateB"></h2> <input type="hidden" id="datepicker2" readonly="readonly" data-bind="css: { 'error' : ArrivalDateHasErrors }"> </div> </div> </div> <div class="row"> <div class="col-sm-6 col-12 mb-3"> <div class="white-box"> <h2 data-bind="i18n: D.Terms.People"></h2> <!-- ko template: { name: 'tpl-controls-spinner', data: Guests } --><!-- /ko --> </div> </div> <div class="col-sm-6 col-12 p-4"> <button class="btn btn-primary btn-lg btn-block" type="submit" data-bind="click: Submit, i18n: $root.D.Terms.Search"></button> </div> </div> </form> </script> <script type="text/template" id="tpl-booking-engine-filter-email"> <div class="popup-type-1 custom-margin cf" data-bind="visible: $parent.IsMessageControlVisible, validationOptions: { insertMessages: false, decorateInputElement: true, errorElementClass: 'error' }" style="display: none;"> <form id="messagePopup"> <div class="col-40p cf"> <label for="fldMessageName"><span data-bind="i18n: $root.D.Terms.FirstAndLastName"></span>:</label> <input type="text" name="fldMessageName" data-bind="value: Name"> <label for="fldMessageEmail"><span data-bind="i18n: $root.D.Terms.EmailAddress"></span>:</label> <input type="text" name="fldMessageEmail" data-bind="value: Email"> </div> <div class="col-40p cf"> <label for="fldMessageText" class="make-smaller-label"><span data-bind="i18n: $root.D.Terms.Message"></span>:</label> <textarea name="fldMessageText" data-bind="value: Message"></textarea> </div> <div class="col-20p cf"> <a href="#" class="close" data-bind="click: $parent.ToggleMessageControl, i18n: $root.D.Terms.Cancel">Cancel</a> <input type="button" class="btn custom-bg" data-bind="click: OnSend, value: $root.D.Phrase($root.D.Terms.Send)"> </div> </form> </div> </script> <script type="text/template" id="tpl-booking-engine-filter-result"> <div class="result-cell cf br-font cf custom-margin"> <div data-bind="template: { name: 'tpl-booking-engine-property', foreach: LinkedProperties, afterRender: PropertyAfterRender }"></div> </div> </script> <input type="hidden" id="JWTContainer" value="" /> <script type="text/template" id="tpl-booking-engine-property"> <div class="cf property-item"> <!-- ko if: (Photos().length > 0) --> <div class="min-details-main-photo cf"> <img data-bind="attr: { src: MainPhoto }" /> </div> <!-- /ko --> <div data-bind="css: {'without-photos' : Photos().length < 1}" class="property-min-details cf"> <h2> <mark data-bind="text: Name"></mark> </h2> <div> <span class="property-city" data-bind="text: City"></span> </div> <p data-bind="text: ShortDescription"></p> <div style="height: 10px;"> </div> <a href="#" class="show-details-link custom-color cf" data-bind="i18n: $root.D.Terms.ViewDetails, visible: AreDetailsVisible"></a> </div> <div class="price-from cf"> <span>Available from: </span> <h3> <mark data-bind="text: PriceFrom"></mark> <mark data-bind="text: Currency"></mark> </h3> <div class="center-text book-now"> <input type="submit" class="btn custom-bg next-step" data-bind="click: OnBookNow, value: $root.D.Phrase($root.D.Terms.BookNow)"> </div> </div> <div class="details cf"> <div class="details-slider popup-details" data-bind="photoSlider: {}"> <!-- ko if: (Photos().length > 0) --> <img data-bind="attr: { src: Photos()[0].PhotoUrl }" class="main-photo-details" /> <div class="slider" data-bind="foreach: Photos"> <div class="slide" data-bind="if: PhotoUrl"> <img data-bind="attr: { src: PhotoUrl }" class="secondary-photo-details" /> </div> </div> <!-- /ko --> </div> <div class="details-text"> <p data-bind="html: Description"></p> </div> </div> </div> </script> <script type="text/template" id="tpl-booking-engine-booking-thanks"> <div class="white-box booking-thanks cf custom-margin" data-bind="visible: IsVisible"> <h2 data-bind="i18n: $root.D.Terms.Confirmed"></h2> <h3 data-bind="i18n: $root.D.Terms.ThankYouForBooking"></h3> </div> </script> <script type="text/template" id="tpl-booking-engine-booking-details"> <div class="booking-details"> <a class="be-modal-close close-icon show-be-modal-close"></a> <div class="details-info"> <h3 data-bind="i18n: $root.D.Terms.BookingDetails"></h3> <div class="mb-3"> <p class="detail-label" data-bind="i18n: $root.D.Terms.Room"></p> <p data-bind="text: StayInfo"></p> </div> <div class="mb-3"> <p class="detail-label" data-bind="i18n: $root.D.Terms.PAX"></p> <p data-bind="text: PaxInfo"></p> </div> </div> <!-- ko foreach: SelectedRooms --> <div class="detail-item"> <h4> <span data-bind="i18n: $root.D.Terms.Room"></span> <span data-bind="text: ($index() + 1)"></span> - <span data-bind="i18n: $root.D.Terms.Selected"></span> </h4> <p class="mt-3" data-bind="html: RoomInfo"></p> <div class="mt-3"> <p class="detail-label" data-bind="i18n: $root.D.Terms.Rate"></p> <div> <span data-bind="html: RateModel.RateName"></span> <span class="badge badge-success ml-4" data-bind="html: RateModel.RateName" style="visibility:hidden">3 nights offer</span> <span class="float-right" style="visibility:hidden">-293€</span> </div> </div> </div> <!-- /ko --> <!-- ko if: SelectedExtras().length > 0 --> <div class="detail-item"> <h4 data-bind="i18n: $root.D.Terms.Extras"></h4> <!-- ko foreach: SelectedExtras --> <!-- ko if: PaxButton.SelectedValue() > 0--> <p class="mt-3"> <span data-bind="text: PaxButton.SelectedValue()"></span> extras - <span data-bind="text: Name">Champagne Welcome</span> <span class="float-right" data-bind="text: CurrentCurrencySymbol"></span><span class="float-right" data-bind="text: IsFreeItem ? 0 : PriceBySelectedCurrency() * PaxButton.SelectedValue()"></span> </p> <!-- /ko --> <!-- /ko --> </div> <!-- /ko --> <!-- ko if: FilterViewModel.ShowPromotions() --> <div class="detail-item"> <h4 data-bind="i18n: $root.D.Terms.PromotionsApplied"></h4> <ul class="mt-3 ticked-list"> <!-- ko if: FilterViewModel.CurrentHostel().Promotions()[0].FirstPromotion.length > 0 --> <li data-bind="text: FilterViewModel.CurrentHostel().Promotions()[0].FirstPromotion"></li> <!-- /ko --> <!-- ko if: FilterViewModel.CurrentHostel().Promotions()[0].SecondPromotion.length > 0 --> <li data-bind="text: FilterViewModel.CurrentHostel().Promotions()[0].SecondPromotion"></li> <!-- /ko --> <!-- ko if: FilterViewModel.CurrentHostel().Promotions()[0].ThirdPromotion.length > 0 --> <li data-bind="text: FilterViewModel.CurrentHostel().Promotions()[0].ThirdPromotion"></li> <!-- /ko --> </ul> </div> <!-- /ko --> <!-- ko if: FilterViewModel.CurrentHostel().PropertyAdditionalSettings().length > 0 --> <div class="detail-item"> <h4 data-bind="i18n: $root.D.Terms.Other"></h4> <ul class="mt-3 ticked-list"> <!-- ko if: FilterViewModel.CurrentHostel().PropertyAdditionalSettings()[0].FirstAdditional.length > 0 --> <li> <span data-bind="text: FilterViewModel.CurrentHostel().PropertyAdditionalSettings()[0].FirstAdditional"></span> <!-- ko if: FilterViewModel.CurrentHostel().PropertyAdditionalSettings()[0].FirstInfo.length > 0 --> <!-- ko template: { name: 'tpl-controls-tooltip-button', data: FilterViewModel.CurrentHostel().AdditionalSettingsToolTipFirst() } --><!-- /ko --> <!-- /ko --> </li> <!-- /ko --> <!-- ko if: FilterViewModel.CurrentHostel().PropertyAdditionalSettings()[0].SecondAdditional.length > 0 --> <li> <span data-bind="text: FilterViewModel.CurrentHostel().PropertyAdditionalSettings()[0].SecondAdditional"></span> <!-- ko if: FilterViewModel.CurrentHostel().PropertyAdditionalSettings()[0].SecondInfo.length > 0 --> <!-- ko template: { name: 'tpl-controls-tooltip-button', data: FilterViewModel.CurrentHostel().AdditionalSettingsToolTipSecond() } --><!-- /ko --> <!-- /ko --> </li> <!-- /ko --> <!-- ko if: FilterViewModel.CurrentHostel().PropertyAdditionalSettings()[0].ThirdAdditional.length > 0 --> <li> <span data-bind="text: FilterViewModel.CurrentHostel().PropertyAdditionalSettings()[0].ThirdAdditional"></span> <!-- ko if: FilterViewModel.CurrentHostel().PropertyAdditionalSettings()[0].ThirdInfo.length > 0 --> <!-- ko template: { name: 'tpl-controls-tooltip-button', data: FilterViewModel.CurrentHostel().AdditionalSettingsToolTipThird() } --><!-- /ko --> <!-- /ko --> </li> <!-- /ko --> </ul> </div> <!-- /ko --> <!-- ko if: SelectedRooms().length > 0 --> <!-- ko if: IsConfirmation() --> <div class="detail-item"> <h4 data-bind="i18n: $root.D.Terms.IfYouHaveCouponQuestion">Have a coupon?</h4> <label class="coupon-error" style="display: block;" data-bind="text: $parent.CouponError"></label> <form id="tokenForm" class="fdm-coupon-form"> <input type="text" class="textfield fdm-couponcode" data-bind="value: $parent.CouponCode"> <div class="center-text fdm-coupon-apply-btn"> <input type="submit" class="btn custom-bg" data-bind="click: $parent.ApplyCouponCode, value: $root.D.Phrase($root.D.Terms.ApplyCode), enable: $parent.ApplyCouponCodeEnable" value="Apply code"> </div> </form> </div> <!-- /ko --> <div class="detail-item"> <h4 data-bind="i18n: $root.D.Terms.Prices">Prices</h4> <!-- ko if: IsConfirmation() && !$parent.ApplyCouponCodeEnable() --> <div class="final-price-box" style="padding: 15px 20px 0 20px"> <div class="price-label" data-bind="text: $parent.CouponCode()"></div> <div class="final-price" data-bind="text: $parent.NumberHelper.FormatMoney($parent.CouponTotal(), 2)"></div> <!-- ko text: $parent.ShoppingCart.CurrencySymbol --><!-- /ko --> </div> <!-- /ko --> <div class="final-price-box"> <div class="price-label" data-bind="i18n: $root.D.Terms.TotalPrice"></div> <div class="final-price" data-bind="text: $parent.NumberHelper.FormatMoney($parent.ShoppingCart.SubtotalBySelectedCurrency(), 2)"></div> <!-- ko text: $parent.ShoppingCart.CurrencySymbol --><!-- /ko --> </div> <div class="final-price-box selected" data-bind="visible: $parent.ShoppingCart.FeeType > 0 && $parent.ShoppingCart.PrepaymentGBP() > 0"> <!-- ko if: ($parent.ShoppingCart.FeeType === 1) --> <div class="price-label"> <p class="prepayment" data-bind="i18n: $root.D.Terms.PayNowOnlyBookingFee"></p> <mark><span class="paynow" data-bind="i18n: $root.D.Terms.PayNowOnlyBookingFeeComment"></span></mark> </div> <div class="final-price" data-bind="text: $parent.NumberHelper.FormatMoney($parent.ShoppingCart.PrepaymentBySelectedCurrency(), 2)"></div> <!-- ko text: $parent.ShoppingCart.CurrencySymbol --><!-- /ko --> <!-- /ko --> <!-- ko if: ($parent.ShoppingCart.FeeType === 2) --> <div class="price-label"> <p class="prepayment" data-bind="i18n: $root.D.Terms.PayNowPercentPrepayment"></p> </div> <div class="final-price" data-bind="text: $parent.NumberHelper.FormatMoney($parent.ShoppingCart.PrepaymentBySelectedCurrency(), 2)"></div> <!-- ko text: $parent.ShoppingCart.CurrencySymbol --><!-- /ko --> <!-- /ko --> <!-- ko ifnot: $parent.ShoppingCart.CurrencyCode() == "GBP"--> <!-- ko if: $parent.ShoppingCart.PrepaymentGBP() > 0 --> <mark> <span data-bind="formatString: { format: $root.D.Phrase($root.D.Terms.ChargedInGBPInAmountOfGBP), args: [$parent.NumberHelper.FormatMoney($parent.ShoppingCart.PrepaymentGBP(), 2), $root.D.Phrase($root.D.Terms.FDMName)] }"></span> </mark> <!-- /ko --> <!-- /ko --> </div> <div class="final-price-box"> <div class="price-label" data-bind="i18n: $root.D.Terms.AmountDue"></div> <div class="final-price" data-bind="text: $parent.NumberHelper.FormatMoney($parent.ShoppingCart.PayAtArrivalBySelectedCurrency(), 2)"></div> <!-- ko text: $parent.ShoppingCart.CurrencySymbol --><!-- /ko --> </div> </div> <!-- /ko --> <!-- ko if: SelectedRooms().length > 0 && !IsConfirmation() --> <div class="continue d-none d-lg-block"> <div class="guarantee pt-3 pb-3"> <!-- ko if: FilterViewModel.CurrentHostel().PromotionalTexts().length > 0 && FilterViewModel.CurrentHostel().PromotionalTexts()[0].Title.length > 0 --> <img src="Content/img/guaranteed.png" class="mr-1" style="float: none;" /> <div class="guarantee-text align-top pt-1"> <p data-bind="text: FilterViewModel.CurrentHostel().PromotionalTexts()[0].Title"></p> </div> <!-- /ko --> </div> <div class="mb-3 continue-box"> <div class="w-50 pay-now"> <p class="label" data-bind="i18n: $root.D.Terms.PayNow"></p> <p class="price"><span data-bind="text: $parent.NumberHelper.FormatMoney($parent.ShoppingCart.PrepaymentBySelectedCurrency(), 2)"></span> <!-- ko text: $parent.ShoppingCart.CurrencySymbol --><!-- /ko --></p> </div> <button class="btn btn-success w-50" type="button" data-bind="click: FilterViewModel.MaximumGuests() > GuestNumber() ? ShowAlert : $parent.Continue, i18n: $root.D.Terms.Continue, css: FilterViewModel.MaximumGuests() > GuestNumber() ? 'disabled' : ''"></button> </div> <p class="text-right pb-3" data-bind="i18n: $root.D.Terms.PromotionalSummarySubtitle, visible: NoBookingFeesVisible">No extra fees! FREE Cancelation</p> </div> <!-- /ko --> </div> </script> <script type="text/template" id="tpl-booking-engine-shopping-cart"> <div class="col-30p cf custom-bg"> <h5 data-bind="i18n: $root.D.Terms.YouHaveSelected"></h5> <p data-bind="foreach: { data: ShoppingCart.RoomsSelected, as: 'room' } "> <span data-bind="text: room"></span><br /> </p> <!-- ko if: ShoppingCart.ExtrasSelected().length > 0 --> <p data-bind="foreach: { data: ShoppingCart.ExtrasSelected, as: 'extra' } "> <span data-bind="text: extra"></span><br /> </p> <!-- /ko --> </div> <div class="col-70p summary-main cf"> <div class="col-70p"> <!-- ko if: (ShoppingCart.FeeType === 2) --> <div class="single-item"> <h4 data-bind="i18n: $root.D.Terms.TotalPrice"></h4> <h5><span class="bold" data-bind="text: NumberHelper.FormatMoney(ShoppingCart.SubtotalBySelectedCurrency(), 2)"></span> <!-- ko text: CurrentCurrencyCode --><!-- /ko --></h5> </div> <!-- /ko --> <div class="single-item"> <!-- ko if: (ShoppingCart.FeeType === 1) --> <h4 data-bind="i18n: $root.D.Terms.PayNowOnlyBookingFee"></h4> <h5><span class="bold" data-bind="text: NumberHelper.FormatMoney(ShoppingCart.PrepaymentBySelectedCurrency(), 2)"></span> <!-- ko text: CurrentCurrencyCode --><!-- /ko --></h5> <h6 data-bind="i18n: $root.D.Terms.PayNowOnlyBookingFeeComment"></h6> <!-- /ko --> <!-- ko if: (ShoppingCart.FeeType === 2) --> <h4 data-bind="i18n: $root.D.Terms.PayNowPercentPrepayment"></h4> <h5><span class="bold" data-bind="text: NumberHelper.FormatMoney(ShoppingCart.PrepaymentBySelectedCurrency(), 2)"></span> <!-- ko text: CurrentCurrencyCode --><!-- /ko --></h5> <br> <!-- ko ifnot: ShoppingCart.CurrencyCode() == "GBP" --> <mark> <span data-bind="formatString: { format: $root.D.Phrase($root.D.Terms.ChargedInGBPInAmountOfGBP), args: [NumberHelper.FormatMoney(ShoppingCart.PrepaymentGBP(), 2), $root.D.Phrase($root.D.Terms.FDMName)] }"></span> </mark> <!-- /ko --> <!-- /ko --> <!-- /ko --> </div> <div class="single-item"> <h4 data-bind="i18n: $root.D.Terms.AmountDue"></h4> <h5><span class="bold" data-bind="text: NumberHelper.FormatMoney(ShoppingCart.PayAtArrivalBySelectedCurrency(), 2)"></span> <!-- ko text: CurrentCurrencyCode --><!-- /ko --></h5> </div> </div> <div class="col-30p"> <form action="extras.html"> <input type="submit" class="btn custom-bg btn-big-book next-step" data-bind="click: OnSubmit, value: $root.D.Phrase($root.D.Terms.BookNow)"> </form> </div> <!-- ko if: (ShoppingCart.FeeType === 1) --> <p class="extra-summary-info custom-color" data-bind="i18n: $root.D.Terms.InstantConfirmation"></p> <!-- /ko --> <!-- ko if: (ShoppingCart.FeeType === 2) --> <p class="extra-summary-info custom-color" data-bind="i18n: $root.D.Terms.NoBookingFee"></p> <!-- /ko --> </div> </script> <script type="text/template" id="tpl-booking-engine-shopping-cart-view2"> <div class="white-box summary-box cf"> <div class="summary cf custom-margin"> <!-- ko if: ((ShoppingCart.FeeType === 1 || ShoppingCart.FeeType === 2)) --> <div class="line cf"> <p> <span class="bold" data-bind="i18n: $root.D.Terms.TotalPrice"></span> </p> <p> <span class="bold" data-bind="text: NumberHelper.FormatMoney(ShoppingCart.SubtotalBySelectedCurrency(), 2)"></span> <!-- ko text: ShoppingCart.CurrencySymbol --><!-- /ko --> </p> </div> <!-- /ko --> <!-- ko ifnot: (ShoppingCart.FeeType === 0) --> <div class="line cf"> <p> <!-- ko if: (ShoppingCart.FeeType === 1) --> <span class="bold" data-bind="i18n: $root.D.Terms.PayNowOnlyBookingFee"></span> <br> <mark data-bind="i18n: $root.D.Terms.PayNowOnlyBookingFeeComment"></mark> <!-- /ko --> <!-- ko if: (ShoppingCart.FeeType === 2) --> <span class="bold" data-bind="i18n: $root.D.Terms.PayNowPercentPrepayment"></span> <!-- ko ifnot: ShoppingCart.CurrencyCode() == "GBP" --> <br> <mark> <span data-bind="formatString: { format: $root.D.Phrase($root.D.Terms.ChargedInGBPInAmountOfGBP), args: [NumberHelper.FormatMoney(ShoppingCart.PrepaymentGBP(), 2), $root.D.Phrase($root.D.Terms.FDMName)] }"></span> </mark> <!-- /ko --> <!-- /ko --> </p> <p> <span class="bold" data-bind="text: NumberHelper.FormatMoney(ShoppingCart.PrepaymentBySelectedCurrency(), 2)"></span> <!-- ko text: ShoppingCart.CurrencySymbol --><!-- /ko --> </p> </div> <!-- /ko --> <div class="line cf"> <p> <span class="bold" data-bind="i18n: $root.D.Terms.AmountDue"></span> <br> <mark data-bind="i18n: $root.D.Terms.AtLocalCurrency"></mark> </p> <p> <span class="bold" data-bind="text: NumberHelper.FormatMoney(ShoppingCart.PayAtArrivalBySelectedCurrency(), 2)"></span> <!-- ko text: ShoppingCart.CurrencySymbol --><!-- /ko --> <br> <mark><span data-bind="text: NumberHelper.FormatMoney(ShoppingCart.PayAtArrival(), 2)"></span> <span data-bind="text: ShoppingCart.DefaultCurrencyCode()"></span></mark> </p> </div> </div> </div> <div class="booking-fee cf custom-margin custom-bg"> <p> <i class="fa fa-arrow-circle-o-right"></i> <!-- ko if: (ShoppingCart.FeeType === 1) --> <span data-bind="i18n: $root.D.Terms.InstantConfirmation"></span> <!-- /ko --> <!-- ko if: (ShoppingCart.FeeType === 2) --> <span data-bind="i18n: $root.D.Terms.NoBookingFee"></span> <!-- /ko --> </p> </div> </script> <script type="text/template" id="tpl-booking-engine-choose-dates"> <div class="result-cell cf"> </div> </script> <script type="text/template" id="tpl-booking-engine-multiproperty"> <div class="row multiproperty-container"> <div style="display: none !important;" class="col-12 col-lg-3 d-none d-lg-block"> <div class="multiproperty-filter"> <div class="filter-item"> <h3 data-bind="i18n: D.Terms.FilterRoom"></h3> <div class="booking-engine-checkbox"> <input type="checkbox" id="room-select-all" data-bind="checked: SelectAllRoomType"> <label for="room-select-all" data-bind="i18n: D.Terms.FilterAll"></label> </div> <div data-bind="foreach: RoomType"> <div class="booking-engine-checkbox"> <input type="checkbox" data-bind="checkedValue: Id, checked: $parent.FilterRoom, attr: { id: OptionText }"> <label data-bind="text: Caption, attr: { for: OptionText}"></label> </div> </div> </div> <div class="filter-item"> <h3 data-bind="i18n: D.Terms.FilterHostel"></h3> <div class="booking-engine-checkbox"> <input type="checkbox" id="hostel-select-all" data-bind="checked: SelectAllHostelLocation"> <label for="hostel-select-all" data-bind="i18n: D.Terms.FilterAll"></label> </div> <div data-bind="foreach: HostelLocation"> <div class="booking-engine-checkbox"> <input type="checkbox" data-bind="checkedValue: Id, checked: $parent.FilterHostel, attr: { id: OptionText }"> <label data-bind="text: Caption, attr: { for: OptionText}"></label> </div> </div> </div> <div class="filter-item" data-bind="click: ClearFilters"> <button class="btn btn-link"><i class="fas fa-trash-alt"></i> <span data-bind="i18n: D.Terms.Clear"></span></button> </div> </div> </div> <div class="col-12 col-lg-9 multiproperty-rows"> <div class="multiproperty-items"> <h3 data-bind="text: HostelFoundMessage"></h3> <div data-bind="foreach: Hostels"> <div class="multiproperty-item"> <div class="item-image"> <div class="with-button"> <img data-bind="attr: { src: MainPhoto() ? MainPhoto() : 'Content/img/ph-main.png' }" /> <button class="btn-magnifier" data-bind="event: { click: function(data, event, id) { $parent.ShowHostelDetails(data, event, '#info') }}"><span class="ico-mglass"></span></button> </div> </div> <div class="item-desc"> <div class="row"> <div class="col-12"> <span class="name" data-bind="text: Name"></span> <!-- ko if: TripAdvisorSetting --> <div class="trip-advisor" data-bind="html: TripAdvisorSetting" /> <!-- /ko --> </div> </div> <p class="desc" data-bind="html: ShortDescription"></p> <!-- ko if: SoldOut() --> <p class="price" data-bind="i18n: D.Terms.SoldOut"></p> <!-- /ko --> <!-- ko if: !SoldOut() --> <p class="price" data-bind="text: PriceFrom"></p> <!-- /ko --> <div class="row"> <div class="col-12 hostel-buttons"> <button class="btn btn-link" data-bind="event: { click: function(data, event, id) { $parent.ShowHostelDetails(data, event, '#map') }}"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="26" viewBox="0 0 20 26"> <g fill="#4A90E2" fill-rule="nonzero"> <path d="M9.995.546C4.485.546 0 5.101 0 10.696a10.138 10.138 0 0 0 .246 2.244 10.1 10.1 0 0 0 .669 2.001c1.077 2.575 3.445 6.53 8.64 10.765a.703.703 0 0 0 .89 0c5.19-4.236 7.563-8.19 8.64-10.765a9.987 9.987 0 0 0 .737-2.34c.115-.627.178-1.269.178-1.906C19.99 5.101 15.504.546 9.995.546zm8.426 11.805c0 .01-.005.021-.005.032-.005.027-.02.106-.047.228v.01a8.516 8.516 0 0 1-.58 1.731c-.005.006-.005.016-.01.021-.978 2.352-3.121 5.94-7.784 9.852-4.663-3.912-6.806-7.5-7.784-9.852-.005-.005-.005-.015-.01-.02a9.084 9.084 0 0 1-.58-1.731v-.01c-.032-.123-.042-.202-.048-.229 0-.01-.005-.021-.005-.037a8.797 8.797 0 0 1-.157-1.656c0-4.804 3.853-8.716 8.584-8.716 4.73 0 8.583 3.912 8.583 8.716a8.77 8.77 0 0 1-.157 1.661z" /> <path d="M10 3.711c-3.391 0-6.154 2.842-6.154 6.33S6.61 16.37 10 16.37s6.154-2.842 6.154-6.33S13.39 3.71 10 3.71zm0 11.252c-2.641 0-4.785-2.21-4.785-4.922 0-2.711 2.15-4.922 4.785-4.922 2.636 0 4.785 2.21 4.785 4.922 0 2.711-2.144 4.922-4.785 4.922z" /> </g> </svg> <span data-bind="i18n: $parent.D.Terms.Map"></span> </button> <button class="btn btn-link" data-bind="event: { click: function(data, event, id) { $parent.ShowHostelDetails(data, event, '#info') }}"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> <g fill="#4A90E2" fill-rule="nonzero"> <path d="M8.286 6.452c.042.083.083.165.125.226.041.062.104.123.146.185.062.061.124.123.208.184.062.041.145.103.25.123a1.3 1.3 0 0 0 .541.103c.083 0 .187 0 .27-.02.084-.021.167-.042.23-.083h.02c.084-.04.167-.082.25-.143.063-.041.125-.103.188-.164l.02-.02c.063-.062.104-.124.146-.185.042-.062.083-.123.104-.206 0-.02 0-.02.021-.04.042-.083.062-.185.083-.267.021-.082.021-.185.021-.267 0-.082 0-.184-.02-.266a1.883 1.883 0 0 0-.084-.267 1.163 1.163 0 0 0-.25-.369l-.041-.04c-.063-.062-.125-.103-.209-.165-.083-.041-.145-.082-.229-.123a1.186 1.186 0 0 0-.25-.082c-.104-.02-.187-.02-.27-.02-.083 0-.188 0-.27.02-.084.02-.167.041-.25.082h-.021c-.084.041-.167.082-.23.123-.083.062-.145.103-.208.164-.062.062-.125.123-.166.185a2.227 2.227 0 0 0-.125.225 1.144 1.144 0 0 0-.083.246c-.021.103-.021.185-.021.267 0 .082 0 .184.02.266.021.164.063.246.084.328zM11.36 13.396h-.407V8.682c0-.27-.194-.5-.459-.5H8.641c-.247 0-.46.211-.46.5v1.039c0 .27.195.5.46.5h.37v3.194h-.37c-.247 0-.46.212-.46.5v1.04c0 .269.195.5.46.5h2.718c.247 0 .46-.212.46-.5v-1.04c0-.288-.213-.52-.46-.52z" /> <path d="M10 0C4.479 0 0 4.479 0 10s4.479 10 10 10 10-4.479 10-10S15.521 0 10 0zm0 18.684c-4.79 0-8.684-3.894-8.684-8.684 0-4.79 3.894-8.684 8.684-8.684 4.79 0 8.684 3.894 8.684 8.684 0 4.79-3.894 8.684-8.684 8.684z" /> </g> </svg> <span data-bind="i18n: $parent.D.Terms.Info"></span> </button> <button class="btn btn-link" data-bind="event: { click: function(data, event, id) { $parent.ShowHostelDetails(data, event, '#photos') }}"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" viewBox="0 0 20 18"> <g fill="#4A90E2" fill-rule="nonzero"> <path d="M9.2 8.016c1.103 0 2-.922 2-2.057 0-1.134-.897-2.057-2-2.057s-2 .923-2 2.057c0 1.135.897 2.057 2 2.057zm0-2.907a.84.84 0 0 1 .827.85.84.84 0 0 1-.827.85.84.84 0 0 1-.827-.85c0-.469.371-.85.827-.85z" /> <path d="M19.27.61H.73C.328.61 0 .94 0 1.347v15.809c0 .406.328.736.73.736h18.54c.402 0 .73-.33.73-.736V1.346a.734.734 0 0 0-.73-.735zm-.442 1.181v9.343L15.143 7.42a.614.614 0 0 0-.872 0L9.06 12.672l-3.33-3.354a.61.61 0 0 0-.872 0L1.172 13.03V1.791h17.656zM1.172 16.711V14.7l4.121-4.152 3.33 3.354a.61.61 0 0 0 .871 0l5.213-5.25 4.121 4.151v3.907H1.172z" /> </g> </svg> <span data-bind="i18n: $parent.D.Terms.Photos"></span> </button> <button class="btn btn-check btn-outline-success" data-bind="i18n: $parent.D.Terms.Check, click: OnCheckRoom"></button> </div> </div> </div> </div> </div> </div> </div> </div> <!-- ko if: CurrentHostel() != null --> <div data-bind="template: { name: 'tpl-booking-engine-hostel-details', data: CurrentHostel }"></div> <!-- /ko --> </script> <script type="text/template" id="tpl-booking-engine-hostel-details"> <div id="hostel-details-modal" class="be-modal details-modal"> <div class="be-modal-content"> <div class="be-modal-header"> <h1><img /><span style="vertical-align: text-top;" data-bind="text: Name">Goodbye Lenin Hostel</span></h1> <a class="be-modal-close close-icon"></a> </div> <div class="be-modal-body"> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#map" data-bind="i18n: D.Terms.Map"></a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#photos" data-bind="i18n: D.Terms.Photos"></a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#info" data-bind="i18n: D.Terms.Info"></a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div id="map" class="tab-pane" data-bind="html: GoogleMapTest()"> </div> <div id="photos" class="tab-pane"> <div data-bind="template: {name: 'tpl-booking-engine-photo-slider', data: SliderViewModel}" style="width: 100%;"></div> </div> <div id="info" class="tab-pane"> <div class="info-container"> <div class="item-image"> <img src="Content/img/h1.jpg" data-bind="attr: { src: MainPhoto() }" /> </div> <div class="item-desc"> <div class="desc" data-bind="html: Description"></div> <!-- ko if: (typeof Facilities() !== 'undefined' && Facilities().length > 0) --> <div class="facilities"> <h3 data-bind="i18n: D.Terms.Facilities"></h3> </div> <div class="services" data-bind="foreach: Facilities()"> <!-- ko if: Active === true && Name.length > 0 --> <div class="item"> <img data-bind="attr: { src: Image }" /> <span data-bind="text: Name"></span> </div> <!-- /ko --> </div> <!-- /ko --> </div> </div> </div> </div> </div> </div> </div> </script> <script type="text/template" id="tpl-booking-engine-check-room"> <div class="d-flex main-container align-items-start"> <div class="d-flex flex-column" style="flex: 1;"> <div class="d-flex flex-sm-row flex-column flex-wrap justify-content-between pr-3 pl-3 filters-box"> <div class="filter-label mb-3" data-bind="i18n: D.Terms.Filters"></div> <div class="d-flex flex-row justify-content-between justify-content-sm-around flex-grow-1"> <div class="booking-engine-checkbox"> <input type="checkbox" id="room-select-all" data-bind="checked: SelectAllRoomType"> <label for="room-select-all" data-bind="i18n: D.Terms.FilterAll" class="font-opensans-bold"></label> </div> <div class="booking-engine-checkbox" data-bind="visible: PrivateFilterVisible"> <input type="checkbox" data-bind="checkedValue: RoomType()[0].Id, checked: FilterRoom, attr: { id: RoomType()[0].OptionText }"> <label for="room-select-all" data-bind="text: RoomType()[0].Caption, attr: { for: RoomType()[0].OptionText}"></label> </div> </div> <div class="d-flex flex-row justify-content-between justify-content-sm-around flex-grow-1"> <div class="booking-engine-checkbox" data-bind="visible: DormFilterVisible"> <input type="checkbox" data-bind="checkedValue: RoomType()[1].Id, checked: FilterRoom, attr: { id: RoomType()[1].OptionText }"> <label for="room-select-all" data-bind="text: RoomType()[1].Caption, attr: { for: RoomType()[1].OptionText}"></label> </div> <div class="booking-engine-checkbox"> <input type="checkbox" data-bind="checkedValue: RoomType()[2].Id, checked: FilterRoom, attr: { id: RoomType()[2].OptionText }"> <label for="room-select-all" data-bind="text: RoomType()[2].Caption, attr: { for: RoomType()[2].OptionText}"></label> </div> </div> </div> <div class="not-available" data-bind="visible: NotAvailableVisible"> <h3 data-bind="i18n: $root.D.Terms.NotAvailable">Not Available</h3> </div> <h3 data-bind="text: DormRoomsMessageFunction, visible: DormRoomsMessageFunction().length > 0"></h3> <div class="dorm-rooms" data-bind="foreach: filteredRecords"> <!-- ko if: !IsPrivateRoom --> <!-- ko template: { name: 'tpl-booking-engine-check-room-detail', data: $data } --><!-- /ko --> <!-- /ko --> </div> <h3 data-bind="text: PrivateRoomsMessageFunction, visible: PrivateRoomsMessageFunction().length > 0"></h3> <div class="private-rooms" data-bind="foreach: filteredRecords"> <!-- ko if: IsPrivateRoom --> <!-- ko template: { name: 'tpl-booking-engine-check-room-detail', data: $data } --><!-- /ko --> <!-- /ko --> </div> </div> <div class="d-none d-lg-flex booking-details-container"> <!-- ko template: { name: 'tpl-booking-engine-booking-details', data: $parent.BookingDetailsViewModel, afterRender: $parent.BookingDetailsViewModel.AfterRender } --><!-- /ko --> </div> </div> <!-- ko if: $parent.BookingDetailsViewModel.SelectedRooms().length > 0 --> <div class="check-room-footer" data-bind="with: $parent.FooterViewModel"> <div class="row"> <div class="col-lg-4 d-none d-lg-block"> <div class="guarantee d-inline-block"> <!-- ko if: FilterViewModel.CurrentHostel().PromotionalTexts().length > 0 && (FilterViewModel.CurrentHostel().PromotionalTexts()[0].Title.length > 0 || FilterViewModel.CurrentHostel().PromotionalTexts()[0].Subtitle.length > 0) --> <img src="Content/img/guaranteed.png" class="mr-1" style="float: none;" /> <div class="guarantee-text align-top pt-1"> <!-- ko if: FilterViewModel.CurrentHostel().PromotionalTexts()[0].Title.length > 0 --> <p data-bind="text: FilterViewModel.CurrentHostel().PromotionalTexts()[0].Title"></p> <!-- /ko --> </div> <!-- ko if: FilterViewModel.CurrentHostel().PromotionalTexts()[0].Subtitle.length > 0 > 0 --> <p class="small" data-bind="text: FilterViewModel.CurrentHostel().PromotionalTexts()[0].Subtitle"></p> <!-- /ko --> <!-- /ko --> </div> </div> <div class="col-lg-8 d-flex justify-content-center"> <div class="continue-col"> <div class="selection-info"> <h2 data-bind="text: PaxInfo"></h2> <a class="btn btn-link" data-bind="click: $parent.ClearAll, i18n: $root.D.Terms.ClearSelection" href="#" >Clear selection</a> </div> <div class="continue-box"> <div class="details-btn" data-bind="click: OnDetails, css: { 'open': IsDetailsOpen() }, text: DetailsButtonText"> Details </div> <div class="pay-now"> <p class="label" data-bind="i18n: $root.D.Terms.PayNow"></p> <p class="price"><span data-bind="text: $parent.NumberHelper.FormatMoney($parent.ShoppingCart.PrepaymentBySelectedCurrency(), 2)"></span> <!-- ko text: $parent.ShoppingCart.CurrencySymbol --><!-- /ko --></p> </div> <button class="btn btn-success" type="button" data-bind="click: FilterViewModel.MaximumGuests() > BookingDetailsViewModel.GuestNumber() ? BookingDetailsViewModel.ShowAlert : $parent.Continue, i18n: $root.D.Terms.Continue, css: FilterViewModel.MaximumGuests() > BookingDetailsViewModel.GuestNumber() ? 'disabled' : ''"></button> </div> </div> </div> </div> </div> <!-- /ko --> <!-- ko template: { name: 'tpl-booking-engine-alert-details' } --><!-- /ko --> <div id="booking-details-modal" class="be-modal details-modal"> <div class="be-modal-content"> <!-- ko template: { name: 'tpl-booking-engine-booking-details', data: $parent.BookingDetailsViewModel, afterRender: $parent.BookingDetailsViewModel.AfterRender } --><!-- /ko --> </div> </div> <!-- ko if: SelectedRoom() != null --> <div data-bind="template: { name: 'tpl-booking-engine-room-details', data: SelectedRoom }"></div> <!-- /ko --> <!-- ko if: SelectedRate() != null --> <div data-bind="template: { name: 'tpl-booking-engine-rate-details', data: SelectedRate }"></div> <!-- /ko--> </script> <script type="text/template" id="tpl-booking-engine-check-room-detail"> <div class="room-item"> <div class="room-item-main"> <!-- ko if: (typeof Photos !== 'undefined' && Photos.length > 0) --> <div class="item-image"> <div class="with-button"> <img data-bind="attr: { src: Photos[0].ImageUrl }" /> <button class="btn-magnifier" data-bind="event: { click: function(data, event) { $parents[1].ViewDetails(data, event, this) }}"><span class="ico-mglass"></span></button> </div> </div> <!-- /ko --> <div class="item-desc"> <div class="row"> <div class="col-12"> <span class="name" data-bind="text: NameObservable"></span> </div> </div> <p class="desc" data-bind="text: ShortDescriptionObservable"></p> <!-- ko if: (typeof Facilities !== 'undefined' && Facilities.length > 0) --> <div class="d-flex flex-row flex-wrap justify-content-between facilities"> <div class="d-inline-flex mb-3"> <img data-bind="attr: { src: Facilities[0].Image }" class="float-left mr-2" /> <span data-bind="text: Facilities[0].Name" class="desc"></span> </div> <!-- ko if: (typeof Facilities !== 'undefined' && Facilities.length >= 2) --> <div class="d-inline-flex mb-3"> <img data-bind="attr: { src: Facilities[1].Image }" class="float-left mr-2" /> <span data-bind="text: Facilities[1].Name" class="desc"></span> </div> <!-- /ko --> <!-- ko if: (typeof Facilities !== 'undefined' && Facilities.length >= 3) --> <div class="d-inline-flex mb-3"> <img data-bind="attr: { src: Facilities[2].Image }" class="float-left mr-2" /> <span data-bind="text: Facilities[2].Name" class="desc"></span> </div> <!-- /ko --> </div> <!-- /ko --> <div class="d-flex justify-content-end"> <button class="btn btn-link" data-bind="i18n: D.Terms.ViewDetails, event: { click: function(data, event) { $parents[1].ViewDetails(data, event, this) }}"></button> </div> </div> </div> <!-- ko foreach: Rates --> <div class="row room-item-rate" data-bind="css: { 'even' : IsRateSelected() }"> <div class="col-sm-3 col-4"> <div> <p class="rate-name d-inline-flex" data-bind="text: RateName, attr: { 'for': ElementId }"></p> <button class="btn btn-link d-inline-flex" data-bind="event: { click: function(data, event) { $parent.OnRateClick(data, event, $parent) }}"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> <g fill="#4A90E2" fill-rule="nonzero"> <path d="M8.286 6.452c.042.083.083.165.125.226.041.062.104.123.146.185.062.061.124.123.208.184.062.041.145.103.25.123a1.3 1.3 0 0 0 .541.103c.083 0 .187 0 .27-.02.084-.021.167-.042.23-.083h.02c.084-.04.167-.082.25-.143.063-.041.125-.103.188-.164l.02-.02c.063-.062.104-.124.146-.185.042-.062.083-.123.104-.206 0-.02 0-.02.021-.04.042-.083.062-.185.083-.267.021-.082.021-.185.021-.267 0-.082 0-.184-.02-.266a1.883 1.883 0 0 0-.084-.267 1.163 1.163 0 0 0-.25-.369l-.041-.04c-.063-.062-.125-.103-.209-.165-.083-.041-.145-.082-.229-.123a1.186 1.186 0 0 0-.25-.082c-.104-.02-.187-.02-.27-.02-.083 0-.188 0-.27.02-.084.02-.167.041-.25.082h-.021c-.084.041-.167.082-.23.123-.083.062-.145.103-.208.164-.062.062-.125.123-.166.185a2.227 2.227 0 0 0-.125.225 1.144 1.144 0 0 0-.083.246c-.021.103-.021.185-.021.267 0 .082 0 .184.02.266.021.164.063.246.084.328zM11.36 13.396h-.407V8.682c0-.27-.194-.5-.459-.5H8.641c-.247 0-.46.211-.46.5v1.039c0 .27.195.5.46.5h.37v3.194h-.37c-.247 0-.46.212-.46.5v1.04c0 .269.195.5.46.5h2.718c.247 0 .46-.212.46-.5v-1.04c0-.288-.213-.52-.46-.52z" /> <path d="M10 0C4.479 0 0 4.479 0 10s4.479 10 10 10 10-4.479 10-10S15.521 0 10 0zm0 18.684c-4.79 0-8.684-3.894-8.684-8.684 0-4.79 3.894-8.684 8.684-8.684 4.79 0 8.684 3.894 8.684 8.684 0 4.79-3.894 8.684-8.684 8.684z" /> </g> </svg> </button> </div> <p data-bind="visible: $index() == 0, i18n: D.Terms.BestRate">That's the best rate</p> </div> <div class="col-sm-1 col-2" style="visibility: hidden;"> <p class="rate-promotion">Promotion</p> <p><span class="badge badge-success">25% off</span></p> <p>Min. 3 nights</p> </div> <div class="col-sm-2 col-4 order-sm-1 order-2 pt-3"> <ul> <!-- ko if: FirstFeature().length > 0 --> <li data-bind="text: FirstFeature"></li> <!-- /ko --> <!-- ko if: SecondFeature().length > 0 --> <li class="selected" data-bind="text: SecondFeature"></li> <!-- /ko --> <!-- ko if: ThirdFeature().length > 0 --> <li data-bind="text: ThirdFeature"></li> <!-- /ko --> </ul> </div> <div class="col-sm-3 col-6 order-sm-2 order-1 text-center"> <p class="discount-price" style="padding-left:4px" data-bind="text: NumberHelper.FormatMoney(DiscountPrice(), 2) + ' ' + CurrencySymbol(), visible: EnableDiscountPrice()">1552</p> <div style="text-align:left;"> <p class="d-inline-flex" style="padding-right:2px; position: relative; bottom: 2px;" data-bind="text: SelectedNumberOfGuest">1552</p> <p class="price d-inline-flex" data-bind="text: NumberHelper.FormatMoney(Price(), 2) + ' ' + CurrencySymbol()"></p> <button class="btn btn-link d-inline-flex" data-bind="event: { click: function(data, event) { $parent.OnRateClick(data, event, $parent) }}"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> <g fill="#4A90E2" fill-rule="nonzero"> <path d="M8.286 6.452c.042.083.083.165.125.226.041.062.104.123.146.185.062.061.124.123.208.184.062.041.145.103.25.123a1.3 1.3 0 0 0 .541.103c.083 0 .187 0 .27-.02.084-.021.167-.042.23-.083h.02c.084-.04.167-.082.25-.143.063-.041.125-.103.188-.164l.02-.02c.063-.062.104-.124.146-.185.042-.062.083-.123.104-.206 0-.02 0-.02.021-.04.042-.083.062-.185.083-.267.021-.082.021-.185.021-.267 0-.082 0-.184-.02-.266a1.883 1.883 0 0 0-.084-.267 1.163 1.163 0 0 0-.25-.369l-.041-.04c-.063-.062-.125-.103-.209-.165-.083-.041-.145-.082-.229-.123a1.186 1.186 0 0 0-.25-.082c-.104-.02-.187-.02-.27-.02-.083 0-.188 0-.27.02-.084.02-.167.041-.25.082h-.021c-.084.041-.167.082-.23.123-.083.062-.145.103-.208.164-.062.062-.125.123-.166.185a2.227 2.227 0 0 0-.125.225 1.144 1.144 0 0 0-.083.246c-.021.103-.021.185-.021.267 0 .082 0 .184.02.266.021.164.063.246.084.328zM11.36 13.396h-.407V8.682c0-.27-.194-.5-.459-.5H8.641c-.247 0-.46.211-.46.5v1.039c0 .27.195.5.46.5h.37v3.194h-.37c-.247 0-.46.212-.46.5v1.04c0 .269.195.5.46.5h2.718c.247 0 .46-.212.46-.5v-1.04c0-.288-.213-.52-.46-.52z" /> <path d="M10 0C4.479 0 0 4.479 0 10s4.479 10 10 10 10-4.479 10-10S15.521 0 10 0zm0 18.684c-4.79 0-8.684-3.894-8.684-8.684 0-4.79 3.894-8.684 8.684-8.684 4.79 0 8.684 3.894 8.684 8.684 0 4.79-3.894 8.684-8.684 8.684z" /> </g> </svg> </button> </div> <p class="rate-offer-info last" style="visibility: hidden"> <img src="Content/img/rate-last.png" width="20" height="20" /> Last 2 rooms </p> </div> <div class="col-sm-3 col-6 order-sm-3 order-3 text-right pt-3"> <!-- ko if: RequiredMinStay && RequiredMinStay > 0 --> <label class="custom-color minStayInfo" data-bind="attr: { 'for': ElementId }"> <span data-bind="formatString: { format: $root.D.Phrase($root.D.Terms.MinXNights), args: [RequiredMinStay] }" style="vertical-align: middle;font-weight: bold;"></span> </label> <!-- /ko --> <!-- ko if: !(RequiredMinStay && RequiredMinStay > 0) && RequiredMinGuests && RequiredMinGuests > 0 --> <label class="custom-color minStayInfo" data-bind="attr: { 'for': ElementId }"> <span data-bind="formatString: { format: $root.D.Phrase($root.D.Terms.MinXGuests), args: [RequiredMinGuests] }" style="vertical-align: middle;font-weight: bold;"></span> </label> <!-- /ko --> <!-- ko if: !(RequiredMinStay && RequiredMinStay > 0) && !(RequiredMinGuests && RequiredMinGuests > 0) && RequiredMaxGuests && RequiredMaxGuests > 0 --> <label class="custom-color minStayInfo" data-bind="attr: { 'for': ElementId }"> <span data-bind="formatString: { format: $root.D.Phrase($root.D.Terms.MaxXGuests), args: [RequiredMaxGuests] }" style="vertical-align: middle;font-weight: bold;"></span> </label> <!-- /ko --> <!-- ko ifnot: RequiredMinStay || RequiredMinGuests || RequiredMaxGuests --> <!-- ko foreach: RateDropdownList --> <!-- ko template: { name: 'tpl-controls-dropdown', data: $data, afterRender: $data.afterRender } --> <!-- /ko --> <!-- /ko --> <!-- ko if: $parent.IsPrivateRoom && $parent.MinAvailability.Availability > 1 && RateDropdownList().length < $parent.MinAvailability.Availability --> <a class="btn btn-link btn-add-rate d-flex justify-content-end" data-bind="click: AddNewRoom, i18n: D.Terms.AddNewRoom">Add new room</a> <!-- /ko --> <!-- /ko --> </div> </div> <!-- /ko --> <div class="stay-off" style="visibility:hidden"> <div class="stay-off-item yellow"> <img src="Content/img/stay-off-yellow.png" /> Stay 4 nights 25% OFF </div> <div class="stay-off-item green"> <img src="Content/img/stay-off-green.png" /> Stay 4 nights 25% OFF </div> <div class="stay-off-item blue"> <img src="Content/img/stay-off-blue.png" /> Stay 4 nights 25% OFF </div> </div> </div> </script> <script type="text/template" id="tpl-booking-engine-room-details"> <div id="room-details-modal" class="be-modal details-modal"> <div class="be-modal-content"> <div class="be-modal-header"> <h1 data-bind="text: NameObservable"></h1> <a class="be-modal-close close-icon"></a> </div> <div class="be-modal-body"> <div id="info" class="tab-pane"> <div class="info-container"> <div class="item-preview"> <div data-bind="template: {name: 'tpl-booking-engine-photo-slider', data: SliderViewModel}" style="width: 100%;"></div> </div> <div class="item-desc"> <div class="desc" data-bind="html: DescriptionObservable"></div> <!-- ko if: (typeof Facilities !== 'undefined' && Facilities.length > 0) --> <div class="facilities"> <h3 data-bind="i18n: D.Terms.Facilities"></h3> </div> <div class="services" data-bind="foreach: Facilities"> <!-- ko if: Active === true && Name.length > 0 --> <div class="item"> <img data-bind="attr: { src: Image }" /> <span data-bind="text: Name"></span> </div> <!-- /ko --> </div> <!-- /ko --> <div class="roomdetails-btn-container"> <!-- ko if: !(Rates[0].RequiredMinStay && Rates[0].RequiredMinStay > 0) && Rates[0].RequiredMinGuests && Rates[0].RequiredMinGuests > 0 --> <label class="custom-color minStayInfo" data-bind="attr: { 'for': Rates[0].ElementId }"> <span data-bind="formatString: { format: $root.D.Phrase($root.D.Terms.MinXGuests), args: [Rates[0].RequiredMinGuests] }" style="vertical-align: middle;font-weight: bold;"></span> </label> <!-- /ko --> <!-- ko if: !(Rates[0].RequiredMinStay && Rates[0].RequiredMinStay > 0) && !(Rates[0].RequiredMinGuests && Rates[0].RequiredMinGuests > 0) && Rates[0].RequiredMaxGuests && Rates[0].RequiredMaxGuests > 0 --> <label class="custom-color minStayInfo" data-bind="attr: { 'for': Rates[0].ElementId }"> <span data-bind="formatString: { format: $root.D.Phrase($root.D.Terms.MaxXGuests), args: [Rates[0].RequiredMaxGuests] }" style="vertical-align: middle;font-weight: bold;"></span> </label> <!-- /ko --> <!-- ko ifnot: Rates[0].RequiredMinStay || Rates[0].RequiredMinGuests || Rates[0].RequiredMaxGuests --> <!-- ko foreach: Rates[0].RateDropdownList --> <!-- ko template: { name: 'tpl-controls-dropdown', data: $data, afterRender: $data.afterRender } --> <!-- /ko --> <!-- /ko --> <!-- /ko --> </div> </div> </div> </div> </div> </div> </div> </script> <script type="text/template" id="tpl-booking-engine-rate-details"> <div id="rate-info-modal" class="be-modal rate-info-modal"> <div class="be-modal-content"> <div class="be-modal-header"> <a class="be-modal-close close-icon"></a> </div> <div class="be-modal-body"> <div class="info-container"> <!-- ko if: (typeof Photos !== 'undefined' && Photos.length > 0) --> <div class="item-image"> <img data-bind="attr: { src: Photos[0].ImageUrl }" /> </div> <!-- /ko --> <div class="item-desc"> <div class="be-modal-header"> <h1 data-bind="text: RateName"></h1> <a class="be-modal-close close-icon"></a> </div> <div class="desc" data-bind="html: Description"></div> </div> </div> </div> </div> </div> </script> <script type="text/template" id="tpl-booking-engine-alert-details"> <div id="alert-info-modal" class="be-modal alert-info-modal"> <div class="be-modal-content"> <div class="be-modal-header"> <h1 id="alert-info-modal-header"></h1> <a class="be-modal-close close-icon"></a> </div> <div class="be-modal-body"> <p id="alert-info-rate-name"></p> <div id="alert-info-text"></div> </div> <div class="alert-box"> <button class="btn btn-success be-modal-close" data-bind="click: Continue, i18n: D.Terms.Continue"></button> <button class="btn btn-warning be-modal-close" data-bind="i18n: D.Terms.ChooseRooms"></button> </div> </div> </div> </script> <script type="text/template" id="tpl-booking-engine-step-extras"> <div class="d-flex main-container align-items-start"> <div class="d-flex flex-column" style="flex: 1;"> <h3 class="extras-title" data-bind="i18n: D.Terms.ExtraServices"></h3> <div class="row" data-bind="foreach: ExtrasData"> <div class="col-12 col-sm-6 col-md-4 pb-3"> <div class="extra-service-item"> <div class="item-image"> <!-- ko if: (typeof Photos !== 'undefined' && Photos.length > 0) --> <img data-bind="attr: { src: Photos[0].ImageUrl }" /> <button class="btn-magnifier" data-bind="click: PaxButton.OnSelect, css: { 'selected': PaxButton.IsSelected }"><span class="ico-mglass"></span></button> <!-- /ko --> </div> <div class="item-desc"> <p class="name" data-bind="text: Name"> </p> <p class="desc" data-bind="text: ShortDescription"></p> <div class="d-flex pt-1"> <!-- ko if: IsFreeItem --> <div class="price-box pt-1"> <p class="price"><span data-bind="i18n: $root.D.Terms.Free"></span></p> </div> <!-- /ko --> <!-- ko ifnot: IsFreeItem --> <!-- ko if: PriceType === 1 || PriceType === 2 || PriceType === 3 || PriceType === 4 || PriceType === 5 --> <div class="price-box pt-1"> <p class="price"><span data-bind="text: NumberHelper.FormatMoney(PriceBySelectedCurrency(), 2)"></span><span data-bind="html: CurrentCurrencySymbol"></span></p> <p class="price-desc" data-bind="text: PriceTypeName"></p> </div> <!-- /ko--> <!-- /ko --> <div class="select-box"> <!-- ko template: { name: 'tpl-controls-extra-button', data: PaxButton, afterRender: PaxButton.AfterRender } --><!-- /ko --> </div> </div> </div> </div> </div> </div> </div> <div class="d-none d-lg-flex booking-details-container"> <!-- ko template: { name: 'tpl-booking-engine-booking-details', data: $parent.BookingDetailsViewModel, afterRender: $parent.BookingDetailsViewModel.AfterRender } --><!-- /ko --> </div> </div> <div class="extras-footer d-lg-none text-center" data-bind="with: $parent.FooterViewModel"> <div class="extras-footer-container d-inline-block"> <div class="selection-info"> <a class="btn btn-link" data-bind="click: $parent.ClearAll,i18n: $root.D.Terms.ClearSelection" href="#" >Clear selection</a> <h2 data-bind="text: PaxInfo"></h2> </div> <div class="continue-box"> <div class="details-btn" data-bind="click: OnDetails, css: { 'open': IsDetailsOpen() }, text: DetailsButtonText"> </div> <div class="pay-now"> <p class="label" data-bind="i18n: $root.D.Terms.PayNow"></p> <p class="price"><span data-bind="text: $parent.NumberHelper.FormatMoney($parent.ShoppingCart.PrepaymentBySelectedCurrency(), 2)"></span> <!-- ko text: $parent.ShoppingCart.CurrencySymbol --><!-- /ko --></p> </div> <button class="btn btn-success" type="button" data-bind="click: $parent.Continue, i18n: $root.D.Terms.Continue"></button> </div> </div> </div> <!-- ko if: $parent.BookingDetailsViewModel.SelectedRooms().length > 0 --> <div class="check-room-footer" data-bind="with: $parent.FooterViewModel"> <div class="row"> <div class="col-lg-4 d-none d-lg-block"> <div class="guarantee d-inline-block"> <!-- ko if: FilterViewModel.CurrentHostel().PromotionalTexts().length > 0 && (FilterViewModel.CurrentHostel().PromotionalTexts()[0].Title.length > 0 || FilterViewModel.CurrentHostel().PromotionalTexts()[0].Subtitle.length > 0) --> <img src="Content/img/guaranteed.png" class="mr-1" style="float: none;" /> <div class="guarantee-text align-top pt-1"> <!-- ko if: FilterViewModel.CurrentHostel().PromotionalTexts()[0].Title.length > 0 --> <p data-bind="text: FilterViewModel.CurrentHostel().PromotionalTexts()[0].Title"></p> <!-- /ko --> </div> <!-- ko if: FilterViewModel.CurrentHostel().PromotionalTexts()[0].Subtitle.length > 0 > 0 --> <p class="small" data-bind="text: FilterViewModel.CurrentHostel().PromotionalTexts()[0].Subtitle"></p> <!-- /ko --> <!-- /ko --> </div> </div> <div class="col-lg-8 d-flex justify-content-center"> <div class="continue-col"> <div class="selection-info"> <h2 data-bind="text: PaxInfo"></h2> <a class="btn btn-link" data-bind="click: $parent.ClearAll, i18n: $root.D.Terms.ClearSelection" href="#">Clear selection</a> </div> <div class="continue-box"> <div class="details-btn" data-bind="click: OnDetails, css: { 'open': IsDetailsOpen() }, text: DetailsButtonText"> Details </div> <div class="pay-now"> <p class="label" data-bind="i18n: $root.D.Terms.PayNow"></p> <p class="price"><span data-bind="text: $parent.NumberHelper.FormatMoney($parent.ShoppingCart.PrepaymentBySelectedCurrency(), 2)"></span> <!-- ko text: $parent.ShoppingCart.CurrencySymbol --><!-- /ko --></p> </div> <button class="btn btn-success" type="button" data-bind="click: $parent.Continue, i18n: $root.D.Terms.Continue"></button> </div> </div> </div> </div> </div> <!-- /ko --> <div id="booking-details-modal" class="be-modal details-modal"> <div class="be-modal-content"> <!-- ko template: { name: 'tpl-booking-engine-booking-details', data: $parent.BookingDetailsViewModel, afterRender: $parent.BookingDetailsViewModel.AfterRender } --><!-- /ko --> </div> </div> <!-- ko if: SelectedExtra() != null --> <div data-bind="template: { name: 'tpl-booking-engine-extra-box', data: SelectedExtra }"></div> <!-- /ko --> </script> <script type="text/template" id="tpl-booking-engine-extra-box"> <div id="extra-light-box-modal" class="be-modal details-modal"> <div class="be-modal-content"> <div class="be-modal-header"> <h1 data-bind="text: Name"></h1> <a class="be-modal-close close-icon"></a> </div> <div class="be-modal-body"> <div class="d-flex info-container"> <div class="item-image"> <!-- ko if: (typeof Photos !== 'undefined' && Photos.length > 0) --> <img data-bind="attr: { src: Photos[0].ImageUrl }" /> <!-- /ko --> <div class="desc" data-bind="html: Description"> </div> </div> <div class="item-desc"> <div data-bind="visible: IsCalendarEnabled"> <h3 data-bind="i18n: D.Terms.SelectDate"></h3> <input type="hidden" id="extra-datepicker" readonly="readonly"> </div> <div class="pt-3"> <h3 data-bind="i18n: D.Terms.SelectAmount, visible: PriceType === 1"></h3> <div> <div class="float-left" data-bind="visible: PriceType === 1"> <!-- ko template: { name: 'tpl-controls-spinner', data: Guests } --><!-- /ko --> </div> <div class="float-right"> <button class="btn btn-outline-success float-right be-modal-close" data-bind="click: OnAddExtra"><span data-bind="text: ButtonCaption"></span></button> <div class="price-type-desc" data-bind="text: PriceTypeTranslation"></div> </div> </div> </div> </div> </div> </div> </div> </div> </script> <script type="text/template" id="tpl-booking-engine-step-payment-registration"> <div class="payment-column-left custom-margin cf"> <div class="payment-column-left payment-column-header cf"> <div class="white-box custom-margin cf personal-details-cell cf"> <h2 class="col-50p cf" data-bind="i18n: $root.D.Terms.PersonalDetails"></h2> <h2 class="col-50pr cf fb-login-button"> <div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="true" data-scope="public_profile,user_about_me,email"> </div> </h2> </div> </div> <div class="transparent-personal-details personal-details cf" data-bind="validationOptions: { insertMessages: false }"> <label class="required"><span data-bind="i18n: $root.D.Terms.FirstName"></span>:<span class="star"> *</span></label> <input type="text" class="textfield" name="fldFirstName" data-bind="value: FirstName"> <label for="fldFirstName" class="error" style="display: block;" data-bind="validationMessage: FirstName"></label> <label class="required"><span data-bind="i18n: $root.D.Terms.LastName"></span>:<span class="star"> *</span></label> <input type="text" class="textfield" name="fldLastName" data-bind="value: LastName"> <label for="fldLastName" class="error" style="display: block;" data-bind="validationMessage: LastName"></label> <label class="required"><span data-bind="i18n: $root.D.Terms.Email"></span>:<span class="star"> *</span></label> <input type="email" class="textfield" name="fldEmail" data-bind="value: Email"> <label for="fldEmail" class="error" style="display: block;" data-bind="validationMessage: Email"></label> <div data-bind="visible: PhoneFieldVisibility"> <label data-bind="css: {'required' : PhoneRequired}"><span data-bind="i18n: $root.D.Terms.Phone"></span>:<span class="star" data-bind="text: DisplayStar(PhoneRequired)"></span></label> <input type="tel" class="textfield" name="fldPhone" data-bind="value: Phone"> <label for="fldPhone" class="error" style="display: block;" data-bind="validationMessage: Phone"></label> </div> <div id="blockGender" data-bind="visible: GenderFieldVisibility"> <label data-bind="css: {'required' : GenderRequired}"><span data-bind="i18n: $root.D.Terms.Gender"></span>:<span class="star" data-bind="text: DisplayStar(GenderRequired)"></span></label> <input type="radio" name="fldGender" id="fldGenderMale" value="1" data-bind="checked: Gender" /> <label for="fldGenderMale" style="width: 30%; margin-top: 3px;">Male</label> <input type="radio" name="fldGender" id="fldGenderFemale" value="2" data-bind="checked: Gender" /> <label for="fldGenderFemale" style="width: 30%; margin-top: 3px;">Female</label> <input type="radio" name="fldGender" id="fldGenderX" value="4" data-bind="checked: Gender" /> <label for="fldGenderX" style="width: 30%; margin-top: 3px;">X</label> <label for="fldGender" class="error" style="display: block;margin-top: -5px;" data-bind="validationMessage: Gender"></label> </div> <div data-bind="visible: ArrivalTimeFieldVisibility" > <label data-bind="css: {'required' : ArrivalTimeRequired}"><span data-bind="i18n: $root.D.Terms.ArrivalTime"></span>:<span class="star" data-bind="text: DisplayStar(ArrivalTimeRequired)"></span></label> <div class="dropdown" id="fldArrivalTime" data-bind="customDropdown: { onValueSelected: ArrivalTimeValueSelected, addContentScroller: true, captionProperty: 'Caption', initialValue: ArrivalTime }"> <h5 class="displayed-value" data-bind="text: SelectedValue"></h5> <div class="dropdown-content dropdown-scrollable dropdown-arrivalTime" data-bind="foreach: { data: ArrivalTimes, as: 'item' }" style="overflow: hidden; max-height: 200px;"> <p data-bind="text: item.Caption, click: OnValueSelect"></p> </div> </div> <label for="fldArrivalTime" class="error" style="display: block;" data-bind="validationMessage: ArrivalTime"></label> </div> <div data-bind="visible: AddressFieldVisibility" class="og-form-field"> <label data-bind="css: {'required' : AddressRequired}" style="clear: both;"><span data-bind="i18n: $root.D.Terms.Address"></span>:<span class="star" data-bind="text: DisplayStar(AddressRequired)"></span></label> <input type="text" class="textfield" name="fldAddress" data-bind="value: Address"> <label for="fldAddress" class="error" style="display: block;" data-bind="validationMessage: Address"></label> </div> <div data-bind="visible: CityFieldVisibility" class="og-form-field"> <label data-bind="css: {'required' : CityRequired}" style="clear: both;"><span data-bind="i18n: $root.D.Terms.City"></span>:<span class="star" data-bind="text: DisplayStar(CityRequired)"></span></label> <input type="text" class="textfield" name="fldCity" data-bind="value: City"> <label for="fldCity" class="error" style="display: block;" data-bind="validationMessage: City"></label> </div> <div data-bind="visible: ZipFieldVisibility" class="og-form-field"> <label data-bind="css: {'required' : ZipRequired}" style="clear: both;"><span data-bind="i18n: $root.D.Terms.Zip"></span>:<span class="star" data-bind="text: DisplayStar(ZipRequired)"></span></label> <input type="text" class="textfield" name="fldZip" data-bind="value: Zip"> <label for="fldZip" class="error" style="display: block;" data-bind="validationMessage: Zip"></label> </div> <div data-bind="visible: CountryFieldVisibility" class="og-form-field"> <label data-bind="css: {'required' : CountryRequired}"><span data-bind="i18n: $root.D.Terms.Country"></span>:<span class="star" data-bind="text: DisplayStar(CountryRequired)"></span></label> <div tabindex="-1" class="dropdown" id="fldCountry" data-bind="customDropdown: { onValueSelected: CountrySelected, addContentScroller: true, captionProperty: 'Name', initialValue: InitialCountryCaption, countries: Countries}"> <h5 class="displayed-value" data-bind="text: SelectedValue"></h5> <div id="countriesList" class="dropdown-content dropdown-scrollable dropdown-country" data-bind="event: { mousemove: MouseMovedInDorpDown}, foreach: { data: Countries, as: 'item' }" style="overflow: hidden; max-height: 200px;"> <p data-bind="text: item.Name, click: OnValueSelect, attr: {'id': item.Code}, event: { mouseover: MouseOverElement}"></p> </div> </div> <label for="fldCountry" class="error" style="display: block;" data-bind="validationMessage: Country"></label> </div> <div data-bind="visible: TaxNumberVisibility"> <label data-bind="css: {'required' : TaxNumberRequired}"><span data-bind="i18n: $root.D.Terms.Phone"></span>:<span class="star" data-bind="text: DisplayStar(TaxNumberRequired)"></span></label> <input type="text" class="textfield" name="fldTaxNumber" data-bind="value: TaxNumber"> <label for="fldTaxNumber" class="error" style="display: block;" data-bind="validationMessage: TaxNumber"></label> </div> </div> </div> </script> <script type="text/template" id="tpl-booking-engine-step-payment-bank-transfer"> <div data-bind="visible: Visibility" class="transparent-bank-transfer-details personal-details"> <div data-bind="html: Details"> </div> </div> </script> <script type="text/template" id="tpl-booking-engine-step-payment"> <div data-bind="template: { name: 'tpl-booking-engine-terms-info', data: $data }"></div> <div data-bind="template: { name: 'tpl-booking-engine-alert-details', data: $data }"></div> <div class="d-flex main-container align-items-start"> <div class="d-flex flex-column" style="flex: 1;"> <h3 data-bind="i18n: $parent.D.Terms.PersonalDetails"></h3> <div class="row white-box personal"> <p class="col-12 pb-3 small" data-bind="i18n: $root.D.Terms.MandatoryInformation"> All information is mandatory, unless marked as "Optional". </p> <div class="col-12 col-sm-6 col-md-4"> <div class="form-group"> <input type="text" class="form-control" id="firstName" name="fldFirstName" data-bind="value: RegistrationFormViewModel.FirstName, validationElement: RegistrationFormViewModel.FirstName"> <span class="placeholder" data-bind="i18n: $root.D.Terms.FirstName"></span> <span class="validationMessage" style="display: block;" data-bind="validationMessage: RegistrationFormViewModel.FirstName"></span> </div> </div> <div class="col-12 col-sm-6 col-md-4"> <div class="form-group"> <input type="text" class="form-control" id="lastName" name="fldLastName" data-bind="value: RegistrationFormViewModel.LastName, validationElement: RegistrationFormViewModel.LastName"> <span class="placeholder" data-bind="i18n: $root.D.Terms.LastName"></span> <span class="validationMessage" style="display: block;" data-bind="validationMessage: RegistrationFormViewModel.LastName"></span> </div> </div> <div class="col-12 col-sm-6 col-md-4"> <div class="form-group has-error"> <input type="email" class="form-control" id="email" name="fldEmail" data-bind="value: RegistrationFormViewModel.Email, validationElement: RegistrationFormViewModel.Email"> <span class="placeholder" data-bind="i18n: $root.D.Terms.Email"></span> <span class="validationMessage" style="display: block;" data-bind="validationMessage: RegistrationFormViewModel.Email"></span> </div> </div> <div class="col-12 col-sm-6 col-md-4" data-bind="visible: RegistrationFormViewModel.CountryFieldVisibility"> <div class="form-group"> <div class="dropdown guest-data-dropdown" id="fldCountry" data-bind="customDropdown: { onValueSelected: RegistrationFormViewModel.CountrySelected, addContentScroller: true, captionProperty: 'Name', initialValue: RegistrationFormViewModel.InitialCountryCaption, disable: RegistrationFormViewModel.IsCancelled }"> <h5 class="displayed-value" data-bind="text: SelectedValue, validationElement: RegistrationFormViewModel.Country"></h5> <div class="dropdown-content dropdown-scrollable dropdown-country" data-bind="foreach: { data: RegistrationFormViewModel.Countries, as: 'item' }" style="overflow: hidden; max-height: 200px;"> <p data-bind="text: item.Name, click: OnValueSelect"></p> </div> </div> <span class="placeholder" data-bind="i18n: $root.D.Terms.National">Nationality (optional)</span> <span for="fldCountry" class="validationMessage" style="" data-bind="validationMessage: RegistrationFormViewModel.Country"></span> </div> </div> <div class="col-12 col-sm-6 col-md-4" data-bind="visible: RegistrationFormViewModel.ArrivalTimeFieldVisibility"> <div class="form-group"> <div class="dropdown guest-data-dropdown" id="fldArrivalTime" data-bind="customDropdown: { onValueSelected: RegistrationFormViewModel.ArrivalTimeValueSelected, addContentScroller: true, captionProperty: 'Caption', initialValue: RegistrationFormViewModel.ArrivalTime, disable: RegistrationFormViewModel.IsCancelled }"> <h5 class="displayed-value" data-bind="text: SelectedValue, validationElement: RegistrationFormViewModel.ArrivalTime"></h5> <div class="dropdown-content dropdown-scrollable dropdown-arrivalTime" data-bind="foreach: { data: RegistrationFormViewModel.ArrivalTimes, as: 'item' }" style="overflow: hidden; max-height: 200px;"> <p data-bind="text: item.Caption, click: OnValueSelect"></p> </div> </div> <span class="placeholder" data-bind="i18n: $root.D.Terms.ArrivalTime"></span> <span for="fldArrivalTime" class="validationMessage" style="display: block;" data-bind="validationMessage: RegistrationFormViewModel.ArrivalTime"></span> </div> </div> <div class="col-12 col-sm-6 col-md-4" data-bind="visible: RegistrationFormViewModel.PhoneFieldVisibility"> <div class="form-group"> <input type="number" class="form-control" id="phoneNumber" data-bind="value: RegistrationFormViewModel.Phone"> <span class="placeholder" data-bind="text: RegistrationFormViewModel.PhoneLabel"></span> <span class="validationMessage" style="display: block;" data-bind="validationMessage: RegistrationFormViewModel.Phone"></span> </div> </div> <div class="col-12 col-sm-6 col-md-4" data-bind="visible: RegistrationFormViewModel.AddressFieldVisibility"> <div class="form-group"> <input type="text" class="form-control" id="guestAddress" data-bind="value: RegistrationFormViewModel.Address"> <span class="placeholder" data-bind="i18n: $root.D.Terms.Address"></span> <span class="validationMessage" style="display: block;" data-bind="validationMessage: RegistrationFormViewModel.Address"></span> </div> </div> <div class="col-12 col-sm-6 col-md-4" data-bind="visible: RegistrationFormViewModel.CityFieldVisibility"> <div class="form-group"> <input type="text" class="form-control" id="city" data-bind="value: RegistrationFormViewModel.City"> <span class="placeholder" data-bind="i18n: $root.D.Terms.City"></span> <span class="validationMessage" style="display: block;" data-bind="validationMessage: RegistrationFormViewModel.City"></span> </div> </div> <div class="col-12 col-sm-6 col-md-4" data-bind="visible: RegistrationFormViewModel.GenderFieldVisibility"> <div class="form-group"> <select class="form-control" id="gender" data-bind="options: RegistrationFormViewModel.GenederCollection, optionsText: 'Name', optionsValue: 'Value', optionsCaption: $root.D.Phrase($root.D.Terms.ChooseGender), value: RegistrationFormViewModel.Gender"></select> <span class="placeholder" data-bind="i18n: $root.D.Terms.Gender"></span> <span for="gender" class="validationMessage" style="display: none;" data-bind="validationMessage: RegistrationFormViewModel.Gender"></span> </div> </div> <div class="col-12 col-sm-6 col-md-4" data-bind="visible: RegistrationFormViewModel.ZipFieldVisibility"> <div class="form-group"> <input type="text" class="form-control" id="zipCode" data-bind="value: RegistrationFormViewModel.Zip"> <span class="placeholder" data-bind="i18n: $root.D.Terms.Zip"></span> <span class="validationMessage" style="display: block;" data-bind="validationMessage: RegistrationFormViewModel.Zip"></span> </div> </div> <div class="col-12 col-sm-6 col-md-4" data-bind="visible: RegistrationFormViewModel.TaxNumberVisibility"> <div class="form-group"> <input type="text" class="form-control" id="taxNumber" data-bind="value: RegistrationFormViewModel.TaxNumber"> <span class="placeholder" data-bind="i18n: $root.D.Terms.TaxNumber"></span> <span class="validationMessage" style="display: block;" data-bind="validationMessage: RegistrationFormViewModel.TaxNumber"></span> </div> </div> <div class="col-12"> <div class="form-group"> <textarea class="form-control" data-bind="value: CreditCardFormViewModel.Notes"></textarea> <span class="placeholder" data-bind="i18n: $root.D.Terms.Note"></span> </div> </div> </div> <h3 data-bind="i18n: $root.D.Terms.PleaseAcceptPolicies">Please accept our policies before proceeding</h3> <div> <div class="col-12 booking-engine-checkbox" data-bind="visible: EmailConsentEnabled"> <input type="checkbox" id="offer" data-bind="checked: EmailConsentAccepted"> <label for="offer"> <b data-bind="i18n: $root.D.Terms.OffersAndPromotions">Offers and promotions: </b> <span data-bind="text: EmailConsentText">I authorize Goodbye Lenin Hostel to send em their offers and promotions.</span> </label> <div class="validationMessage" style="display: block;" data-bind="validationMessage: EmailConsentAccepted"></div> </div> <div class="col-12 booking-engine-checkbox"> <input type="checkbox" id="reservation" data-bind="checked: AcceptTermsAndConditions"> <label for="reservation"> <span data-bind="event: { click: function(data, event, id) { ShowTermsDetails($data.TermsAndConditions()) }}"> <b data-bind="i18n: $root.D.Terms.ReadAndAcceptTheConditions1">Reservation terms:</b> <span data-bind="i18n: $root.D.Terms.ReadAndAcceptTheConditions2">I confirm I have the reservation conditions and the cancellation policy.</span> </span> </label> <div class="validationMessage" style="display: block;" data-bind="validationMessage: AcceptTermsAndConditions"></div> </div> </div> <div class="coupon-panel-mobile"> <h3 data-bind="i18n: $parent.D.Terms.IfYouHaveCouponQuestion">Have a coupon?</h3> <label class="coupon-error" style="display: block;" data-bind="text: CouponError"></label> <form id="tokenForm" class="fdm-coupon-form"> <input type="text" class="textfield fdm-couponcode" data-bind="value: CouponCode"> <div class="center-text fdm-coupon-apply-btn"> <input type="submit" class="btn custom-bg" data-bind="click: ApplyCouponCode, value: $parent.D.Phrase($parent.D.Terms.ApplyCode), enable: ApplyCouponCodeEnable" value="Apply code"> </div> </form> </div> <h3 data-bind="i18n: $parent.D.Terms.PaymentDetails"></h3> <div> <div class="payment-item checked" data-bind="visible: CreditCardFormViewModel.ShowCCPanel"> <div class="header"> <input type="radio" id="credit" name="payment_method" data-bind="checked: CreditCardFormViewModel.ShowCCPanel, checkedValue: true" /> <label for="credit"> <span data-bind="i18n: $root.D.Terms.CreditAndDebitCards">Credit & Debit cards</span> <span class="small" data-bind="i18n: $root.D.Terms.TransactionFeeApply">Transaction fee may apply</span> </label> <div class="payment-cards"> <img data-bind="hidden: CreditCardFormViewModel.ExcludedChannexCardTypes.indexOf('visa') > -1" src="Content/img/visa.png" /> <img data-bind="hidden: CreditCardFormViewModel.ExcludedChannexCardTypes.indexOf('mastercard') > -1" src="Content/img/mastercard.png" /> <img data-bind="hidden: CreditCardFormViewModel.ExcludedChannexCardTypes.indexOf('maestro') > -1" src="Content/img/maestro.png" /> <img data-bind="hidden: CreditCardFormViewModel.ExcludedChannexCardTypes.indexOf('american-express') > -1" src="Content/img/american-express.png" /> </div> </div> <div class="content"> <div class="row button-box"> <div class="col-12 col-sm-6"> <div class="guarantee pt-2 pl-3"> <!-- ko if: GetPromotionalTextTitle().length > 0 --> <img src="Content/img/guaranteed.png" class="mr-1" style="float: none;" /> <div class="guarantee-text"> <p data-bind="text: GetPromotionalTextTitle()">Best rate guaranteed</p> <p class="small" data-bind="text: GetPromotionalTextSubtitle()">No extra fees! FREE Cancelation</p> </div> <!-- /ko --> </div> </div> <div class="col-12 col-sm-6"> <div class="continue-box float-right"> <div class="details-btn" data-bind="click: OnDetails"> Details </div> <div class="pay-now"> <p class="label" data-bind="i18n: $root.D.Terms.PayNow"></p> <p class="price"><span data-bind="text: NumberHelper.FormatMoney(ShoppingCart.PrepaymentBySelectedCurrency(), 2)"></span> <!-- ko text: ShoppingCart.CurrencySymbol --><!-- /ko --></p> </div> <button class="btn btn-success" type="button" data-bind="click: OnSubmitCC"> <p data-bind="text: SubmitButtonText">Pay now</p> <p class="small" data-bind="i18n: $root.D.Terms.GetInstantConfirmation">Get instant confirmation</p> </button> </div> </div> </div> </div> </div> <div data-bind="visible: CreditCardFormViewModel.AcceptBankTransfer, css: CreditCardFormViewModel.BankTransferClass"> <div class="header banktransfer-header"> <input type="radio" id="bankTransfer" name="payment_method" data-bind="checked: CreditCardFormViewModel.Visibility, checkedValue: false" /> <label for="bankTransfer"> <span class="banktransfer-header-text" data-bind="i18n: $root.D.Terms.BankTransfer">Bank Transfer</span> </label> </div> <div class="content banktransfer-content"> <div class=" row" style="padding-top:25px"> <div class="col-12 col-sm-6"> <div class="form-group"> <p data-bind="html: CreditCardFormViewModel.BankTransferInfo()"></p> </div> </div> </div> <div class="row button-box"> <div class="col-12 col-sm-6"> <div class="guarantee pt-2 pl-3"> <!-- ko if: GetPromotionalTextTitle().length > 0 --> <img src="Content/img/guaranteed.png" class="mr-1" style="float: none;" /> <div class="guarantee-text"> <p data-bind="text: GetPromotionalTextTitle()">Best rate guaranteed</p> <p class="small" data-bind="text: GetPromotionalTextSubtitle()">No extra fees! FREE Cancelation</p> </div> <!-- /ko --> </div> </div> <div class="col-12 col-sm-6"> <div class="continue-box float-right"> <div class="details-btn" data-bind="click: OnDetails"> Details </div> <div class="pay-now"> <p class="label" data-bind="i18n: $root.D.Terms.PayNow"></p> <p class="price"><span data-bind="text: NumberHelper.FormatMoney(0, 2)"></span> <!-- ko text: ShoppingCart.CurrencySymbol --><!-- /ko --></p> </div> <button class="btn btn-success" type="button" data-bind="click: OnSubmitBankTransfer"> <p data-bind="i18n: $root.D.Terms.PayLater">Pay later</p> <p class="small" data-bind="i18n: $root.D.Terms.ViaBankTransfer">via bank transfer</p> </button> </div> </div> </div> </div> </div> <div class="payment-item" style="visibility: hidden"> <div class="header"> <input type="radio" id="paypal" name="payment_method_paypal" /> <label for="paypal"> <span>Pay with Paypal</span> <span class="small" data-bind="i18n: $root.D.Terms.TransactionFeeApply">Transaction fee may apply</span> </label> </div> <div class="content"> </div> </div> </div> </div> <div class="d-none d-lg-flex booking-details-container"> <!-- ko template: { name: 'tpl-booking-engine-booking-details', data: $parent.BookingDetailsViewModel, afterRender: $parent.BookingDetailsViewModel.AfterRender } --><!-- /ko --> </div> </div> <div id="booking-details-modal" class="be-modal details-modal"> <div class="be-modal-content"> <a class="be-modal-close close-icon"></a> <!-- ko template: { name: 'tpl-booking-engine-booking-details', data: $parent.BookingDetailsViewModel, afterRender: $parent.BookingDetailsViewModel.AfterRender } --><!-- /ko --> </div> </div> <div id="cc-channex-dropin" class="be-modal alert-info-modal cc-channex-modal" style="display: none;"> <div class="be-modal-content be-stripe-modal" style=" padding-bottom: 10px"> <div class="payment-method-header"> <i class="fas fa-credit-card fa-2x payment-method-image"></i> <span class="payment-method-name">Credit Card</span> </div> <div data-bind="html: ccIframe"> </div> <div id="adyen-dropin-footer" class="fdm-coupon-form" style="padding-top: 10px; padding-bottom: 0px; justify-content: center"> <div class="center-text fdm-coupon-apply-btn payment-button"> <div class="btn-wrapper"> <i class="fas fa-lock fa-2x"></i> <input type="button" data-bind="click: OnSubmitCCChannex" id="cc-channex-dropin-ok-btn" value="OK" style="display: block" /> </div> </div> </div> </div> </div> </script> <script type="text/template" id="tpl-booking-engine-step-confirmation"> <div class="main-container"> <h3 data-bind="i18n: $root.D.Terms.ReservationDetails"></h3> <div class="white-box reservation-box"> <div class="row reservation-details"> <div class="col-12 col-sm-12 col-md-4 mb-3"> <div class="d-flex hostel-address"> <div class="item-image"> <img data-bind="attr: { src: $parent.FilterViewModel.CurrentHostel() ? $parent.FilterViewModel.CurrentHostel().MainPhoto() : '' }" /> </div> <div class="pl-4"> <h4 data-bind="text: $parent.FilterViewModel.CurrentHostel().Name"></h4> <p> <span data-bind="text: $parent.HeaderViewModel.PropertyAddress"></span> <br /> <span data-bind="text: $parent.FilterViewModel.CurrentHostel().City"></span>, <span data-bind="text: $parent.HeaderViewModel.PropertyCountry"> </span> </p> </div> </div> </div> <div class="col-12 col-sm-6 col-md-4 mb-3"> <h4 data-bind="i18n: $root.D.Terms.ContactInformation"></h4> <p><span data-bind="i18n: $root.D.Terms.Phone"></span>: <a href="#" data-bind="text: $parent.HeaderViewModel.PropertyPhone"></a></p> <p><span data-bind="i18n: $root.D.Terms.Email"></span>: <a href="#" data-bind="text: $parent.FilterViewModel.CurrentHostel().Email()"></a></p> </div> <div class="col-12 col-sm-6 col-md-4 mb-3"> <h4 data-bind="i18n: $root.D.Terms.YourReservationCodeIs"></h4> <p class="number" data-bind="text: $parent.BookingThanksViewModel.ReservationCode"></p> </div> </div> </div> <div class="white-box mt-4"> <div class="row"> <div class="col-sm-12 col-md-12 col-lg-4 mb-3"> <h4 data-bind="i18n: $root.D.Terms.AboutYourReservation"></h4> <div class="d-flex"> <div class="w-33"> <p data-bind="i18n: $root.D.Terms.CheckIn"></p> <p data-bind="text: $parent.FilterViewModel.ArrivalDateFormatted"></p> </div> <div class="w-33"> <p data-bind="i18n: $root.D.Terms.CheckOut"></p> <p data-bind="text: $parent.FilterViewModel.CheckOutDate"></p> </div> <div class="w-33"> <p data-bind="i18n: $root.D.Terms.PAX"></p> <p><span data-bind="text: $parent.FilterViewModel.MaximumGuests"></span> <span data-bind="i18n: $root.D.Terms.Adults"></span></p> </div> </div> <!-- ko foreach: Enumerable.From(ShoppingCart.GetItemsConfirmation()).ToArray() --> <div> <h5> <span data-bind="i18n: $root.D.Terms.Room"></span> <span data-bind="text: ($index() + 1)"></span> </h5> <span> <span data-bind="text: CountString"></span> - <span data-bind="text: Name"></span> <span class="badge badge-success ml-3" style="visibility:hidden">20% off</span> </span> </div> <!-- /ko --> <!-- ko if: Enumerable.From(ShoppingCart.GetItems()).Where('$.IsProcessed && $.ItemType == "Extra"').ToArray().length > 0 --> <div> <h5 data-bind="i18n: $root.D.Terms.Extras"></h5> <!-- ko foreach: Enumerable.From(ShoppingCart.GetItems()).Where('$.IsProcessed && $.ItemType == "Extra"').ToArray() --> <div> <span data-bind="text: CountString"></span> - <span data-bind="text: Name"></span> </div> <!-- /ko --> </div> <!-- /ko --> </div> <div class="col-sm-12 col-md-6 col-lg-4 mb-3"> <div> <!-- ko if: $parent.FilterViewModel.ShowPromotions() --> <h4 data-bind="i18n: $root.D.Terms.PromotionsApplied"></h4> <ul class="ticked-list mb-4"> <!-- ko if: $parent.FilterViewModel.CurrentHostel().Promotions()[0].FirstPromotion.length > 0 --> <li data-bind="text: $parent.FilterViewModel.CurrentHostel().Promotions()[0].FirstPromotion"></li> <!-- /ko --> <!-- ko if: $parent.FilterViewModel.CurrentHostel().Promotions()[0].SecondPromotion.length > 0 --> <li data-bind="text: $parent.FilterViewModel.CurrentHostel().Promotions()[0].SecondPromotion"></li> <!-- /ko --> <!-- ko if: $parent.FilterViewModel.CurrentHostel().Promotions()[0].ThirdPromotion.length > 0 --> <li data-bind="text: $parent.FilterViewModel.CurrentHostel().Promotions()[0].ThirdPromotion"></li> <!-- /ko --> </ul> <!-- /ko --> <!-- ko if: $parent.FilterViewModel.CurrentHostel().PropertyAdditionalSettings().length > 0 --> <h4 data-bind="i18n: $root.D.Terms.Other"></h4> <ul class="ticked-list"> <!-- ko if: $parent.FilterViewModel.CurrentHostel().PropertyAdditionalSettings()[0].FirstAdditional.length > 0 --> <li> <span data-bind="text: $parent.FilterViewModel.CurrentHostel().PropertyAdditionalSettings()[0].FirstAdditional"></span> <!-- ko if: $parent.FilterViewModel.CurrentHostel().PropertyAdditionalSettings()[0].FirstInfo.length > 0 --> <!-- ko template: { name: 'tpl-controls-tooltip-button', data: $parent.FilterViewModel.CurrentHostel().AdditionalSettingsToolTipFirst() } --><!-- /ko --> <!-- /ko --> </li> <!-- /ko --> <!-- ko if: $parent.FilterViewModel.CurrentHostel().PropertyAdditionalSettings()[0].SecondAdditional.length > 0 --> <li> <span data-bind="text: $parent.FilterViewModel.CurrentHostel().PropertyAdditionalSettings()[0].SecondAdditional"></span> <!-- ko if: $parent.FilterViewModel.CurrentHostel().PropertyAdditionalSettings()[0].SecondInfo.length > 0 --> <!-- ko template: { name: 'tpl-controls-tooltip-button', data: $parent.FilterViewModel.CurrentHostel().AdditionalSettingsToolTipSecond() } --><!-- /ko --> <!-- /ko --> </li> <!-- /ko --> <!-- ko if: $parent.FilterViewModel.CurrentHostel().PropertyAdditionalSettings()[0].ThirdAdditional.length > 0 --> <li> <span data-bind="text: $parent.FilterViewModel.CurrentHostel().PropertyAdditionalSettings()[0].ThirdAdditional"></span> <!-- ko if: $parent.FilterViewModel.CurrentHostel().PropertyAdditionalSettings()[0].ThirdInfo.length > 0 --> <!-- ko template: { name: 'tpl-controls-tooltip-button', data: $parent.FilterViewModel.CurrentHostel().AdditionalSettingsToolTipThird() } --><!-- /ko --> <!-- /ko --> </li> <!-- /ko --> </ul> <!-- /ko --> </div> </div> <div class="col-sm-12 col-md-6 col-lg-4 mb-3"> <h4 data-bind="i18n: $root.D.Terms.AboutYourPayment">About your payment</h4> <div class="final-price-box"> <div class="price-label" data-bind="i18n: $root.D.Terms.TotalPrice"></div> <!-- ko if: ($parent.BookingThanksViewModel.TotalPrice()) --> <div class="final-price" data-bind="text: NumberHelper.FormatMoney($parent.BookingThanksViewModel.TotalPrice(), 2)"></div> <!-- /ko --> <!-- ko ifnot: ($parent.BookingThanksViewModel.TotalPrice()) --> <div class="final-price" data-bind="text: NumberHelper.FormatMoney(ShoppingCart.SubtotalBySelectedCurrency(), 2)"></div> <!-- /ko --> <!-- ko text: ShoppingCart.CurrencySymbol --><!-- /ko --> </div> <div class="final-price-box"> <!-- ko if: (ShoppingCart.FeeType === 1) --> <div class="price-label"> <p class="prepayment" data-bind="i18n: $root.D.Terms.PayNowOnlyBookingFee"></p> <mark><span class="paynow" data-bind="i18n: $root.D.Terms.PayNowOnlyBookingFeeComment"></span></mark> </div> <div class="final-price" data-bind="text: NumberHelper.FormatMoney(ShoppingCart.PrepaymentBySelectedCurrency(), 2)"></div> <!-- ko text: ShoppingCart.CurrencySymbol --><!-- /ko --> <!-- ko if: (ShoppingCart.FeeType === 2) --> <div class="price-label"> <p class="prepayment" data-bind="i18n: $root.D.Terms.PayNowPercentPrepayment"></p> </div> <div class="final-price" data-bind="text: NumberHelper.FormatMoney(ShoppingCart.PrepaymentBySelectedCurrency(), 2)"></div> <!-- ko text: ShoppingCart.CurrencySymbol --><!-- /ko --> <!-- ko ifnot: ShoppingCart.CurrencyCode() == "GBP" --> <mark> <span data-bind="formatString: { format: $root.D.Phrase($root.D.Terms.ChargedInGBPInAmountOfGBP), args: [NumberHelper.FormatMoney(ShoppingCart.PrepaymentGBP(), 2), $root.D.Phrase($root.D.Terms.FDMName)] }"></span> </mark> <!-- /ko --> <!-- /ko --> <!-- /ko --> </div> <div class="final-price-box due"> <div class="price-label" data-bind="i18n: $root.D.Terms.AmountDue"></div> <!-- ko if: ($parent.BookingThanksViewModel.BalanceDue()) --> <div class="final-price" data-bind="text: NumberHelper.FormatMoney($parent.BookingThanksViewModel.BalanceDue(), 2)"></div> <!-- /ko --> <!-- ko ifnot: ($parent.BookingThanksViewModel.BalanceDue()) --> <div class="final-price" data-bind="text: NumberHelper.FormatMoney(ShoppingCart.PayAtArrivalBySelectedCurrency(), 2)"></div> <!-- /ko --> <!-- ko text: ShoppingCart.CurrencySymbol --><!-- /ko --> </div> </div> </div> </div> </div> </script> <script type="text/template" id="tpl-booking-engine-step-confirmation-error"> <div class="main-container"> <div class="white-box booking-cancelled cf custom-margin"> <h4 data-bind="i18n: $root.D.Terms.StripeErrorMessage">ERROR INFORMATION !</h4> </div> <div class="white-box reservation-box"> <div class="row reservation-details"> <div class="col-12 col-sm-12 col-md-4 mb-3"> <div class="d-flex hostel-address"> <div class="item-image"> <img data-bind="attr: { src: $parent.FilterViewModel.CurrentHostel() ? $parent.FilterViewModel.CurrentHostel().MainPhoto() : '' }" /> </div> <div class="pl-4"> <h4 data-bind="text: $parent.FilterViewModel.CurrentHostel().Name"></h4> <p> <span data-bind="text: $parent.HeaderViewModel.PropertyAddress"></span> <br /> <span data-bind="text: $parent.FilterViewModel.CurrentHostel().City"></span>, <span data-bind="text: $parent.HeaderViewModel.PropertyCountry"> </span> </p> </div> </div> </div> <div class="col-12 col-sm-6 col-md-4 mb-3"> <h4 data-bind="i18n: $root.D.Terms.ContactInformation"></h4> <p><span data-bind="i18n: $root.D.Terms.Phone"></span>: <a href="#" data-bind="text: $parent.HeaderViewModel.PropertyPhone"></a></p> <p><span data-bind="i18n: $root.D.Terms.Email"></span>: <a href="#" data-bind="text: $parent.FilterViewModel.CurrentHostel().Email()"></a></p> </div> </div> </div> </div> </script> <script type="text/template" id="tpl-booking-engine-footer"> <div class="footer"> <h2 data-bind="i18n: $root.D.Terms.FooterExclusive"></h2> <div class="row"> <div class="col-sm-3 col-6 mb-3"> <div class="footer-item"> <div class="icon"> <img src="Content/img/globe.png" /> </div> <div data-bind="i18n: $root.D.Terms.FooterBestOnline"></div> <div data-bind="i18n: $root.D.Terms.FooterRateGuarantee"></div> </div> </div> <div class="col-sm-3 col-6 mb-3" data-bind="visible: NoBookingFeesVisible"> <div class="footer-item"> <div class="icon"> <img src="Content/img/shield.png" /> </div> <div data-bind="i18n: $root.D.Terms.FooterNoBooking"></div> <div data-bind="i18n: $root.D.Terms.FooterFees"></div> </div> </div> <div class="col-sm-3 col-6 mb-3"> <div class="footer-item"> <div class="icon"> <img src="Content/img/bolt.png" /> </div> <div data-bind="i18n: $root.D.Terms.FooterImmediate"></div> <div data-bind="i18n: $root.D.Terms.FooterConfirmation"></div> </div> </div> <div class="col-sm-3 col-6 mb-3"> <div class="footer-item"> <div class="icon"> <img src="Content/img/trophy.png" /> </div> <div data-bind="i18n: $root.D.Terms.FooterGreat"></div> <div data-bind="i18n: $root.D.Terms.FooterService"></div> </div> </div> </div> </div> </script> <div class="busyIndicator" style="display: none;"> <div class="content"> <img src="/Content/img/loading.gif" alt="Loading..."/> </div> </div> <div id="beModal" class="be-modal"> <div class="be-modal-content"> <div class="be-modal-header"> <span class="be-modal-close">×</span> <h2>Error</h2> </div> <div class="be-modal-body"> <p id="be-modal-text"></p> </div> <div class="be-modal-footer"> <div> <input type="button" class="be-modal-close be-modal-close-button" value="Ok" /> </div> </div> </div> </div> <div id="rate-info" class="be-modal"> <div class="be-rate-info-content"> <div class="be-rate-info-header be-rate-info-header-underline"> <span class="be-modal-close">×</span> <h1 data-bind="i18n: $root.D.Terms.RateInformation"></h1> </div> <div class="be-modal-body"> <p id="rate-info-rate-name"></p> <p id="rate-info-text" class="be-rate-info-text"></p> </div> </div> </div> <script type="text/template" id="tpl-booking-engine-terms-info"> <div id="terms-info" class="be-modal details-modal" style="display:none;"> <div class="be-modal-content"> <div class="be-modal-header"> <h1 data-bind="i18n: $root.D.Terms.TermsAndConditions"></h1> <a class="be-modal-close close-icon"></a> </div> <div class="be-modal-body"> <p id="terms-info-rate-name"></p> <div id="terms-info-text" data-bind="html: TermsAndConditions"></div> </div> <span data-bind="i18n: $root.D.Terms.TermsAndConditionsText"></span> </div> </div> </script> <div id="email-template-info" class="be-modal"> <div class="be-terms-info-content"> <div class="be-rate-info-header be-rate-info-header-underline"> <span class="be-modal-close">×</span> <h1>Email template</h1> </div> <div class="be-modal-body" style="padding:16px;"> <p id="terms-info-rate-name"></p> <div id="email-template-content"> </div> </div> </div> </div> <script type="text/template" id="tpl-booking-engine-cooke-policy"> <div data-bind="visible: visibility" class="be-cooke-policy-container"> <div style="width: 20%;float:left;height:30px;"></div> <div style="width: 60%;float:left;height:30px;text-align: center;display:table;"> <p class="be-cooke-policy-text" data-bind="i18n: $root.D.Terms.CookeWarning"></p> </div> <div style="width: 20%;float:left;height:30px;"> <button data-bind="click: confirmButtonClick" class="be-cooke-policy-button custom-bg">Ok</button> </div> </div> </script> <script type="text/template" id="tpl-booking-engine-photo-slider"> <div class="be-photo-slider"> <div class="be-photo-slider-container"> <div class="be-photo-slider-main"> <!-- ko if: (typeof Photos !== 'undefined' && Photos().length > 1) --> <div data-bind="click: MainPrev" class="be-main-prev"><i class="fas fa-chevron-circle-left"></i></div> <!-- /ko --> <!-- ko if: (typeof SelectedPhoto() !== 'undefined') --> <img data-bind="attr: { src: SelectedPhoto().photo.ImageUrl }" /> <!-- /ko --> <!-- ko if: (typeof Photos !== 'undefined' && Photos().length > 1) --> <div data-bind="click: MainNext" class="be-main-next"><i class="fas fa-chevron-circle-right"></i></div> <!-- /ko --> </div> </div> <div class="be-photo-slider-container"> <div class="be-photo-slider-details"> <!-- ko if: (typeof Photos !== 'undefined' && Photos().length > 1) --> <div class="be-photo-slider-thumbnails"> <div data-bind="click: Prev" class="prev"> <i class="fa fa-chevron-left"></i> </div> <div class="be-photo-slider-thumbnails-list" data-bind="foreach: Photos"> <div class="be-photo-slider-thumbnail"> <img data-bind="click: $parent.Selected, attr: { src: photo.ImageUrl }"> </div> </div> <div data-bind="click: Next" class="next"> <i class="fa fa-chevron-right"></i> </div> </div> <!-- /ko --> </div> </div> </div> </script> <div id="stripe-info-modal" class="be-modal alert-info-modal" style="display: none;"> <div class="be-modal-content be-stripe-modal"> <div class="be-modal-header"> <a class="be-modal-close close-icon"></a> </div> <div class="session-info-stripe"> <h2><span class="timer"></span></h2> </div> <div class="sr-root"> <div class="sr-main"> <div id="enabled-accounts-section"> <form id="payment-form" class="sr-payment-form"> <div class="sr-form-row"> <label class="stripe-label" for="card-element">Enter your card details</label> <div class="sr-input sr-card-element" id="card-element"></div> </div> <div class="sr-form-row"> <div class="sr-field-error" id="card-errors" role="alert"></div> <button id="submit"> <div class="stripe-spinner hidden" id="spinner"></div> <span id="button-text">Pay</span><span id="order-amount"></span> </button> </div> <div id="cc-save-info-text"></div> </form> <div class="sr-result hidden sr-result-text"> <p>Payment completed<br /></p> </div> </div> </div> </div> </div> </div> <div id="adyen-dropin" class="be-modal alert-info-modal" style="display: none;"> <div class="be-modal-content be-stripe-modal" style=" padding-bottom: 10px"> <div class="session-info-adyen" style="padding-bottom:10px;"> <h2><span class="timer"></span></h2> </div> <div id="adyen-dropin-container"> </div> <div id="adyen-dropin-footer" class="fdm-coupon-form" style="display: none; padding-top: 10px; padding-bottom: 0px; justify-content: center"> <div class="center-text fdm-coupon-apply-btn"> <input type="button" id="adyen-dropin-try-again-btn" class="btn custom-bg adyen-modal-button" value="Try again" style="display: none" /> </div> <div class="center-text fdm-coupon-apply-btn"> <input type="button" id="adyen-dropin-ok-btn" class="btn custom-bg adyen-modal-button" value="OK" style="display: none" /> </div> </div> </div> </div> <div id="alert-info-modal" class="be-modal alert-info-modal" style="display: none;"> <div class="be-modal-content"> <div class="be-modal-header"> <h1 id="alert-info-modal-header"></h1> <a class="be-modal-close close-icon"></a> </div> <div class="be-modal-body"> <p id="alert-info-rate-name"></p> <div id="alert-info-text"></div> </div> <div class="alert-box"> <button class="btn btn-success be-modal-close" data-bind="i18n: D.Terms.Continue"></button> <button class="btn btn-warning be-modal-close" data-bind="i18n: D.Terms.ChooseRooms"></button> </div> </div> </div> <div id="processing-payment-info-modal" class="be-modal alert-info-modal" style="display: none;"> <div id="modal-overlay"></div> <div id="modal-box"> <div id="modal-content"> <div id="modal-message"></div> <div id="modal-message-dynamic">Loading...</div> <div id="modal-loader"><img src="/Content/img/loading-white.gif" alt="Loading..." /></div> </div> </div> </div> <script type="text/template" id="tpl-booking-engine-booking-cancelled"> <div class="white-box booking-cancelled cf custom-margin" data-bind="visible: IsCancelled"> <h2 data-bind="i18n: $root.D.Terms.BookingCancelled"></h2> </div> </script> <!-- SPECIAL WIDGET SCRIPT ! --> <!-- SPECIAL WIDGET SCRIPT ! --> <script type="text/javascript"> var BookingEngine = BookingEngine || {}; BookingEngine.APISettings = [{"Name":"BookingEngineTestMode","Value":"False"},{"Name":"PropertyName","Value":"Alberg Costa Brava - Tot Lleure SL"},{"Name":"PropertyWebsite","Value":"www.albergcostabrava.com"},{"Name":"PropertyEmail","Value":"info@albergcostabrava.com"},{"Name":"LogoUrl","Value":"https:\/\/www.filepicker.io\/api\/file\/dul1VDM5RnCjz19STD85"},{"Name":"BeLogoUrl","Value":"https:\/\/www.filepicker.io\/api\/file\/u5I38ITey0HP1mOoOSwW"},{"Name":"PropertyAddress","Value":"B17750696 "},{"Name":"PropertyPhone","Value":"972 380 384"},{"Name":"PropertyCountry","Value":"Spain"},{"Name":"PropertyIsSaleTaxDisabled","Value":"false"},{"Name":"BookingEngineFeeType","Value":"0"},{"Name":"BookingEngineConfirmationLetter","Value":"1015"},{"Name":"BookingEngineTermsAndConditions","Value":"1015"},{"Name":"BookingEngineImportantNotes","Value":"3"},{"Name":"BookingEngineEngineTheme","Value":"light"},{"Name":"BookingEngineMainColor","Value":"#027DCB"},{"Name":"BookingEngineHeaderBackgroundColor","Value":"#BEB3AB"},{"Name":"BookingEngineBodyBackgroundColor","Value":"#FFFFFF"},{"Name":"BookingEngineButtonBackgroundColor","Value":"#8A8A8A"},{"Name":"BookingEngineBorderColor","Value":"#027DCB"},{"Name":"BookingEngineBorderStyle","Value":"40"},{"Name":"BookingEngineDefaultCurrency","Value":"EUR"},{"Name":"BookingEngineStandardRate","Value":"1"},{"Name":"BookingEngineNonRefundableRate","Value":"2"},{"Name":"BookingEngineSupportedLanguages","Value":"PL,EN,ES,PT,RU,FR,ZH,NL,DE,HU,IT,UK,SL,HE,RO,TH"},{"Name":"BookingEngineDefaultLanguage","Value":"ES"},{"Name":"BookingEngineMinimumAdvanceDays","Value":"1"},{"Name":"BookingEngineMaximumAdvanceDays","Value":"365"},{"Name":"BookingEngineMinimumStay","Value":"1"},{"Name":"BookingEngineMaximumStay","Value":"10"},{"Name":"BookingEngineMaximumGuests","Value":"8"},{"Name":"BookingEngineGenderFieldDisplayed","Value":"true"},{"Name":"BookingEngineGenderFieldRequired","Value":"2"},{"Name":"BookingEnginePhoneFieldDisplayed","Value":"true"},{"Name":"BookingEnginePhoneFieldRequired","Value":"3"},{"Name":"BookingEngineArrivalTimeFieldDisplayed","Value":"true"},{"Name":"BookingEngineArrivalTimeFieldRequired","Value":"2"},{"Name":"BookingEngineGuestAddressFieldDisplayed","Value":"false"},{"Name":"BookingEngineGuestAddressFieldRequired","Value":"2"},{"Name":"BookingEngineActiveRooms","Value":"1,2,3,4,5,6"},{"Name":"BookingEngineEnablePricePerOccupancy","Value":"true"},{"Name":"BookingEngineOpportunityEmail","Value":"1"},{"Name":"BookingEngineCutOffPolicy","Value":""},{"Name":"BookingEngineNationalityFieldRequired","Value":"3"},{"Name":"BookingEngineCityFieldRequired","Value":"2"},{"Name":"BookingEngineZipCodeFieldRequired","Value":"2"},{"Name":"BookingEngineViewEasyField","Value":"1"},{"Name":"BookingEngineViewFlexibleField","Value":"1"},{"Name":"BookingEnginePropertyGroupWhenNoAvailabilty","Value":"false"},{"Name":"BookingEnginePropertyFriendWhenNoAvailabilty","Value":"false"},{"Name":"BookingEngineAcceptPayments","Value":"2,3"},{"Name":"BookingEngineAcceptPaymentsBankTransfer","Value":"false"},{"Name":"BookingEnginePropertyGroup","Value":""},{"Name":"BookingEnginePropertyFriend","Value":""},{"Name":"BookingEngineCheckInFrom","Value":""},{"Name":"BookingEngineCheckInTo","Value":""},{"Name":"BookingEngineLinkType","Value":"link"},{"Name":"BookingEngineRequestCreditCard","Value":"true"},{"Name":"BookingEngineWidth","Value":""},{"Name":"BookingEngineHeight","Value":""},{"Name":"BookingEngineSpecialWidgetCode","Value":""},{"Name":"BookingEngineCookeWarningEnabled","Value":"false"},{"Name":"BookingEngineGoogleAnalyticsTrackingId","Value":""},{"Name":"BookingEngineGoogleTagManagerHeadCode","Value":""},{"Name":"BookingEngineGoogleTagManagerBodyCode","Value":""},{"Name":"BookingEnginePromotionOldPrices","Value":"10"},{"Name":"BookingEngineTripadvisorWidget","Value":""},{"Name":"BookingEngineGoogleMap","Value":"<iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d2947.8564646612886!2d3.147775351021265!3d42.36689814256014!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12ba7cc30c6a0601%3A0x7aadb011d1a2f388!2sAlberg%20Costa%20Brava!5e0!3m2!1ses!2ses!4v1591636494190!5m2!1ses!2ses\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0;\" allowfullscreen=\"\" aria-hidden=\"false\" tabindex=\"0\"><\/iframe>"},{"Name":"BookingEnginePromotionalPrices","Value":"true"},{"Name":"BookingEngineEnableOnlineGuestAccount","Value":"true"},{"Name":"BookingEngineEnablePayments","Value":"false"},{"Name":"BookingEnginePaymentGateway","Value":""},{"Name":"BookingEngineTaxNumberFieldRequired","Value":"2"},{"Name":"BookingEngineRequireConsentForReserevation","Value":"false"},{"Name":"BookingEngineExcludeFromAnonymization","Value":"false"},{"Name":"BookingEngineConsentLanguages","Value":"[{\"languageCode\":\"PL\",\"checked\":false,\"consentText\":\"\",\"emailTemplate\":1},{\"languageCode\":\"EN\",\"checked\":false,\"consentText\":\"\",\"emailTemplate\":1},{\"languageCode\":\"ES\",\"checked\":false,\"consentText\":\"\",\"emailTemplate\":1},{\"languageCode\":\"PT\",\"checked\":false,\"consentText\":\"\",\"emailTemplate\":1},{\"languageCode\":\"RU\",\"checked\":false,\"consentText\":\"\",\"emailTemplate\":1},{\"languageCode\":\"FR\",\"checked\":false,\"consentText\":\"\",\"emailTemplate\":1},{\"languageCode\":\"ZH\",\"checked\":false,\"consentText\":\"\",\"emailTemplate\":1},{\"languageCode\":\"NL\",\"checked\":false,\"consentText\":\"\",\"emailTemplate\":1},{\"languageCode\":\"DE\",\"checked\":false,\"consentText\":\"\",\"emailTemplate\":1},{\"languageCode\":\"HU\",\"checked\":false,\"consentText\":\"\",\"emailTemplate\":1},{\"languageCode\":\"IT\",\"checked\":false,\"consentText\":\"\",\"emailTemplate\":1},{\"languageCode\":\"UK\",\"checked\":false,\"consentText\":\"\",\"emailTemplate\":1},{\"languageCode\":\"SL\",\"checked\":false,\"consentText\":\"\",\"emailTemplate\":1},{\"languageCode\":\"HE\",\"checked\":false,\"consentText\":\"\",\"emailTemplate\":1},{\"languageCode\":\"RO\",\"checked\":false,\"consentText\":\"\",\"emailTemplate\":1}]"},{"Name":"BookingEngineOGCancelNightsEnabled","Value":"false"},{"Name":"BookingEngineOGCancelReservationEnabled","Value":"false"},{"Name":"BookingEngineOGEnableCheckIn","Value":"false"},{"Name":"BookingEngineOGEnablePayments","Value":"false"},{"Name":"BookingEngineOGFirstNameRequired","Value":"2"},{"Name":"BookingEngineOGLastNameRequired","Value":"2"},{"Name":"BookingEngineOGEmailRequired","Value":"2"},{"Name":"BookingEngineOGGenderRequired","Value":"2"},{"Name":"BookingEngineOGPhoneRequired","Value":"2"},{"Name":"BookingEngineOGArrivalRequired","Value":"2"},{"Name":"BookingEngineOGAddressRequired","Value":"2"},{"Name":"BookingEngineOGNationalityRequired","Value":"2"},{"Name":"BookingEngineOGCityRequired","Value":"2"},{"Name":"BookingEngineOGZipCodeRequired","Value":"2"},{"Name":"BookingEngineOGGuestField1FieldRequired","Value":"2"},{"Name":"BookingEngineOGGuestField2FieldRequired","Value":"2"},{"Name":"BookingEngineOGDOBFieldRequired","Value":"2"},{"Name":"BookingEngineOGIdNumberFieldRequired","Value":"2"},{"Name":"BookingEngineOGIdTypeFieldRequired","Value":"2"},{"Name":"BookingEngineOGIdIssuerFieldRequired","Value":"2"},{"Name":"BookingEngineOGIdExpirationDateFieldRequired","Value":"2"},{"Name":"BookingEngineOGRefferralFieldRequired","Value":"2"},{"Name":"BookingEngineOGTaxNumberFieldRequired","Value":"2"},{"Name":"BookingEngineOGAdditionalFirstNameRequired","Value":"2"},{"Name":"BookingEngineOGAdditionalLastNameRequired","Value":"2"},{"Name":"BookingEngineOGAdditionalEmailRequired","Value":"2"},{"Name":"BookingEngineOGAdditionalGenderRequired","Value":"2"},{"Name":"BookingEngineOGAdditionalPhoneRequired","Value":"2"},{"Name":"BookingEngineOGAdditionalAddressRequired","Value":"2"},{"Name":"BookingEngineOGAdditionalNationalityRequired","Value":"2"},{"Name":"BookingEngineOGAdditionalCityRequired","Value":"2"},{"Name":"BookingEngineOGAdditionalZipCodeRequired","Value":"2"},{"Name":"BookingEngineOGAdditionalGuestField1FieldRequired","Value":"2"},{"Name":"BookingEngineOGAdditionalGuestField2FieldRequired","Value":"2"},{"Name":"BookingEngineOGAdditionalDOBFieldRequired","Value":"2"},{"Name":"BookingEngineOGAdditionalIdNumberFieldRequired","Value":"2"},{"Name":"BookingEngineOGAdditionalIdTypeFieldRequired","Value":""},{"Name":"BookingEngineOGAdditionalIdIssuerFieldRequired","Value":"2"},{"Name":"BookingEngineOGAdditionalIdExpirationDateFieldRequired","Value":"2"},{"Name":"BookingEngineOGAdditionalTaxNumberFieldRequired","Value":"2"},{"Name":"BookingEngineOGDaysBeforeArrival","Value":""},{"Name":"BookingEngineOGSettingsSameAsOwner","Value":"true"},{"Name":"BookingEngineOGTermsAndConditionsEnabled","Value":"true"},{"Name":"BookingEngineOGTermsAndConditions","Value":""},{"Name":"BookingEngineOGRequiredDocumentForOwner","Value":"2"},{"Name":"BookingEngineOGRequiredDocumentForOtherGuests","Value":"2"},{"Name":"BookingEngineOGPaymentsEnabled","Value":"true"},{"Name":"BookingEngineOGPaymentGateway","Value":""},{"Name":"BookingEngineUploadDocumentLanguages","Value":"[{\"Language\":\"EN\",\"Description\":\"Please upload the document\"}]"},{"Name":"FacebookLink","Value":"https:\/\/www.facebook.com\/albergcostabrava\/"},{"Name":"GooglePlusLink","Value":"https:\/\/plus.google.com\/u\/0\/"},{"Name":"TwitterLink","Value":"albergcbrava"},{"Name":"TripAdvisorLink","Value":"https:\/\/www.tripadvisor.es\/Hotel_Review-g1236052-d2034819-Reviews-Alberg_Costa_Brava-Llanca_Province_of_Girona_Catalonia.html"},{"Name":"FlickrLink","Value":""},{"Name":"HostelLocationLink","Value":""},{"Name":"HostelLocationQuery","Value":"Spain%2c+Girona%2c+Alberg+Costa+Brava"},{"Name":"BookingEngineTripadvisorWidget","Value":""},{"Name":"BookingEngineOGEnablePayments","Value":"false"},{"Name":"IsSaleTaxIncluded","Value":"True"},{"Name":"RoundPrices","Value":"false"},{"Name":"RoundPricesMethod","Value":""},{"Name":"AdyenPublicClientKey","Value":"live_XQP2JAXTUBAOVJX24PVYJQXF7EV2XLXC"},{"Name":"AdyenTestMode","Value":"false"},{"Name":"HostelTimeZone","Value":"Europe\/Madrid"},{"Name":"BookingEngineBankTransferInfo","Value":""},{"Name":"SaleTaxValue","Value":"10"}]; BookingEngine.SiteSettings = {"HostelId":"RwLSNfQB4T8LeBKchS1FAqBpPmDEsodK","Language":null,"FacebookPage":null,"ApiUri":"https://api-bookingengine.frontdeskmaster.com/HSOPService.svc","GuestAccountUri":"https://booking.frontdeskmaster.com/account","LocalApiUri":"","MinimumStay":1,"Nights":0,"MaximumStay":10,"MinimumGuests":null,"MaximumGuests":8,"ArrivalDate":null,"DownPaymentPercent":3.0,"BookingFee":1.8158378829000001,"MinBookingFee":0.6052792943,"RateGBP":1.2105585886,"AvailableCurrencies":["AED","AFN","ALL","AMD","ANG","AOA","ARS","AUD","AWG","AZN","BAM","BBD","BDT","BGN","BHD","BIF","BMD","BND","BOB","BRL","BSD","BTC","BTN","BWP","BYN","BZD","CAD","CDF","CHF","CLF","CLP","CNH","CNY","COP","CRC","CUC","CUP","CVE","CZK","DJF","DKK","DOP","DZD","EGP","ERN","ETB","EUR","FJD","FKP","GBP","GEL","GGP","GHS","GIP","GMD","GNF","GTQ","GYD","HKD","HNL","HRK","HTG","HUF","IDR","ILS","IMP","INR","IQD","IRR","ISK","JEP","JMD","JOD","JPY","KES","KGS","KHR","KMF","KPW","KRW","KWD","KYD","KZT","LAK","LBP","LKR","LRD","LSL","LYD","MAD","MDL","MGA","MKD","MMK","MNT","MOP","MRU","MUR","MVR","MWK","MXN","MYR","MZN","NAD","NGN","NIO","NOK","NPR","NZD","OMR","PAB","PEN","PGK","PHP","PKR","PLN","PYG","QAR","RON","RSD","RUB","RWF","SAR","SBD","SCR","SDG","SEK","SGD","SHP","SLL","SOS","SRD","SSP","STD","STN","SVC","SYP","SZL","THB","TJS","TMT","TND","TOP","TRY","TTD","TWD","TZS","UAH","UGX","USD","UYU","UZS","VEF","VES","VND","VUV","WST","XAF","XAG","XAU","XCD","XDR","XOF","XPD","XPF","XPT","YER","ZAR","ZMW","ZWL"],"MessagingServiceUrl":"https://api.frontdeskmaster.com:8088","MessagingServiceHubsUrl":"https://online.frontdeskmaster.com/lib/fdmhubs.min.js","CutOfPolicy":0,"IsBookLocal":null,"IsWebpayResultPage":null,"GuestAccountId":null,"ReservationCode":null,"PaymentStatus":null}; BookingEngine.GlobalSettings = {"DownPaymentPercent":3.0,"BookingFee":1.5,"MinBookingFee":0.5,"BookingFeeCurrency":"GBP"}; BookingEngine.ShowLangKeys = {"Show":false}; </script> <script src="/Scripts/fecha/fecha.js"></script> <script src="/Scripts/hotel-datepicker/hotel-datepicker.js"></script> <script src="/Scripts/hotel-datepicker/hotel-datepicker-extension.js"></script> <script src="https://js.stripe.com/v3/"></script> <script src="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.49.6/adyen.js" integrity="sha384-KgVSWqaBqeTaVw0GyHUJIN8BpfyzJSnYiMTKMia52o6fW2X64GVodqu80glUw11Z" crossorigin="anonymous"></script> <script src="/Scripts/require/require.js"></script> <script> require.config({ baseUrl: "/App_Scripts/", paths: { "main": "/App_Scripts/main-built" } }); require(["main"]); </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8gc5JTXHOxtm-p8fpBBapv7fdpjgqHWQ&v=3"></script> </body> </html>