<roomsCarousel>

	<div class="carousel__tag">

		<div class="owl-carousel owl-theme reservit-rooms">

			<a class="item"
				href="{url}"
				each="{ items }">

				<div class="reservit-rooms__image">


					<img srcset="
					{img_cache_dir}w400/{image} 400w,
					{img_cache_dir}w600/{image} 600w,
					{img_cache_dir}w800/{image} 800w,
					{img_cache_dir}w1000/{image} 1000w,
					{img_cache_dir}w1200/{image} 1200w,
					{img_cache_dir}w1400/{image} 1400w,
					{img_cache_dir}w1600/{image} 1600w,
					{img_cache_dir}w2000/{image} 2000w

					"
						src="{img_cache_dir}w400/{image}"
						loading="lazy" />

					<p if={opts.show_floating_price}
						class="reservit-rooms__floating-price">

						<span if={price_from}>

							{ locale.MSG_TODAYS_BEST_RATE }<span class="reservit-rooms__floating-price-value">{ price_from }</span>
						</span>

						<span if={!price_from}
							class="reservit-rooms__not-available">
							{ locale.MSG_NOT_AVAILABLE }
						</span>
					</p>

					<p if="{opts.show_floating_capacity}"
						class="reservit-rooms__floating-capacity">{ capacity } pers.</p>

					<p if="{opts.show_floating_surface}"
						class="reservit-rooms__floating-surface">{ surface } m<sup>2</sup></p>



				</div>

				<div class="reservit-rooms__text-container">

					<div class="reservit-rooms__text">

						<p class="reservit-rooms__title">{ title }</p>

						<div class="reservit-rooms__tarifs-container">

							<p if={opts.show_price}
								class="reservit-rooms__price">

								<inlineSvg if={opts.show_price_icons}
									file="/tags/reservitConnect/img/ico-night.svg"
									class="reservit-rooms__ico reservit-rooms__ico--night"></inlineSvg>

								<span if={price_from}>

									{ locale.MSG_TODAYS_BEST_RATE } <span class="reservit-rooms__price-value">{ price_from }</span>
								</span>

								<span if={!price_from}
									class="reservit-rooms__not-available">
									{ locale.MSG_NOT_AVAILABLE }
								</span>

							</p>

							<p if="{ opts.breakfast_price }"
								class="reservit-rooms__breakfast-price">

								<inlineSvg if={opts.show_price_icons}
									file="/tags/reservitConnect/img/ico-breakfast.svg"
									class="reservit-rooms__ico reservit-rooms__ico--breakfast"></inlineSvg>

								<span>

									{ locale.MSG_BREAKFAST_PRICE }
									<span class="reservit-rooms__price-value">
										{ opts.breakfast_price }
									</span>

								</span>

							</p>

							<p if="{ opts.halfboard_price }"
								class="reservit-rooms__halfboard-price">

								<inlineSvg if={opts.show_price_icons}
									file="/tags/reservitConnect/img/ico-half-board.svg"
									class="reservit-rooms__ico reservit-rooms__ico--halfboard"></inlineSvg>

								<span>

									{ locale.MSG_HALFBOARD_PRICE }
									<span class="reservit-rooms__price-value">
										{ opts.halfboard_price }
									</span>

								</span>

							</p>

						</div>

						<p if="{opts.show_surface}"
							class="reservit-rooms__surface">{ surface } m<sup>2</sup></p>

						<p if="{opts.show_capacity}"
							class="reservit-rooms__capacity">{ capacity } pers.</p>

						<p if="{opts.show_content}"
							class="reservit-rooms__content">{ content }</p>

						<ul if={opts.show_services}
							class="reservit-rooms__services room_category_services">
							<li class="room_category_service"
								each="{ service in services}">
								<span class="room_category_service_icon room_category_service_{service.icon}">
									<inlineSvg file="/img/service-icons/{service.file}"></inlineSvg>
								</span>

								<p class="room_category_service_name"
									if="{opts.show_service_name}">
									{ service.name }
								</p>
							</li>
						</ul>

						<p class="reservit-rooms__link text-center"
							if="{ opts.show_link }">
							<span class="button primary">

								<span if="{ opts.link_text }">
									{ opts.link_text }
								</span>
								<span if="{ !opts.link_text }">
									&plus;
								</span>
								<span if="{opts.show_room_name_in_link}"
									class="reservit-rooms__link-room-name">
									{ title }
								</span>
							</span>
						</p>

					</div>

				</div>

			</a>

		</div>

		<a href="#"
			class="navBtn customPrevBtn"
			id="rooms-carousel__btn-prev">
			<svg>
				<polyline points="7,12 17,25 27,12"
					stroke="#efefef"
					stroke-width="{ arrow_stroke_width }"
					fill="none" />
			</svg>
		</a>

		<a href="#"
			class="navBtn customNextBtn"
			id="rooms-carousel__btn-next">
			<svg>
				<polyline points="7,12 17,25 27,12"
					stroke="#efefef"
					stroke-width="{ arrow_stroke_width }"
					fill="none" />
			</svg>
		</a>
	</div>

	<script>
		let self = this;
		let date = dayjs();
		let Euro = new Intl.NumberFormat('fr-FR', {
			style: 'currency',
			currency: 'EUR',
		});


		if (curLang == 'fra') {
			self.text_price_from = 'Meilleur tarif du jour';
		} else {
			self.text_price_from = 'Today\'s best rate';
		}

		this.arrow_stroke_width = 2;
		if (typeof opts.arrow_stroke_width !== "undefined") {
			this.arrow_stroke_width = opts.arrow_stroke_width;
		}

		if (typeof opts.show_price === "undefined") {
			opts.show_price = false;
		}

		if (typeof opts.show_price_icons === "undefined") {
			opts.show_price_icons = false;
		}


		if (typeof opts.show_content === "undefined") {
			opts.show_content = false;
		}
		if (typeof opts.show_surface === "undefined") {
			opts.show_surface = false;
		}
		if (typeof opts.show_capacity === "undefined") {
			opts.show_capacity = false;
		}

		if (typeof opts.show_services === "undefined") {
			opts.show_services = false;
		}

		if (typeof opts.show_service_name === "undefined") {
			opts.show_service_name = true;
		}

		if (typeof opts.breakfast_price === "undefined" || opts.breakfast_price == false) {
			opts.breakfast_price = false;
		} else {
			opts.breakfast_price = Euro.format(opts.breakfast_price);

		}

		if (typeof opts.halfboard_price === "undefined" || opts.halfboard_price == false) {
			opts.halfboard_price = false;
		} else {
			opts.halfboard_price = Euro.format(opts.halfboard_price);

		}

		if (typeof opts.show_link === "undefined") {
			opts.show_link = true;
		}

		if (typeof opts.center === 'undefined') {
			opts.center = false;
		}

		if (typeof opts.loop === 'undefined') {
			opts.loop = false;
		}




		if (typeof opts.autoplay === "undefined") {
			opts.autoplay = true;
		}

		if (typeof opts.numSlides === "undefined") {
			opts.numSlides = {
				0: {
					items: 1
				},
				600: {
					items: 2
				},
				1200: {
					items: 3
				}
			};
		}

		if (typeof opts.margin === "undefined") {
			opts.margin = 0;
		}

		if (typeof opts.show_dots === 'undefined') {
			opts.show_dots = true;
		}

		this.on('before-mount', function () {


			this.loadLocale('/tags/reservitConnect/locale/rooms_carousel_' + curLang + '.json', function (locale) {
				self.locale = locale;
				self.update();
			});

		});

		this.on('mount', function () {

			this.lazyLoad(self, loadItems);

		});

		const loadItems = () => {


			$.getJSON("/" + curLang + "/room_categories/getRoomCategories", async function (
				data
			) {

				var items = [];

				for await (const roomtype of data) {

					//let price = await getRoomtypePrice(
					//	roomtype.RoomCategory.external_reservation_id,
					//	date.format('YYYY-MM-DD')
					//);

					let price = false;

					if (
						typeof roomtype.RoomCategory.todays_price !== 'undefined'
						&& roomtype.RoomCategory.todays_price !== null) {
						price = roomtype.RoomCategory.todays_price;
					}

					items.push({
						title: roomtype.RoomCategory.name,
						image: roomtype.RoomCategory.cover_image,
						price_from: price ? Euro.format(price) : false,
						// price_from: false,
						surface: roomtype.RoomCategory.avg_dimensions,
						capacity: roomtype.RoomCategory.max_capacity,
						content: roomtype.RoomCategory.truncated_description,
						services: roomtype.Service,
						url: "/" +
							roomtype.RoomCategory.locale +
							"/room_categories/view/" +
							roomtype.RoomCategory.id +
							"/" +
							roomtype.RoomCategory.slug,

						roomtype_code: roomtype.RoomCategory.external_reservation_id
					});


				}

				self.items = items;

				self.update();

				$(self.root.localName + ' .carousel__tag').css('min-height', '0');

				rooms__carousel = $(".reservit-rooms");

				rooms__carousel.on('changed.owl.carousel', function (e) {

					if (e.relatedTarget.current() == null) {
						return;
					}

					let items = document.querySelectorAll('.reservit-rooms .owl-item');
					items.forEach(item => item.classList.remove('current'));
					items[e.item.index].classList.add('current');


				})

				rooms__carousel.owlCarousel({
					loop: opts.loop,
					rewind: true,
					autoplay: opts.autoplay,
					autoplayHoverPause: true,
					responsive: opts.numSlides,
					margin: opts.margin,
					center: opts.center,
					dots: opts.show_dots
				});

				$("#rooms-carousel__btn-next").click(function () {
					rooms__carousel.trigger("next.owl.carousel");
					return false;
				});

				$("#rooms-carousel__btn-prev").click(function () {
					rooms__carousel.trigger("prev.owl.carousel");
					return false;
				});

			});

		}

		const getRoomtypePrice = async (roomtype_code, date) => {

			return new Promise((resolve, reject) => {

				let url = reservit_connect_url + '/calendar.json?hotel_id=' + reservit_hotel_id + '&chain_id=' + reservit_chain_id + '&date=' + date + '&roomtype_code=' + roomtype_code;

				$.getJSON(url, function (data) {
					return resolve(Object.values(data)[0]);
				});

			})

		}

	</script>

	<style scoped>
		.carousel__tag {
			min-height: 490px;
		}

		.reservit-rooms__image {
			min-height: 400px;
			height: 400px;
			overflow: hidden;
			position: relative;
		}

		.reservit-rooms__image img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
		}

		.item {
			display: block;
		}

		.item:hover .reservit-rooms__image img {
			transform: scale(1.1);
		}

		.reservit-rooms__image .reservit-rooms__floating-price {
			position: absolute;
			left: 0;
			top: 20px;
			background: rgba(0, 0, 0, 0.5);
			color: #fff;
			padding: 0.5rem 0.8rem;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 0.8rem;

		}

		.reservit-rooms__image .reservit-rooms__floating-price>span {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		.reservit-rooms__image .reservit-rooms__floating-price-value {
			font-weight: bold;
			font-size: 2rem;
			display: flex;
		}

		.reservit-rooms__image .reservit-rooms__floating-capacity {
			position: absolute;
			right: 0;
			top: 20px;
			background: rgba(0, 0, 0, 0.5);
			color: #fff;
			padding: 0.5rem 0.8rem;
			display: flex;
			align-items: center;
			margin: 0;

		}

		.reservit-rooms__image .reservit-rooms__floating-surface {
			position: absolute;
			right: 0;
			top: 70px;
			background: rgba(0, 0, 0, 0.5);
			color: #fff;
			padding: 0.5rem 0.8rem;
			display: flex;
			align-items: center;
			margin: 0;

		}



		.reservit-rooms__text-container {
			position: relative;
			background: #fff;
			color: #444;
			text-align: center;
			padding: 1rem;
			display: flex;
			align-items: center;
			justify-content: center;

		}

		.reservit-rooms__title {
			text-transform: uppercase;
			position: relative;
			text-shadow: none;
			font-size: 1.1rem;

		}


		.reservit-rooms__price-from {
			color: #444;
			font-style: italic;
			margin-bottom: 5px;
		}

		.reservit-rooms__ico svg {
			height: 80px;
			width: auto;

		}

		.reservit-rooms__ico--night svg {
			fill: var(--color-primary, #ccc);

		}

		.reservit-rooms__ico--breakfast svg {
			fill: var(--color-accent, #ccc);

		}

		.reservit-rooms__ico--halfboard svg {
			fill: var(--color-primary, #ccc);

		}

		.room_category_services {
			margin: 1rem 0;
		}

		.room_category_services li {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.room_category_services .room_category_service:nth-of-type(1n+9) {
			display: none;
		}

		.room_category_services .room_category_service .room_category_service_icon {

			width: 40px;
			height: 40px;
			display: inline-flex;
			align-items: center;
			justify-content: center;

		}

		.room_category_services .room_category_service span inlinesvg {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.room_category_services .room_category_service span svg {
			fill: #4D535B !important;
		}

		.reservit-rooms__text> :last-child {
			margin-bottom: 0;
		}
	</style>
</roomsCarousel>