url = "/offersbak/:slug"
title ="Special Offers Detail"
layout = "default"
==
<?php
	function onStart()
	{
		$this['js'] = "assets/js/script.min.js";
        $this['js'] = "assets/js/offer-detail.min.js";
	}
?>
==

	{% put styles %}
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/comment.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
    {% endput %}

	{% put scripts %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/owl.carousel2.thumbs@0.1.8/dist/owl.carousel2.thumbs.min.js" type="text/javascript"></script>
    {% endput %}

    {% put scripts_inline %}
    {% endput %}

    {% put additional_flying_elements %}
    {% endput %}

    {% put footer_pusher %}
    {% endput %}

    {% put modal %}
    {% endput %}

    <section id="offer-detail-01">
        <div class="container">
            <p class="breadcrumbs">
                <a href="#">Home</a> <i class="ti-angle-right"></i> <a href="#">Special Offers</a> <i class="ti-angle-right"></i> Accommodation Special Offers
            </p>
            <h1 class="mb-3 mb-lg-4 text-center">Accommodation Special Offers</h1>
            <div class="row">
                <div class="col-lg-8 order-lg-1">
                    
                    <div class="offer-detail-carousel-01 owl-carousel owl-theme" data-slider-id="1">
                        {% for i in 1..6 %}
                        <div class="ratio-box ratio4_3 ratio-md2_1">
                            <div style="background: url('{{('assets/images/0' ~ i ~ '.jpg')|theme}}')" class="full-bg-img ratio-box-content"></div>
                        </div>
                        {% endfor %}
                    </div>
                    <div class="owl-thumbs mb-4 row no-gutters" data-slider-id="1">
                        {% for i in 1..6 %}
                        <div class="owl-thumb-item col-3 col-lg-1 px-1 p-1">
                            <div class="ratio-box ratio1_1">
                                <div style="background: url('{{('assets/images/0' ~ i ~ '.jpg')|theme}}')" class="full-bg-img ratio-box-content"></div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>

                </div>
                <div class="col-lg-4 order-lg-0">
                    <div class="why-book">
                        <h4 class="text-uppercase mb-3">Why Book With Us</h4>
                        <ul class="list-unstyled mb-0">
                            <li class="mb-lg-3">
                                <div class="d-flex">
                                    <div class="pr-2"><i class="check circle outline icon"></i></div>
                                    <div>Free one way airport transfer</div>
                                </div>
                            </li>
                            <li class="mb-lg-3">
                                <div class="d-flex">
                                    <div class="pr-2"><i class="check circle outline icon"></i></div>
                                    <div>15% Discount for all foods</div>
                                </div>
                            </li>
                            <li class="mb-lg-3">
                                <div class="d-flex">
                                    <div class="pr-2"><i class="check circle outline icon"></i></div>
                                    <div>15% Discount for all treatments</div>
                                </div>
                            </li>
                            <li class="mb-lg-3">
                                <div class="d-flex">
                                    <div class="pr-2"><i class="check circle outline icon"></i></div>
                                    <div>Free 30 minutes Balinese Massage</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="ui comments border p-4">
                        <div class="comment">
                            <a class="avatar">
                            <img src="https://semantic-ui.com/images/avatar/small/elliot.jpg">
                            </a>
                            <div class="content">
                                <a class="author">Elliot Fu</a>
                                <div class="metadata m-0">
                                    <span class="m-0">-</span>
                                    <div class="country">China Republic</div>
                                </div>
                                <p class="m-0 mt-2">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="offer-detail-02">
        <div class="container">
            {% for i in 1..3%}
            <div class="ktpid-021">
                <h4 class="mb-3">
                    Secret Deal | <span class="text-beta">From IDR 7.000.000++</span>
                </h4>
                <p>
                    We offers you this promotion that hard to resist! Use this special promo code: <strong>CAMP-AYODYADEAL</strong>
                </p>
                <div class="row">
                    <div class="col-lg-7">
                        <div>
                            <div class="offer-detail-carousel-02 owl-carousel owl-theme" data-slider-id="ktpidcrs-{{i}}">
                                {% for i in 1..6 %}
                                <div class="ratio-box ratio4_3 ratio-md2_1">
                                    <div style="background: url('{{('assets/images/0' ~ i ~ '.jpg')|theme}}')" class="full-bg-img ratio-box-content"></div>
                                </div>
                                {% endfor %}
                            </div>
                            <div class="owl-thumbs mb-4 mb-lg-0 row no-gutters" data-slider-id="ktpidcrs-{{i}}">
                                {% for i in 1..6 %}
                                <div class="owl-thumb-item col-3 col-lg-1 px-1 p-1">
                                    <div class="ratio-box ratio1_1">
                                        <div style="background: url('{{('assets/images/0' ~ i ~ '.jpg')|theme}}')" class="full-bg-img ratio-box-content"></div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <ul class="list-unstyled mb-3">
                            <li class="mb-2">
                                <span class="text-uppercase">
                                    <strong>Inclusions</strong>
                                </span>
                            </li>
                            <li>
                                <div class="d-flex">
                                    <div class="pr-1"><i class="check circle outline icon"></i></div>
                                    <div>Best Online Rates Guaranteed</div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex">
                                    <div class="pr-1"><i class="check circle outline icon"></i></div>
                                    <div>Welcome drink and fresh cold towel on Arrival</div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex">
                                    <div class="pr-1"><i class="check circle outline icon"></i></div>
                                    <div>Complimentary WiFi</div>
                                </div>
                            </li>
                        </ul>

                        <ul class="list-unstyled mb-3">
                            <li class="mb-2">
                                <span class="text-uppercase">
                                    <strong>Terms &amp; Conditions</strong>
                                </span>
                            </li>
                            <li>
                                <div class="d-flex">
                                    <div class="pr-1"><i class="circle outline icon"></i></div>
                                    <div>Subject to availability</div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex">
                                    <div class="pr-1"><i class="circle outline icon"></i></div>
                                    <div>Advance reservation is required, full payment, non-refundable</div>
                                </div>
                            </li>
                            <li>
                                <div class="d-flex">
                                    <div class="pr-1"><i class="circle outline icon"></i></div>
                                    <div>Blackout period is applicable</div>
                                </div>
                            </li>
                        </ul>

                        <a class="btn btn-primary rounded-0 filter-button d-block d-lg-inline-block px-4 py-2" href="#">Book Now</a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </section>