chatters.ca
Open in
urlscan Pro
151.101.1.124
Public Scan
Submitted URL: http://chatters.ca/book/ontario/on-london-onch19
Effective URL: https://chatters.ca/book/ontario/on-london-onch19
Submission: On July 18 via api from US — Scanned from CA
Effective URL: https://chatters.ca/book/ontario/on-london-onch19
Submission: On July 18 via api from US — Scanned from CA
Form analysis 8 forms found in the DOM
<form class="form" id="booking-who-form" data-bind="submit: submit, attr: {'data-hasrequired': $t('* Required Fields')}, mageInit: {'compass/sneaky-labels': {}}" data-hasrequired="* Required Fields" data-sneaky-label="3oyuhh-sneaky-label">
<h2 class="booking-title" data-bind="i18n: 'Who would you like to make a booking for?'">Who would you like to make a booking for?</h2>
<div class="fieldset booking-who-wrapper">
<div class="fields-container">
<div class="field checkbox-like-button">
<input type="radio" class="radio" id="booking-who-self" data-bind="value: true, checked: bookings.getActive().isSelf" value="true" name="ko_unique_1">
<label for="booking-who-self" data-bind="i18n: 'Myself'">Myself</label>
</div>
<div class="field checkbox-like-button">
<input type="radio" class="radio" id="booking-who-family" data-bind="value: false, checked: bookings.getActive().isSelf" value="false" name="ko_unique_2">
<label for="booking-who-family" data-bind="i18n: 'A Family Member'">A Family Member</label>
</div>
</div>
</div>
<!-- ko if: !bookings.getActive().isSelf() --><!-- /ko -->
<div class="stylists-wrapper">
<h2 class="booking-title" data-bind="i18n: 'Which stylist would you like to book with?'">Which stylist would you like to book with?</h2>
<div class="stylists-list">
<div class="fields-container">
<div class="field checkbox-like-button">
<input type="radio" class="radio" id="booking-who-stylist-anyone" data-bind="value: '', checked: bookings.getActive().stylist" value="" name="ko_unique_3">
<label class="stylists-label" for="booking-who-stylist-anyone">
<img width="48" alt="" class="booking-icon-image" data-bind="attr: { src: window.bookingConfig.avatarPlaceholderUrl }" src="https://chatters.ca/static/version1721252596/frontend/Project/default/default/Project_Booking/images/avatar.svg">
<div class="stylists-content">
<p class="booking-name" data-bind="i18n: 'Anyone'">Anyone</p>
<p class="booking-description" data-bind="i18n: 'No Preference'">No Preference</p>
</div>
</label>
</div>
<!-- ko foreach: { data: locationService.getStylists(), as: 'stylist' } -->
<div class="field checkbox-like-button">
<input type="radio" class="radio" data-bind="attr: {id: 'booking-who-stylist-' + stylist.value}, value: stylist.value, checked: $parent.bookings.getActive().stylist" id="booking-who-stylist-5440001" value="5440001" name="ko_unique_4">
<label class="stylists-label" data-bind="attr: {for: 'booking-who-stylist-' + stylist.value}" for="booking-who-stylist-5440001">
<img width="48" alt="" class="booking-icon-image" data-bind="attr: { src: stylist.image_url || window.bookingConfig.avatarPlaceholderUrl }"
src="https://chatters.ca/static/version1721252596/frontend/Project/default/default/Project_Booking/images/avatar.svg">
<div class="stylists-content">
<p class="booking-name" data-bind="text: stylist.name">Andrea D.</p>
<p class="booking-description" data-bind="text: stylist.description">Stylist: Senior</p>
</div>
</label>
</div>
<div class="field checkbox-like-button">
<input type="radio" class="radio" data-bind="attr: {id: 'booking-who-stylist-' + stylist.value}, value: stylist.value, checked: $parent.bookings.getActive().stylist" id="booking-who-stylist-5440002" value="5440002" name="ko_unique_5">
<label class="stylists-label" data-bind="attr: {for: 'booking-who-stylist-' + stylist.value}" for="booking-who-stylist-5440002">
<img width="48" alt="" class="booking-icon-image" data-bind="attr: { src: stylist.image_url || window.bookingConfig.avatarPlaceholderUrl }"
src="https://chatters.ca/static/version1721252596/frontend/Project/default/default/Project_Booking/images/avatar.svg">
<div class="stylists-content">
<p class="booking-name" data-bind="text: stylist.name">Amanda R.</p>
<p class="booking-description" data-bind="text: stylist.description">Stylist: Elite </p>
</div>
</label>
</div>
<div class="field checkbox-like-button">
<input type="radio" class="radio" data-bind="attr: {id: 'booking-who-stylist-' + stylist.value}, value: stylist.value, checked: $parent.bookings.getActive().stylist" id="booking-who-stylist-5440004" value="5440004" name="ko_unique_6">
<label class="stylists-label" data-bind="attr: {for: 'booking-who-stylist-' + stylist.value}" for="booking-who-stylist-5440004">
<img width="48" alt="" class="booking-icon-image" data-bind="attr: { src: stylist.image_url || window.bookingConfig.avatarPlaceholderUrl }"
src="https://chatters.ca/static/version1721252596/frontend/Project/default/default/Project_Booking/images/avatar.svg">
<div class="stylists-content">
<p class="booking-name" data-bind="text: stylist.name">Jennifer D.</p>
<p class="booking-description" data-bind="text: stylist.description">Stylist: Elite </p>
</div>
</label>
</div>
<div class="field checkbox-like-button">
<input type="radio" class="radio" data-bind="attr: {id: 'booking-who-stylist-' + stylist.value}, value: stylist.value, checked: $parent.bookings.getActive().stylist" id="booking-who-stylist-5440005" value="5440005" name="ko_unique_7">
<label class="stylists-label" data-bind="attr: {for: 'booking-who-stylist-' + stylist.value}" for="booking-who-stylist-5440005">
<img width="48" alt="" class="booking-icon-image" data-bind="attr: { src: stylist.image_url || window.bookingConfig.avatarPlaceholderUrl }"
src="https://chatters.ca/static/version1721252596/frontend/Project/default/default/Project_Booking/images/avatar.svg">
<div class="stylists-content">
<p class="booking-name" data-bind="text: stylist.name">Phil M.</p>
<p class="booking-description" data-bind="text: stylist.description">Stylist: Senior</p>
</div>
</label>
</div>
<div class="field checkbox-like-button">
<input type="radio" class="radio" data-bind="attr: {id: 'booking-who-stylist-' + stylist.value}, value: stylist.value, checked: $parent.bookings.getActive().stylist" id="booking-who-stylist-5440006" value="5440006" name="ko_unique_8">
<label class="stylists-label" data-bind="attr: {for: 'booking-who-stylist-' + stylist.value}" for="booking-who-stylist-5440006">
<img width="48" alt="" class="booking-icon-image" data-bind="attr: { src: stylist.image_url || window.bookingConfig.avatarPlaceholderUrl }"
src="https://chatters.ca/static/version1721252596/frontend/Project/default/default/Project_Booking/images/avatar.svg">
<div class="stylists-content">
<p class="booking-name" data-bind="text: stylist.name">Bella F.</p>
<p class="booking-description" data-bind="text: stylist.description">Stylist: Elite </p>
</div>
</label>
</div>
<div class="field checkbox-like-button">
<input type="radio" class="radio" data-bind="attr: {id: 'booking-who-stylist-' + stylist.value}, value: stylist.value, checked: $parent.bookings.getActive().stylist" id="booking-who-stylist-5440007" value="5440007" name="ko_unique_9">
<label class="stylists-label" data-bind="attr: {for: 'booking-who-stylist-' + stylist.value}" for="booking-who-stylist-5440007">
<img width="48" alt="" class="booking-icon-image" data-bind="attr: { src: stylist.image_url || window.bookingConfig.avatarPlaceholderUrl }"
src="https://chatters.ca/static/version1721252596/frontend/Project/default/default/Project_Booking/images/avatar.svg">
<div class="stylists-content">
<p class="booking-name" data-bind="text: stylist.name">Mariana J.</p>
<p class="booking-description" data-bind="text: stylist.description">Stylist: Elite </p>
</div>
</label>
</div>
<div class="field checkbox-like-button">
<input type="radio" class="radio" data-bind="attr: {id: 'booking-who-stylist-' + stylist.value}, value: stylist.value, checked: $parent.bookings.getActive().stylist" id="booking-who-stylist-5440008" value="5440008" name="ko_unique_10">
<label class="stylists-label" data-bind="attr: {for: 'booking-who-stylist-' + stylist.value}" for="booking-who-stylist-5440008">
<img width="48" alt="" class="booking-icon-image" data-bind="attr: { src: stylist.image_url || window.bookingConfig.avatarPlaceholderUrl }"
src="https://chatters.ca/static/version1721252596/frontend/Project/default/default/Project_Booking/images/avatar.svg">
<div class="stylists-content">
<p class="booking-name" data-bind="text: stylist.name">Melanie E.</p>
<p class="booking-description" data-bind="text: stylist.description">Stylist: Elite </p>
</div>
</label>
</div>
<div class="field checkbox-like-button">
<input type="radio" class="radio" data-bind="attr: {id: 'booking-who-stylist-' + stylist.value}, value: stylist.value, checked: $parent.bookings.getActive().stylist" id="booking-who-stylist-5440009" value="5440009" name="ko_unique_11">
<label class="stylists-label" data-bind="attr: {for: 'booking-who-stylist-' + stylist.value}" for="booking-who-stylist-5440009">
<img width="48" alt="" class="booking-icon-image" data-bind="attr: { src: stylist.image_url || window.bookingConfig.avatarPlaceholderUrl }"
src="https://chatters.ca/static/version1721252596/frontend/Project/default/default/Project_Booking/images/avatar.svg">
<div class="stylists-content">
<p class="booking-name" data-bind="text: stylist.name">Leigh A.</p>
<p class="booking-description" data-bind="text: stylist.description">Stylist: Intermediate</p>
</div>
</label>
</div>
<div class="field checkbox-like-button">
<input type="radio" class="radio" data-bind="attr: {id: 'booking-who-stylist-' + stylist.value}, value: stylist.value, checked: $parent.bookings.getActive().stylist" id="booking-who-stylist-5440010" value="5440010" name="ko_unique_12">
<label class="stylists-label" data-bind="attr: {for: 'booking-who-stylist-' + stylist.value}" for="booking-who-stylist-5440010">
<img width="48" alt="" class="booking-icon-image" data-bind="attr: { src: stylist.image_url || window.bookingConfig.avatarPlaceholderUrl }"
src="https://chatters.ca/static/version1721252596/frontend/Project/default/default/Project_Booking/images/avatar.svg">
<div class="stylists-content">
<p class="booking-name" data-bind="text: stylist.name">Rebecca M.</p>
<p class="booking-description" data-bind="text: stylist.description">Stylist: Elite </p>
</div>
</label>
</div>
<div class="field checkbox-like-button">
<input type="radio" class="radio" data-bind="attr: {id: 'booking-who-stylist-' + stylist.value}, value: stylist.value, checked: $parent.bookings.getActive().stylist" id="booking-who-stylist-5440012" value="5440012" name="ko_unique_13">
<label class="stylists-label" data-bind="attr: {for: 'booking-who-stylist-' + stylist.value}" for="booking-who-stylist-5440012">
<img width="48" alt="" class="booking-icon-image" data-bind="attr: { src: stylist.image_url || window.bookingConfig.avatarPlaceholderUrl }"
src="https://chatters.ca/static/version1721252596/frontend/Project/default/default/Project_Booking/images/avatar.svg">
<div class="stylists-content">
<p class="booking-name" data-bind="text: stylist.name">Alecia A.</p>
<p class="booking-description" data-bind="text: stylist.description">Stylist: Master</p>
</div>
</label>
</div>
<!-- /ko -->
</div>
</div>
</div>
<!-- @todo Remove or add support via LS -->
<div class="hair-length" style="display: none;">
<h2 class="booking-title" data-bind="i18n: 'Which option best represents your current hair length?'">Which option best represents your current hair length?</h2>
<div class="hair-length-list">
<div class="fields-container">
<div class="field checkbox-like-button">
<input type="radio" class="radio" id="booking-hair-length">
<label class="stylists-label" for="booking-hair-length">
<img width="48" alt="" class="booking-icon-image" data-bind="attr: { src: window.bookingConfig.barberingPlaceholderUrl }"
src="https://chatters.ca/static/version1721252596/frontend/Project/default/default/Project_Booking/images/barbering.svg">
<div class="stylists-content">
<p class="booking-size" data-bind="i18n: 'Barbering'">Barbering</p>
<p class="booking-description" data-bind="i18n: "Up to 3\""">Up to 3"</p>
</div>
</label>
</div>
<div class="field checkbox-like-button">
<input type="radio" class="radio" id="booking-hair-length-1">
<label class="stylists-label" for="booking-hair-length-1">
<img width="48" alt="" class="booking-icon-image" data-bind="attr: { src: window.bookingConfig.shortPlaceholderUrl }" src="https://chatters.ca/static/version1721252596/frontend/Project/default/default/Project_Booking/images/short.svg">
<div class="stylists-content">
<p class="booking-size" data-bind="i18n: 'Short'">Short</p>
<p class="booking-description" data-bind="i18n: "3\" to Chin"">3" to Chin</p>
</div>
</label>
</div>
<div class="field checkbox-like-button">
<input type="radio" class="radio" id="booking-hair-length-2">
<label class="stylists-label" for="booking-hair-length-2">
<img width="48" alt="" class="booking-icon-image" data-bind="attr: { src: window.bookingConfig.mediumPlaceholderUrl }" src="https://chatters.ca/static/version1721252596/frontend/Project/default/default/Project_Booking/images/medium.svg">
<div class="stylists-content">
<p class="booking-size" data-bind="i18n: 'Medium'">Medium</p>
<p class="booking-description" data-bind="i18n: "Chin to 2\" Below Shoulders"">Chin to 2" Below Shoulders</p>
</div>
</label>
</div>
<div class="field checkbox-like-button">
<input type="radio" class="radio" id="booking-hair-length-3">
<label class="stylists-label" for="booking-hair-length-3">
<img width="48" alt="" class="booking-icon-image" data-bind="attr: { src: window.bookingConfig.longPlaceholderUrl }" src="https://chatters.ca/static/version1721252596/frontend/Project/default/default/Project_Booking/images/long.svg">
<div class="stylists-content">
<p class="booking-size" data-bind="i18n: 'Long'">Long</p>
<p class="booking-description" data-bind="i18n: "More Than 2\" Below Shoulders"">More Than 2" Below Shoulders</p>
</div>
</label>
</div>
</div>
</div>
</div>
</form><form class="form" id="booking-what-form" data-bind="submit: submit, attr: {'data-hasrequired': $t('* Required Fields')}, mageInit: {'compass/sneaky-labels': {}}" data-hasrequired="* Required Fields" data-sneaky-label="bfivco-sneaky-label">
<h2 class="booking-title" data-bind="i18n: 'What salon services would you like to book?'">What salon services would you like to book?</h2>
<p class="booking-description" data-bind="i18n: '** Final prices may vary after consultation and by stylist service offerings.'">** Final prices may vary after consultation and by stylist service offerings.</p>
<!-- ko foreach: getRegion('filters') -->
<!-- ko template: getTemplate() -->
<div class="filter-section">
<button type="button" class="open-button js-booking-filter-button">
<span class="text" data-bind="i18n: 'Filter'">Filter</span>
</button>
<div class="applied-filters-list-container">
<ul class="applied-filters-list" data-bind="foreach: {data: Object.keys(model.filters), as: 'filterKey'}">
<!-- ko foreach: {data: $parent.model.filters[filterKey].selectedValue(), as: 'filter'}--><!-- /ko -->
<!-- ko foreach: {data: $parent.model.filters[filterKey].selectedValue(), as: 'filter'}--><!-- /ko -->
</ul>
</div>
</div>
<!-- /ko-->
<!-- /ko -->
<ul class="booking-services-list" data-bind="mageInit: {'compass/accordion': {}}" role="tablist" data-accordion="3tu42z-accordion">
<!-- ko foreach: { data: serviceCategories, as: 'category' } -->
<li class="booking-services-item js-accordion-item">
<button type="button" class="booking-services-item-title js-accordion-title" role="tab" aria-expanded="false" aria-selected="false" aria-controls="62p0ci-accordion" id="62p0ci-accordion-label">
<span data-bind="text: category.name">CUTS</span><span class="booking-services-item-title-number" data-bind="text: ' (' + category.services().length + ')'"> (10)</span>
</button>
<div class="booking-services-item-body js-accordion-body" role="tabpanel" aria-labelledby="62p0ci-accordion-label" aria-hidden="true" id="62p0ci-accordion">
<ul class="booking-services-item-list">
<!-- ko foreach: { data: category.services, as: 'service' } -->
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON10001/token/d25a2f1c2616612b51ca9c48434c113e99481d163b07e1e6647dc470dc85eafb" alt="Bang Trim">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Bang Trim</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">15 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $18.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON10002/token/9133df86e17317e513a94db3c6ee4aedf972bf6708715abf52ebf32df2825b62" alt="Adult Buzz Cut">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Adult Buzz Cut</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">20 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $20.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON10003/token/c15eb16f6aa9a061a1086c76310788e843ff9faf5866e51ba0470845c67b8a1f" alt="Clean Up - Beard & Neck Trim">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Clean Up - Beard & Neck Trim</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">15 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $12.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON10004/token/45350760ffe940088c3f701279889a0ce031f4d0002ce110f5a0ecbdc86c7717" alt="Adult Barber">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Adult Barber</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">30 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $30.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON10005/token/ea9cd55d1300fb6fd07bed231083d70bcc96eea1762a2f8a5acab03e5db56869" alt="Adult - Short">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Adult - Short</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">45 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $39.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON10006-1/token/a93d30ddf9ab5c62aca89166ea371d3ce3b2e60786dba44dad10f53eca845f5a" alt="Adult - Medium">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Adult - Medium</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">1 hour</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $49.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON10007/token/4aa5b1d414d1bbe54eec7b69bf354039aac0cec1740abdc53157f5a40f922df2" alt="Adult - Long">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Adult - Long</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">1 hour</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $64.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/LONG_ADVANCED/token/3b6f6ec91877eb6b77e0213ede1eb6af4706fe8480a97c739f96d55d50634109" alt="Adult - Long Advanced">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Adult - Long Advanced</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">1 hour 30 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $74.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON10008/token/81df521d19d24389d4fe62f4b28092c63f1b35b0cc4ca32b0f3a861815df98ae" alt="Adult - Curl">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Adult - Curl</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">1 hour 15 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $89.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON10009/token/9de4b7a3f82840164412fe671b84695d1b2dcf76d723784958dcb61271f0015e" alt="Adult - Curl Long & Thick">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Adult - Curl Long & Thick</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">1 hour 30 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $107.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<!-- /ko -->
</ul>
</div>
</li>
<li class="booking-services-item js-accordion-item">
<button type="button" class="booking-services-item-title js-accordion-title" role="tab" aria-expanded="false" aria-selected="false" aria-controls="j4ueoy-accordion" id="j4ueoy-accordion-label">
<span data-bind="text: category.name">COLOUR</span><span class="booking-services-item-title-number" data-bind="text: ' (' + category.services().length + ')'"> (19)</span>
</button>
<div class="booking-services-item-body js-accordion-body" role="tabpanel" aria-labelledby="j4ueoy-accordion-label" aria-hidden="true" id="j4ueoy-accordion">
<ul class="booking-services-item-list">
<!-- ko foreach: { data: category.services, as: 'service' } -->
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON12001/token/4a8f09a8997404d0cfc3c2652dc758fd4442fc7e6e88db96d3e55e44419338cf" alt="Colour Camo">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Colour Camo</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">30 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $0.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON12002/token/79ab97d603a3cf181833f01343ef6a9da13719b265211991b3d54f90d060b93f" alt="Colour Retouch">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Colour Retouch</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">2 hours</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $87.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON12003/token/9ccff7e57f34a83261ed67df6b183f7b205ace25f498e28f04a5214df537eb84" alt="Express Roots">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Express Roots</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">1 hour 20 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $87.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON12004/token/09201384ec225c77855a64ecf93a0402c1fcb5e0a455724ef4e14aeae3783103" alt="Lightening Retouch">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Lightening Retouch</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">2 hours 45 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $132.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON12005/token/ff13063d0ad429ec76aa0cf376182be40a42c11e337b8f2919ced28918a87296" alt="Colour - Short">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Colour - Short</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">2 hours</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $95.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON12006-1/token/1fea015b51d15a89628fccd96eaca38f8ac9c2ec827c561c81871996f0c8c939" alt="Colour - Medium">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Colour - Medium</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">2 hours 15 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $122.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON12007/token/3b0f62aee1f73a5c5d40223237f26e7850f44bb6a9f8c60ff294f891f71269dc" alt="Colour - Long">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Colour - Long</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">2 hours 40 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $132.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON12008/token/717c81655e252c829aaffa64051912f00733c21256b12b1b9913185821b7da24" alt="Partial Foils - Short">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Partial Foils - Short</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">2 hours 15 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $137.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON12009/token/e22a3000f9623c4e87db455c6e7577b7ad19933f1977c552516a11dc66a64ff4" alt="Partial Foils - Medium">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Partial Foils - Medium</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">2 hours 30 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $168.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON12010/token/767817bc28f6f4419929928624b5e2696327fa7bd25a467e5796f6f16dcd2e22" alt="Partial Foils - Long">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Partial Foils - Long</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">3 hours</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $178.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON12011/token/dc81e6928ef05112c7032e9c803caea872ae109ba066e38d0950ea444f7c63c7" alt="Foils - Short">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Foils - Short</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">2 hours 15 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $153.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON12012/token/e1be54e25c8338287445aee6a31947dfe19cbef7aa6d89117df8a2ae713da5f7" alt="Foils - Medium">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Foils - Medium</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">2 hours 45 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $173.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON12013/token/d46f9815b2b81cd2e7f58a9bd2c5396e734ae21204f6f488fbf21b88a3815f28" alt="Foils - Long">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Foils - Long</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">3 hours 30 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $198.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON12014/token/798c20eb4aea0be99c8bfd51e948148e7b01709f78e6afe8cc2958c125f004fe" alt="Dual Technique Colour - Short">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Dual Technique Colour - Short</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">3 hours 10 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $169.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON12015-1/token/566a143fede67ad77b76ff27e6f1cac4f456c38f4bca7ca8cfb189dc169fb7e8" alt="Dual Technique Colour - Medium">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Dual Technique Colour - Medium</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">3 hours 5 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $204.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/DUAL_TECH_LONG2/token/e5e27a774ce5349b16ac8819ac4d9c2aff41ef6c58eb0fa943311bcac20a0461" alt="Dual Technique Colour - Long">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Dual Technique Colour - Long</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">3 hours 30 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $224.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON12017/token/dcaa74394af9794da03d23780cb55f767490a78374bef46afaf521b458b38242" alt="Gloss">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Gloss</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">2 hours</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $87.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON12009/token/e22a3000f9623c4e87db455c6e7577b7ad19933f1977c552516a11dc66a64ff4" alt="Balayage - Medium">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Balayage - Medium</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">3 hours</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $204.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON12019/token/6749a22c04f9fef6ed64783d54a69e80f0bf8152695bc0d64a811066b556e3e5" alt="Balayage - Long">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Balayage - Long</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">3 hours 30 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $224.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<!-- /ko -->
</ul>
</div>
</li>
<li class="booking-services-item js-accordion-item">
<button type="button" class="booking-services-item-title js-accordion-title" role="tab" aria-expanded="false" aria-selected="false" aria-controls="0cl5q5-accordion" id="0cl5q5-accordion-label">
<span data-bind="text: category.name">KIDS</span><span class="booking-services-item-title-number" data-bind="text: ' (' + category.services().length + ')'"> (6)</span>
</button>
<div class="booking-services-item-body js-accordion-body" role="tabpanel" aria-labelledby="0cl5q5-accordion-label" aria-hidden="true" id="0cl5q5-accordion">
<ul class="booking-services-item-list">
<!-- ko foreach: { data: category.services, as: 'service' } -->
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON11001/token/1f18c55e6bfd035d699119341c42cf08732985a2d55b73f527e241509c1f4705" alt="Kids - Short (0-8 Yrs)">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Kids - Short (0-8 Yrs)</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">30 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $23.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON11002/token/a8e2f778d278e3d9e2813bc0787890b097118ea8f4334b1c2ad379dfe615eb93" alt="Kids - Medium (0-8 Yrs)">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Kids - Medium (0-8 Yrs)</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">30 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $27.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON11003/token/685cd1cd8a54200694bc459389d34556c05f98a430b9d6b8549b6f9a09572aaa" alt="Kids - Long (0-8 Yrs)">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Kids - Long (0-8 Yrs)</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">45 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $40.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON11004/token/f980b4850ab41a7c59b8cd2a8ad277d868417ba262e0e63d542a3f3af9055bab" alt="Kids - Short (9-12 Yrs)">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Kids - Short (9-12 Yrs)</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">30 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $28.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON11005/token/32b43bcecce143ca3a81e3c7313f48ec484b0a0aef270ae665506131333fad97" alt="Kids - Medium (9-12 Yrs)">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Kids - Medium (9-12 Yrs)</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">45 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $35.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON11006/token/77b8844f8f4855e04f146fc9ab8eb499b1d71c9e49ef159eccda275499c061d7" alt="Kids - Long (9-12 Yrs)">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Kids - Long (9-12 Yrs)</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">1 hour</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $45.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<!-- /ko -->
</ul>
</div>
</li>
<li class="booking-services-item js-accordion-item">
<button type="button" class="booking-services-item-title js-accordion-title" role="tab" aria-expanded="false" aria-selected="false" aria-controls="rdi471-accordion" id="rdi471-accordion-label">
<span data-bind="text: category.name">TREATMENT</span><span class="booking-services-item-title-number" data-bind="text: ' (' + category.services().length + ')'"> (2)</span>
</button>
<div class="booking-services-item-body js-accordion-body" role="tabpanel" aria-labelledby="rdi471-accordion-label" aria-hidden="true" id="rdi471-accordion">
<ul class="booking-services-item-list">
<!-- ko foreach: { data: category.services, as: 'service' } -->
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/CUSTOM_TREATMENT/token/4cd279c4c5879b04744d99476ee8e40434d73304fb5b4ac04ea13446d0dcca76" alt="Custom Treatment">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Custom Treatment</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">20 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $22.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/OLAPLEX/token/6b8c570b3f6295d16eb3e464294798de10fac9b6e9441d08269f93f8b73a1710" alt="Olaplex">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Olaplex</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">20 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $47.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<!-- /ko -->
</ul>
</div>
</li>
<li class="booking-services-item js-accordion-item">
<button type="button" class="booking-services-item-title js-accordion-title" role="tab" aria-expanded="false" aria-selected="false" aria-controls="u95no5-accordion" id="u95no5-accordion-label">
<span data-bind="text: category.name">STYLING</span><span class="booking-services-item-title-number" data-bind="text: ' (' + category.services().length + ')'"> (4)</span>
</button>
<div class="booking-services-item-body js-accordion-body" role="tabpanel" aria-labelledby="u95no5-accordion-label" aria-hidden="true" id="u95no5-accordion">
<ul class="booking-services-item-list">
<!-- ko foreach: { data: category.services, as: 'service' } -->
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/BLOWOUT_SHORT/token/5673465e5440dbbac17b5d19335662ca26adbf363b3a1e31570697a20fee5a82" alt="Blowout Short">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Blowout Short</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">45 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $42.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/BLOWOUT_LONG/token/787af56c3bfcee968af75efc80b4285f1b433869a614a6b5a00d64130fbcb12a" alt="Blowout Long/Full">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Blowout Long/Full</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">1 hour 15 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $58.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }" src="https://chatters.ca/lsc/image/view/id/BRAIDS/token/55fef0b5e29f7ce0941aaf4578f5b016204be0fc6e3d869bf7eafaa7f5c9d3ee"
alt="Braids & Waves">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Braids & Waves</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">20 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $0.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SPECIAL_OCCASION/token/e5ac06197f91fb2c19bdaadd6a2ce4332fe0d29fc750e537867b7286922ff52a" alt="Special Occasion">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Special Occasion</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">1 hour</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $75.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<!-- /ko -->
</ul>
</div>
</li>
<li class="booking-services-item js-accordion-item">
<button type="button" class="booking-services-item-title js-accordion-title" role="tab" aria-expanded="false" aria-selected="false" aria-controls="d62qfd-accordion" id="d62qfd-accordion-label">
<span data-bind="text: category.name">CONSULTATION</span><span class="booking-services-item-title-number" data-bind="text: ' (' + category.services().length + ')'"> (1)</span>
</button>
<div class="booking-services-item-body js-accordion-body" role="tabpanel" aria-labelledby="d62qfd-accordion-label" aria-hidden="true" id="d62qfd-accordion">
<ul class="booking-services-item-list">
<!-- ko foreach: { data: category.services, as: 'service' } -->
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON00001/token/6a4131c82d44fabba33dd292eda6a66993be0f2d838e07d85073c81f3d9ff4b8" alt="Hair Consultation">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Hair Consultation</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">15 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $15.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<!-- /ko -->
</ul>
</div>
</li>
<li class="booking-services-item js-accordion-item">
<button type="button" class="booking-services-item-title js-accordion-title" role="tab" aria-expanded="false" aria-selected="false" aria-controls="9h8urm-accordion" id="9h8urm-accordion-label">
<span data-bind="text: category.name">EXTENSIONS</span><span class="booking-services-item-title-number" data-bind="text: ' (' + category.services().length + ')'"> (1)</span>
</button>
<div class="booking-services-item-body js-accordion-body" role="tabpanel" aria-labelledby="9h8urm-accordion-label" aria-hidden="true" id="9h8urm-accordion">
<ul class="booking-services-item-list">
<!-- ko foreach: { data: category.services, as: 'service' } -->
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/EXTENSIONS/token/99e5224a63cf25c1e79dab49e659d711d9825482c60d71748d847c3e4cc823c4" alt="Extensions Consultation">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Extensions Consultation</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">15 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $15.00</span>
</p>
</div>
<!-- ko if: service.description.length --><!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<!-- /ko -->
</ul>
</div>
</li>
<li class="booking-services-item js-accordion-item">
<button type="button" class="booking-services-item-title js-accordion-title" role="tab" aria-expanded="false" aria-selected="false" aria-controls="bvwej5-accordion" id="bvwej5-accordion-label">
<span data-bind="text: category.name">EXPRESS BEAUTY</span><span class="booking-services-item-title-number" data-bind="text: ' (' + category.services().length + ')'"> (6)</span>
</button>
<div class="booking-services-item-body js-accordion-body" role="tabpanel" aria-labelledby="bvwej5-accordion-label" aria-hidden="true" id="bvwej5-accordion">
<ul class="booking-services-item-list">
<!-- ko foreach: { data: category.services, as: 'service' } -->
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON19001/token/3433bfa587156c3c3506c39316e458a6654f795ac6fdcf5b717718dce4dc9555" alt="Wax - Chin">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Wax - Chin</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">15 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $18.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON19002/token/46b56816a7d9e33949acee9c0be1113a17e11d6e036c9cd2c90faccb95b39d58" alt="Wax - Lip">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Wax - Lip</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">15 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $18.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON19003/token/52972d9d4abb2dfe2ae320b91e689451150df50682584960be07c198b225a055" alt="Wax - Nose">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Wax - Nose</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">15 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $0.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON19004/token/29e9f7e0e765a8cd1e4fa78255140643dbc294081df9b67594897479c40390b1" alt="Wax - Face">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Wax - Face</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">30 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $18.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON19010/token/45c28abb9e345b520eedb9de1a8f5581121dd2b7b481c911c6511fc157033c63" alt="Brow - Wax">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Brow - Wax</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">15 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $20.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/SALON19011/token/606a9f0c7a88d881cb3039a02ba3fa1b536ea328ec0f08a4aa1caa0c8463ae6f" alt="Brow - Tint">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Brow - Tint</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">15 minutes</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $25.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<!-- /ko -->
</ul>
</div>
</li>
<li class="booking-services-item js-accordion-item">
<button type="button" class="booking-services-item-title js-accordion-title" role="tab" aria-expanded="false" aria-selected="false" aria-controls="apkwvx-accordion" id="apkwvx-accordion-label">
<span data-bind="text: category.name">TEXTURE</span><span class="booking-services-item-title-number" data-bind="text: ' (' + category.services().length + ')'"> (2)</span>
</button>
<div class="booking-services-item-body js-accordion-body" role="tabpanel" aria-labelledby="apkwvx-accordion-label" aria-hidden="true" id="apkwvx-accordion">
<ul class="booking-services-item-list">
<!-- ko foreach: { data: category.services, as: 'service' } -->
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/PERM_SHORT/token/870bf993558afe506fcf797a160a262add1b3e220305c175a08ea99bf09a933a" alt="Perm - Short">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Perm - Short</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">2 hours</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $122.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<li class="booking-services-item-list-item" data-bind="css: {'active': $parents[1].bookingHasService(service)}">
<div class="booking-services-item-wrapper">
<img width="246" class="booking-services-item-img" data-bind="attr: { src: service.image_url, alt: service.name }"
src="https://chatters.ca/lsc/image/view/id/PERM_MEDIUM/token/90088fb72df9442165b6ea8f4d3f927614d48f14be2c14fe56d37c7af5f1f01d" alt="Perm - Medium">
<div class="booking-services-item-content">
<p class="booking-services-item-name" data-bind="text: service.name">Perm - Medium</p>
<div class="booking-services-item-price-wrapper">
<p class="booking-services-item-text" data-bind="text: $parents[1].locationService.getServiceDurationText(service, $parents[1].bookings.getActive().stylist())">2 hours</p>
<p class="booking-services-item-price">
<span data-bind="text: service.price_formatted">Starting at $152.00</span>
</p>
</div>
<!-- ko if: service.description.length -->
<!-- ko if: $parents[1].expandedServices.indexOf(service.value) === -1 -->
<a class="booking-services-item-learn-link" href="#" data-bind="click: function() { $parents[1].expandedServices.push(service.value); }, i18n: 'Learn More'">Learn More</a>
<!-- /ko -->
<!-- ko ifnot: $parents[1].expandedServices.indexOf(service.value) === -1 --><!-- /ko -->
<!-- /ko -->
<!-- ko ifnot: $parents[1].bookingHasService(service) -->
<button class="booking-services-item-button booking-services-item-add" type="button" data-bind="text: 'Add', click: function() { $parents[1].addServiceToBooking(service); }">Add</button>
<!-- /ko -->
<!-- ko if: $parents[1].bookingHasService(service) --><!-- /ko -->
</div>
</div>
<!-- ko if: $parents[1].bookingHasService(service) && service.recommended.length > 0 --><!-- /ko -->
</li>
<!-- /ko -->
</ul>
</div>
</li>
<!-- /ko -->
</ul>
</form><form class="form" id="booking-when-form" data-bind="submit: submit, attr: {'data-hasrequired': $t('* Required Fields')}, mageInit: {'compass/sneaky-labels': {}}" data-hasrequired="* Required Fields" data-sneaky-label="03ata0-sneaky-label">
<h2 class="booking-title" id="booking-when-calendar-label" data-bind="i18n: 'What date would you like your appointment?'">What date would you like your appointment?</h2>
<!-- ko foreach: getRegion('calendar') -->
<!-- ko template: getTemplate() -->
<div class="calendar-container js-calendar-container field" data-bind="event: {'calendarInvalid': onCalendarInvalid, 'calendarValid': onCalendarValid}">
<!-- ko if: description --><!-- /ko -->
<div class="control">
<div class="calendar-title-container">
<button class="nav-button previous" type="button" data-bind="
click: goToPreviousMonth.bind($data),
attr: {
'disabled': !isPreviousMonthEnabled(),
'aria-label': formatDate({month: 'long', year: 'numeric'}, $data.getPreviousMonth($data.months()[0].firstDay))
}
" disabled="true" aria-label="June 2024">
<span aria-hidden="true" data-bind="text: formatDate($data.prevNextButtonDateFormat, $data.getPreviousMonth($data.months()[0].firstDay))">Jun 24</span>
</button>
<!-- ko foreach: months -->
<span class="title" data-bind="text: $parent.formatDate($parent.titleDateFormat, $data.firstDay)">July 2024</span>
<!-- /ko -->
<button class="nav-button next" type="button" data-bind="
click: goToNextMonth.bind($data),
attr: {
'disabled': !isNextMonthEnabled(),
'aria-label': formatDate({month: 'long', year: 'numeric'}, $data.getNextMonth($data.months()[$data.months().length - 1].firstDay))
}
" aria-label="August 2024">
<span aria-hidden="true" data-bind="text: formatDate($data.prevNextButtonDateFormat, $data.getNextMonth($data.months()[$data.months().length - 1].firstDay))">Aug 24</span>
</button>
</div>
<div class="calendar-body-container" data-bind="event: {'keydown': onKeyDown}, foreach: months">
<div class="calendar-body">
<table class="calendar-table js-calendar-table" role="menu">
<thead role="none" aria-hidden="true">
<tr data-bind="foreach: calendarData[0]">
<th data-bind="text: $parents[1].formatDate($parents[1].dayLabelDateFormat, $data, $parents[1].dayLabelMaxLength)">Su</th>
<th data-bind="text: $parents[1].formatDate($parents[1].dayLabelDateFormat, $data, $parents[1].dayLabelMaxLength)">Mo</th>
<th data-bind="text: $parents[1].formatDate($parents[1].dayLabelDateFormat, $data, $parents[1].dayLabelMaxLength)">Tu</th>
<th data-bind="text: $parents[1].formatDate($parents[1].dayLabelDateFormat, $data, $parents[1].dayLabelMaxLength)">We</th>
<th data-bind="text: $parents[1].formatDate($parents[1].dayLabelDateFormat, $data, $parents[1].dayLabelMaxLength)">Th</th>
<th data-bind="text: $parents[1].formatDate($parents[1].dayLabelDateFormat, $data, $parents[1].dayLabelMaxLength)">Fr</th>
<th data-bind="text: $parents[1].formatDate($parents[1].dayLabelDateFormat, $data, $parents[1].dayLabelMaxLength)">Sa</th>
</tr>
</thead>
<tbody data-bind="foreach: calendarData" role="none">
<tr data-bind="foreach: $data" role="none">
<td role="none">
<button class="calendar-day-button is-out-of-valid-range is-different-month" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" disabled="true" aria-label="Sunday, June 30, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">30</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button is-out-of-valid-range" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" disabled="true" aria-label="Monday, July 1, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">1</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button is-out-of-valid-range" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" disabled="true" aria-label="Tuesday, July 2, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">2</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button is-out-of-valid-range" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" disabled="true" aria-label="Wednesday, July 3, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">3</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button is-out-of-valid-range" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" disabled="true" aria-label="Thursday, July 4, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">4</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button is-out-of-valid-range" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" disabled="true" aria-label="Friday, July 5, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">5</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button is-out-of-valid-range" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" disabled="true" aria-label="Saturday, July 6, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">6</span>
</button>
</td>
</tr>
<tr data-bind="foreach: $data" role="none">
<td role="none">
<button class="calendar-day-button is-out-of-valid-range" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" disabled="true" aria-label="Sunday, July 7, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">7</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button is-out-of-valid-range" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" disabled="true" aria-label="Monday, July 8, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">8</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button is-out-of-valid-range" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" disabled="true" aria-label="Tuesday, July 9, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">9</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button is-out-of-valid-range" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" disabled="true" aria-label="Wednesday, July 10, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">10</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button is-out-of-valid-range" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" disabled="true" aria-label="Thursday, July 11, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">11</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button is-out-of-valid-range" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" disabled="true" aria-label="Friday, July 12, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">12</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button is-out-of-valid-range" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" disabled="true" aria-label="Saturday, July 13, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">13</span>
</button>
</td>
</tr>
<tr data-bind="foreach: $data" role="none">
<td role="none">
<button class="calendar-day-button is-out-of-valid-range" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" disabled="true" aria-label="Sunday, July 14, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">14</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button is-out-of-valid-range" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" disabled="true" aria-label="Monday, July 15, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">15</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button is-out-of-valid-range" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" disabled="true" aria-label="Tuesday, July 16, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">16</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button is-out-of-valid-range" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" disabled="true" aria-label="Wednesday, July 17, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">17</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="0" aria-label="Thursday, July 18, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">18</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" aria-label="Friday, July 19, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">19</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" aria-label="Saturday, July 20, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">20</span>
</button>
</td>
</tr>
<tr data-bind="foreach: $data" role="none">
<td role="none">
<button class="calendar-day-button" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" aria-label="Sunday, July 21, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">21</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" aria-label="Monday, July 22, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">22</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" aria-label="Tuesday, July 23, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">23</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" aria-label="Wednesday, July 24, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">24</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" aria-label="Thursday, July 25, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">25</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" aria-label="Friday, July 26, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">26</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" aria-label="Saturday, July 27, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">27</span>
</button>
</td>
</tr>
<tr data-bind="foreach: $data" role="none">
<td role="none">
<button class="calendar-day-button" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" aria-label="Sunday, July 28, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">28</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" aria-label="Monday, July 29, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">29</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" aria-label="Tuesday, July 30, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">30</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" aria-label="Wednesday, July 31, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">31</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button is-different-month" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" aria-label="Thursday, August 1, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">1</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button is-different-month" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" aria-label="Friday, August 2, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">2</span>
</button>
</td>
<td role="none">
<button class="calendar-day-button is-different-month" type="button" role="menuitem" data-bind="
attr: {
'tabindex': $parents[2].getButtonTabindex($data),
'disabled': !$parents[2].isDayWithinValidRange($data) || !$parents[2].isDayEnabled($data),
'aria-label': $parents[2].formatDate({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}, $data) + ($parents[2].isDateSelected($data) ? ' (' + $t('Selected Date') + ')' : ''),
'aria-describedby': $parents[2].describedBy || 'calendar-label-' + $parents[2].uid,
'aria-required': $parents[2].isRequired,
'aria-invalid': String($parents[2].isInvalid())
},
click: () => $parents[2].selectedDate.call($parents[2], $data),
clickBubble: false,
css: {
'is-active': $parents[2].isDateSelected($data),
'is-disabled': !$parents[2].isDayEnabled($data),
'is-out-of-valid-range': !$parents[2].isDayWithinValidRange($data),
'is-different-month': !$data.isSame($parents[1].firstDay, 'month')
},
hasFocus: $parents[2].focusedDate() && $data.isSame($parents[2].focusedDate(), 'day')
" tabindex="-1" aria-label="Saturday, August 3, 2024" aria-describedby="booking-when-calendar-label" aria-required="true" aria-invalid="false">
<span aria-hidden="true" data-bind="text: $parents[2].formatDate($parents[2].dayDateFormat, $data)">3</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<input class="js-validate-hidden-field js-calendar required-entry" type="hidden" data-bind="value: selectedDate() ? selectedDate().format($data.dateValueDataFormat) : '', attr: {'name': getInputName()}, css: {'required-entry': isRequired}"
name="calendar-0">
</div>
</div>
<!-- /ko-->
<!-- /ko -->
<!-- ko if: bookings.availableDate() && !availableTimes().length --><!-- /ko -->
<!-- ko if: bookings.getActive().date() && availableTimes().length === 0 --><!-- /ko -->
<!-- ko if: availableTimes().length > 0 --><!-- /ko -->
</form><form class="form" id="booking-account-verify-form" data-bind="submit: submit, attr: {'data-hasrequired': $t('* Required Fields')}, mageInit: {'compass/sneaky-labels': {}}" data-hasrequired="* Required Fields" data-sneaky-label="pmkrxt-sneaky-label">
<!-- ko if: signinMethod() === 'telephone' -->
<div>
<div class="legend">
<div class="legend-text">
<h2 data-bind="i18n: 'Sign up or sign in to complete booking.'">Sign up or sign in to complete booking.</h2>
<p data-bind="i18n: 'All form fields labelled with an asterisk (*) are required.'">All form fields labelled with an asterisk (*) are required.</p>
</div>
</div>
<div class="booking-account-text">
<p data-bind="i18n: 'Please enter your mobile number. Providing your mobile number helps us ensure a seamless salon and online experience. This will not sign you up to receive our SMS marketing.'">Please enter your mobile number. Providing your
mobile number helps us ensure a seamless salon and online experience. This will not sign you up to receive our SMS marketing.</p>
<p>
<!-- ko i18n: "We'll call or text you to confirm your number. Standard message and dates rates apply." --><span>We'll call or text you to confirm your number. Standard message and dates rates apply.</span><!-- /ko -->
<a data-bind="i18n: 'Privacy Policy', attr: { href: window.bookingConfig.privacyPolicyUrl }" href="https://chatters.ca/privacy-policy">Privacy Policy</a>
</p>
</div>
<div>
<div class="field required is-empty field-type-input is-initialized">
<label class="label" for="booking-account-telephone">
<span data-bind="i18n: 'Mobile Number'">Mobile Number</span>
</label>
<div class="control">
<input class="input-text" type="text" data-bind=" mageInit: {'mage/trim-input':{}}, value: verificationTelephone" data-validate="{required: true}" id="booking-account-telephone" placeholder="Mobile Number *">
</div>
</div>
<div class="field">
<input type="radio" class="radio" name="booking_account_verify_method" id="booking-account-verify-sms" value="sms" data-validate="{'validate-one-required-by-name': true}" data-bind="checked: verificationMethod">
<label for="booking-account-verify-sms" data-bind="i18n: 'Send by text message (SMS)'">Send by text message (SMS)</label>
</div>
<div class="field">
<input type="radio" class="radio" name="booking_account_verify_method" id="booking-account-verify-call" value="call" data-validate="{'validate-one-required-by-name': true}" data-bind="checked: verificationMethod">
<label for="booking-account-verify-call" data-bind="i18n: 'Send by phone call'">Send by phone call</label>
</div>
</div>
<div class="actions-toolbar">
<div class="primary">
<button type="submit" class="action submit primary" data-bind="click: submit">
<span data-bind="i18n: 'Send Code'">Send Code</span>
</button>
</div>
</div>
</div><!-- /ko -->
<!-- ko if: signinMethod() === 'email' --><!-- /ko -->
<div class="separator">
<span class="outside-borders"><span class="label" data-bind="i18n: 'or'">or</span></span>
</div>
<div class="login-methods-container">
<div class="social-login-container">
<ul class="social-login-link-list">
<!-- ko foreach: { data: window.bookingConfig.socialLogins, as: 'social' } -->
<li class="social-login-link-item">
<button class="social-login-link social-login-link-facebook" data-bind="class: 'social-login-link-' + code, click: function() { window.location.href = url + '?hash=' + window.location.hash.substr(1); }">
<!-- ko text: $t('Sign in with %code:').replace('%code', code)-->Sign in with facebook:<!-- /ko -->
</button>
</li>
<li class="social-login-link-item">
<button class="social-login-link social-login-link-google" data-bind="class: 'social-login-link-' + code, click: function() { window.location.href = url + '?hash=' + window.location.hash.substr(1); }">
<!-- ko text: $t('Sign in with %code:').replace('%code', code)-->Sign in with google:<!-- /ko -->
</button>
</li>
<!-- /ko -->
</ul>
</div>
<!-- ko if: signinMethod() === 'telephone' --><button class="action submit primary social-login-link social-login-link-email" type="button" data-bind="click: function() { signinMethod('email'); }, i18n: 'Sign in with Email'">Sign in with
Email</button><!-- /ko -->
<!-- ko if: signinMethod() === 'email' --><!-- /ko -->
</div>
</form><form class="form" id="booking-confirm-form" data-bind="submit: submit, attr: {'data-hasrequired': $t('* Required Fields')}, mageInit: {'compass/sneaky-labels': {}}" data-hasrequired="* Required Fields" data-sneaky-label="ptt98l-sneaky-label">
<div class="legend booking-confirm-legend">
<h3 class="booking-confirm-title" data-bind="i18n: 'Almost done - one more step!'">Almost done - one more step!</h3>
<div class="legend-text">
<p data-bind="i18n: 'Please provide the following information to finalize your booking. All fields marked with * are required.'">Please provide the following information to finalize your booking. All fields marked with * are required.</p>
</div>
</div>
<!-- ko if: bookings.requireAdditionalAccountInformation() --><!-- /ko -->
<div class="fieldset">
<div class="legend">
<h5 data-bind="i18n: 'How would you like to receive notifications for this booking?'">How would you like to receive notifications for this booking?</h5>
</div>
<div class="field">
<input type="checkbox" class="checkbox" id="booking-confirm-remind-sms" data-bind="value: true, checked: bookings.reminderSms" value="true">
<label for="booking-confirm-remind-sms" data-bind="i18n: 'Send me reminders via SMS'">Send me reminders via SMS</label>
</div>
<div class="field">
<input type="checkbox" class="checkbox" id="booking-confirm-remind-email" data-bind="value: true, checked: bookings.reminderEmail" value="true">
<label for="booking-confirm-remind-email" data-bind="i18n: 'Send me reminders by email'">Send me reminders by email</label>
</div>
<div class="field">
<input type="checkbox" class="checkbox" id="booking-confirm-newsletter" data-bind="value: true, checked: bookings.newsletter" value="true">
<label for="booking-confirm-newsletter" data-bind="i18n: 'Sign up to receive emails from Chatters. You may unsubscribe at any time through your account.'">Sign up to receive emails from Chatters. You may unsubscribe at any time through your
account.</label>
</div>
</div>
<div class="fieldset">
<div class="legend">
<h5 data-bind="i18n: 'Would you like a silent service for your bookings?'">Would you like a silent service for your bookings?</h5>
<p class="subheading" data-bind="i18n: '*Talk is kept to a minimum to ensure a quiet experience'">*Talk is kept to a minimum to ensure a quiet experience</p>
</div>
<!-- ko foreach: {data: bookings.getAll(), as: 'booking'} -->
<div class="field">
<input type="checkbox" class="checkbox" data-bind="attr: {id: 'booking-confirm-silent-' + $index()}, value: true, checked: booking.silentService" id="booking-confirm-silent-0" value="true">
<label data-bind="attr: {for: 'booking-confirm-silent-' + $index()}" for="booking-confirm-silent-0">
<!-- ko text: $t('Yes, book a silent service for %name').replace('%name', booking.name())-->Yes, book a silent service for Myself<!-- /ko -->
</label>
</div>
<!-- /ko -->
</div>
<div class="fieldset">
<div class="legend">
<h5 data-bind="i18n: 'Would you like a modesty service for your bookings?'">Would you like a modesty service for your bookings?</h5>
</div>
<!-- ko foreach: {data: bookings.getAll(), as: 'booking'} -->
<div class="field">
<input type="checkbox" class="checkbox" data-bind="attr: {id: 'booking-confirm-modest-' + $index()}, value: true, checked: booking.modestService" id="booking-confirm-modest-0" value="true">
<label data-bind="attr: {for: 'booking-confirm-modest-' + $index()}" for="booking-confirm-modest-0">
<!-- ko text: $t('Yes, book a modesty service for %name').replace('%name', booking.name())-->Yes, book a modesty service for Myself<!-- /ko -->
</label>
</div>
<!-- /ko -->
</div>
<div class="fieldset">
<div class="legend">
<h5 data-bind="i18n: 'Do you have any notes to share with your stylist?'">Do you have any notes to share with your stylist?</h5>
</div>
<div class="field is-empty field-type-textarea is-initialized">
<textarea id="booking-confirm-comment" data-bind="attr: {maxLength: window.bookingConfig.commentMaxLength}, value: bookings.comment" maxlength="100" placeholder=""></textarea>
</div>
</div>
<!-- div class="fieldset">
<div class="field booking-confirm-file-field">
<input type="file" id="booking-confirm-file" multiple accept=".jpg, .jpeg, .png, .gif, .pdf" data-bind="
event: {change: showImages}" />
<label translate="'Upload an image'" for="booking-confirm-file" class="booking-confirm-file"></label>
<span translate="'Accepted file types include\: JPEG, GIF, PNG, PDF.'" class="booking-confirm-file-text"></span>
</div>
</div>
<div class="image-thumbs"></div -->
</form>POST
<form class="form form-login" method="post" data-bind="event: {submit: login }" id="login-form">
<div class="fieldset login" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}" data-hasrequired="* Required Fields">
<div class="field email required">
<label class="label" for="customer-email"><span data-bind="i18n: 'Email Address'">Email Address</span></label>
<div class="control">
<input name="username" id="customer-email" type="email" class="input-text" data-mage-init="{"mage/trim-input":{}}" data-bind="attr: {autocomplete: autocomplete}" data-validate="{required:true, 'validate-email':true}"
autocomplete="off">
</div>
</div>
<div class="field password required">
<label for="pass" class="label"><span data-bind="i18n: 'Password'">Password</span></label>
<div class="control">
<input name="password" type="password" class="input-text" id="pass" data-bind="attr: {autocomplete: autocomplete}" data-validate="{required:true}" autocomplete="off">
</div>
</div>
<!-- ko foreach: getRegion('additional-login-form-fields') -->
<!-- ko template: getTemplate() -->
<input name="captcha_form_id" type="hidden" data-bind="value: formId, attr: {'data-scope': dataScope}" value="user_login" data-scope="">
<!-- ko if: (isRequired() && getIsVisible())--><!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<div class="actions-toolbar">
<input name="context" type="hidden" value="checkout">
<div class="primary">
<button type="submit" class="action action-login secondary" name="send" id="send2">
<span data-bind="i18n: 'Sign In'">Sign In</span>
</button>
</div>
<div class="secondary">
<a class="action" data-bind="attr: {href: forgotPasswordUrl}" href="https://chatters.ca/customer/account/forgotpassword">
<span data-bind="i18n: 'Forgot Your Password?'">Forgot Your Password?</span>
</a>
</div>
</div>
</div>
</form>POST
<form class="form booking-authentication-form" id="booking-authentication-form" data-bind="submit: submit, attr: {'data-hasrequired': $t('* Required Fields')}, mageInit: {'compass/sneaky-labels': {}, validation: {}}" method="post"
data-hasrequired="* Required Fields" data-sneaky-label="cexuwx-sneaky-label" novalidate="novalidate">
<div class="fieldset">
<div>
<div class="field required is-empty field-type-input is-initialized">
<label class="label" for="booking-authentication-login-email">
<span data-bind="i18n: 'Email Address'">Email Address</span>
</label>
<div class="control">
<input type="text" name="username" id="booking-authentication-login-email" data-bind="mageInit: {'mage/trim-input':{}}" data-validate="{required: true, 'validate-email': true}" class="input-text" placeholder="Email Address *"
aria-required="true">
</div>
</div>
<div class="field required is-empty field-type-input is-initialized">
<label class="label" for="booking-authentication-login-password">
<span data-bind="i18n: 'Password'">Password</span>
</label>
<div class="control">
<input type="password" name="password" id="booking-authentication-login-password" data-validate="{required: true}" class="input-text" data-bind="attr: { type: showPassword() ? 'text' : 'password' }, value: password" placeholder="Password *"
aria-required="true">
<button type="button" class="show-password-button" data-bind="click: toggleShowPassword, text: showPassword() ? $t('Hide') : $t('Show')">Show</button>
</div>
</div>
</div>
</div>
<a class="forgot-password-link" target="_blank" data-bind="attr: {href: window.bookingConfig.forgotPasswordUrl}, i18n: 'Forgot your password?'" href="https://chatters.ca/customer/account/forgotpassword">Forgot your password?</a>
<button class="booking-authentication-submit" type="submit" data-bind="i18n: 'Sign In'">Sign In</button>
</form><form class="form" id="booking-account-verification-form" data-bind="submit: verify">
<div class="legend">
<div class="legend-text">
<h3><!-- ko text: $t('Please enter the code we sent to %telephone:').replace('%telephone', verificationTelephone())-->Please enter the code we sent to :<!-- /ko --></h3>
</div>
</div>
<div class="booking-account-verification">
<div class="field required">
<label class="label" for="booking-account-verification-code">
<span data-bind="i18n: 'Verification Code'">Verification Code</span>
</label>
<div class="control">
<input class="input-text" type="text" data-bind=" mageInit: {'mage/trim-input':{}}, value: verificationCode" id="booking-account-verification-code" data-validate="{required: true}">
</div>
</div>
<button class="booking-account-button" type="submit" data-bind="i18n: 'Submit Code'">Submit Code</button>
<div class="booking-account-text-wrapper">
<span class="booking-account-text"><!-- ko i18n: 'Didn\'t get a code?'--><span>Didn't get a code?</span><!-- /ko --></span>
<a href="#" data-bind="click: function() { verificationAlt(true); }, i18n: 'More Options'">More Options</a>
</div>
</div>
</form>Text Content
JavaScript seems to be disabled in your browser. For the best experience on our
site, be sure to turn on Javascript in your browser.
1. Chatters London Fanshawe
Change
WHO WOULD YOU LIKE TO MAKE A BOOKING FOR?
Myself
A Family Member
WHICH STYLIST WOULD YOU LIKE TO BOOK WITH?
Anyone
No Preference
Andrea D.
Stylist: Senior
Amanda R.
Stylist: Elite
Jennifer D.
Stylist: Elite
Phil M.
Stylist: Senior
Bella F.
Stylist: Elite
Mariana J.
Stylist: Elite
Melanie E.
Stylist: Elite
Leigh A.
Stylist: Intermediate
Rebecca M.
Stylist: Elite
Alecia A.
Stylist: Master
WHICH OPTION BEST REPRESENTS YOUR CURRENT HAIR LENGTH?
Barbering
Up to 3"
Short
3" to Chin
Medium
Chin to 2" Below Shoulders
Long
More Than 2" Below Shoulders
2. WHAT SALON SERVICES WOULD YOU LIKE TO BOOK?
** Final prices may vary after consultation and by stylist service
offerings.
Filter
* CUTS (10)
* Bang Trim
15 minutes
Starting at $18.00
Learn More Add
* Adult Buzz Cut
20 minutes
Starting at $20.00
Learn More Add
* Clean Up - Beard & Neck Trim
15 minutes
Starting at $12.00
Learn More Add
* Adult Barber
30 minutes
Starting at $30.00
Learn More Add
* Adult - Short
45 minutes
Starting at $39.00
Learn More Add
* Adult - Medium
1 hour
Starting at $49.00
Learn More Add
* Adult - Long
1 hour
Starting at $64.00
Learn More Add
* Adult - Long Advanced
1 hour 30 minutes
Starting at $74.00
Learn More Add
* Adult - Curl
1 hour 15 minutes
Starting at $89.00
Learn More Add
* Adult - Curl Long & Thick
1 hour 30 minutes
Starting at $107.00
Learn More Add
* COLOUR (19)
* Colour Camo
30 minutes
Starting at $0.00
Learn More Add
* Colour Retouch
2 hours
Starting at $87.00
Learn More Add
* Express Roots
1 hour 20 minutes
Starting at $87.00
Learn More Add
* Lightening Retouch
2 hours 45 minutes
Starting at $132.00
Learn More Add
* Colour - Short
2 hours
Starting at $95.00
Learn More Add
* Colour - Medium
2 hours 15 minutes
Starting at $122.00
Learn More Add
* Colour - Long
2 hours 40 minutes
Starting at $132.00
Learn More Add
* Partial Foils - Short
2 hours 15 minutes
Starting at $137.00
Learn More Add
* Partial Foils - Medium
2 hours 30 minutes
Starting at $168.00
Learn More Add
* Partial Foils - Long
3 hours
Starting at $178.00
Learn More Add
* Foils - Short
2 hours 15 minutes
Starting at $153.00
Learn More Add
* Foils - Medium
2 hours 45 minutes
Starting at $173.00
Learn More Add
* Foils - Long
3 hours 30 minutes
Starting at $198.00
Learn More Add
* Dual Technique Colour - Short
3 hours 10 minutes
Starting at $169.00
Learn More Add
* Dual Technique Colour - Medium
3 hours 5 minutes
Starting at $204.00
Learn More Add
* Dual Technique Colour - Long
3 hours 30 minutes
Starting at $224.00
Learn More Add
* Gloss
2 hours
Starting at $87.00
Learn More Add
* Balayage - Medium
3 hours
Starting at $204.00
Learn More Add
* Balayage - Long
3 hours 30 minutes
Starting at $224.00
Learn More Add
* KIDS (6)
* Kids - Short (0-8 Yrs)
30 minutes
Starting at $23.00
Learn More Add
* Kids - Medium (0-8 Yrs)
30 minutes
Starting at $27.00
Learn More Add
* Kids - Long (0-8 Yrs)
45 minutes
Starting at $40.00
Learn More Add
* Kids - Short (9-12 Yrs)
30 minutes
Starting at $28.00
Learn More Add
* Kids - Medium (9-12 Yrs)
45 minutes
Starting at $35.00
Learn More Add
* Kids - Long (9-12 Yrs)
1 hour
Starting at $45.00
Learn More Add
* TREATMENT (2)
* Custom Treatment
20 minutes
Starting at $22.00
Learn More Add
* Olaplex
20 minutes
Starting at $47.00
Learn More Add
* STYLING (4)
* Blowout Short
45 minutes
Starting at $42.00
Learn More Add
* Blowout Long/Full
1 hour 15 minutes
Starting at $58.00
Learn More Add
* Braids & Waves
20 minutes
Starting at $0.00
Learn More Add
* Special Occasion
1 hour
Starting at $75.00
Learn More Add
* CONSULTATION (1)
* Hair Consultation
15 minutes
Starting at $15.00
Learn More Add
* EXTENSIONS (1)
* Extensions Consultation
15 minutes
Starting at $15.00
Add
* EXPRESS BEAUTY (6)
* Wax - Chin
15 minutes
Starting at $18.00
Learn More Add
* Wax - Lip
15 minutes
Starting at $18.00
Learn More Add
* Wax - Nose
15 minutes
Starting at $0.00
Learn More Add
* Wax - Face
30 minutes
Starting at $18.00
Learn More Add
* Brow - Wax
15 minutes
Starting at $20.00
Learn More Add
* Brow - Tint
15 minutes
Starting at $25.00
Learn More Add
* TEXTURE (2)
* Perm - Short
2 hours
Starting at $122.00
Learn More Add
* Perm - Medium
2 hours
Starting at $152.00
Learn More Add
3. WHAT DATE WOULD YOU LIKE YOUR APPOINTMENT?
Jun 24 July 2024 Aug 24
Su Mo Tu We Th Fr Sa 30 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
21 22 23 24 25 26 27 28 29 30 31 1 2 3
4. SIGN UP OR SIGN IN TO COMPLETE BOOKING.
All form fields labelled with an asterisk (*) are required.
Please enter your mobile number. Providing your mobile number helps us
ensure a seamless salon and online experience. This will not sign you up to
receive our SMS marketing.
We'll call or text you to confirm your number. Standard message and dates
rates apply. Privacy Policy
Mobile Number
Send by text message (SMS)
Send by phone call
Send Code
or
* Sign in with facebook:
* Sign in with google:
Sign in with Email
5. ALMOST DONE - ONE MORE STEP!
Please provide the following information to finalize your booking. All
fields marked with * are required.
HOW WOULD YOU LIKE TO RECEIVE NOTIFICATIONS FOR THIS BOOKING?
Send me reminders via SMS
Send me reminders by email
Sign up to receive emails from Chatters. You may unsubscribe at any time
through your account.
WOULD YOU LIKE A SILENT SERVICE FOR YOUR BOOKINGS?
*Talk is kept to a minimum to ensure a quiet experience
Yes, book a silent service for Myself
WOULD YOU LIKE A MODESTY SERVICE FOR YOUR BOOKINGS?
Yes, book a modesty service for Myself
DO YOU HAVE ANY NOTES TO SHARE WITH YOUR STYLIST?
Booking Summary - $0.00 View Close
ABOUT YOUR BOOKING
Chatters London Fanshawe
109 Fanshawe Park Road E
Edit Location View Details
$0.00
$0.00
$0.00
Continue to Next Step
** Final price may vary after consultation and by stylist service offerings.
** Bookings without a preferred Stylist are subject to change based on
availability.
Cancellation Policy: ** Chatters Hair Salon lets you cancel up until the
appointment time.
Subtotal $0.00
Next
Login
Alert
Close
Checkout as a new customer
Creating an account has many benefits:
* See order and shipping status
* Track order history
* Check out faster
Create an Account
Checkout using your account
Email Address
Password
Sign In
Forgot Your Password?
SIGN INTO YOUR ACCOUNT
All fields marked with * are required.
Close
Email Address
Password
Show
Forgot your password? Sign In
or
* Continue with Facebook
* Sign in with Google
SELECT A STYLIST
Close
WHICH STYLIST WOULD YOU LIKE TO BOOK WITH?
Anyone
No Preference
Andrea D.
Stylist: Senior
Amanda R.
Stylist: Elite
Jennifer D.
Stylist: Elite
Phil M.
Stylist: Senior
Bella F.
Stylist: Elite
Mariana J.
Stylist: Elite
Melanie E.
Stylist: Elite
Leigh A.
Stylist: Intermediate
Rebecca M.
Stylist: Elite
Alecia A.
Stylist: Master
Save
VERIFY MOBILE NUMBER
Close
PLEASE ENTER THE CODE WE SENT TO :
Verification Code
Submit Code
Didn't get a code? More Options
Filters Close Filters
Category
* CUTS
* COLOUR
* KIDS
* TREATMENT
* STYLING
* CONSULTATION
* EXTENSIONS
* EXPRESS BEAUTY
* TEXTURE
* View more
Stylist
* Andrea D.
* Amanda R.
* Jennifer D.
* Phil M.
* Bella F.
* Mariana J.
* Melanie E.
* Leigh A.
* Rebecca M.
* Alecia A.
* View more
Apply Clear
Close filters selection