{% partial "helpers/gallery-with-vertical"
    mainImage=mainImage
    galleryImages=galleryImages
    name=islandPage.name
    breadcrumbs=__SELF__.breadcrumbs()
%}

<script>
    window.islandPageConfig = {
        id: '{{ city.id }}',
        name: '{{ islandPage.name }}',
        accommodations: {{ __SELF__.getAccommodations()|json_encode|raw }}
    };
</script>

<div id="island-bar"></div>
<script src="/themes/ketikidis-octobercms-success/assets/js/dist/island-page.js"></script>

<style>
    .vdp-datepicker {
        display: inline-block!important;
        font-size: 16px;
        color: #343434;
    }
    
    .island-black-bar {
        background-color: #000;
        color: #fff;
        padding: 16px 0;
        text-align: center;
        font-size: 24px;
    }
    .island-black-bar button {
        padding: 42px 77px;
        border: none;
        background-color: #149FE5;
        color: #fff;
        font-size: 18px;
    }
    .island-black-bar input {
        max-width: 180px;
        text-align: center;
    }
    .island-black-bar input, select {
        border: none;
        background-color: transparent;
        outline: none;
        color: #fff;
    }
    .island-black-bar select {
        margin-right: 60px;
    }
    .island-black-bar .island-name {
        display: inline-block;
    }
    .island-black-bar .island-name::before {
        content: '';
        background-image: url('/themes/ketikidis-octobercms-success/assets/images/marker-white.svg');
        width: 17px;
        height: 23px;
        background-repeat: no-repeat;
        display: block;
        float: left;
        margin-right: 10px;
        margin-top: 6px;
    }
</style>


<!-- datepicker-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="content-container">
    {% partial "inner-page/header"
        title=islandPage.name
        location=__SELF__.location()
        no_reviews=true
        description=__SELF__.islandPageDescription()
    %}
    
    <!-- Tabs -->
    <div class="tablinks-container">
        <button class="tablinks active"
                data-target-tab="overview-tab">Overview</button>
        <button class="tablinks" data-target-tab="special-offers">
            Special Offers
        </button>
        <button class="tablinks" data-target-tab="where-to-stay">
            Where to stay
        </button>
        <button class="tablinks" data-target-tab="things-to-do">
            Things to do
        </button>
        <button class="tablinks" data-target-tab="gallery">Gallery</button>
        <button class="tablinks" data-target-tab="faqs">Explore / FAQs</button>
    </div>

    <script>
        document.querySelectorAll(".tablinks").forEach(function(el) {
            el.addEventListener('click', function (e) {

                document.querySelectorAll('.tabcontent, .tablinks').forEach(
                    function(el) {
                        el.classList.remove('active');
                    }
                );
                document.querySelectorAll('#' + e.target.getAttribute('data-target-tab')).forEach(
                    function(el) {
                        el.classList.add('active');
                    }
                );
                e.target.classList.add('active'); // @todo by selector because target could be differ (bubble model)
            });
        });
    </script>
</div>



<div class="tab-line"></div>

<div class="content-container">

    <!-- Tab content -->
    <div id="overview-tab" class="tabcontent overview-tab active">
        <h3 class="tab-title">Overview of Island</h3>

        <div class="tab-content">
            <div class="tab-content-column">
                <div class="about-block">
                    {{ islandPage.about_block|raw }}
                </div>
                
                <!--        @TODO: rewrite to somekind of table        -->
                <div class="additional-info-group">
                    {% for infoBlock in islandPage.info_blocks %}
                        <div class="additional-info">
                            <div class="additional-info-title">
                                {{ infoBlock.label }}
                            </div>
                            <div class="additional-info-content">
                                {{ infoBlock.content|raw }}
                            </div>
                        </div>
                        <div class="additional-info-line-break"></div>
                    {% endfor %}
                </div>
            </div>
            <div class="tab-content-column">
                {% partial "inner-page/the-best-block"
                    title=islandPage.activities_title
                    description=islandPage.activities_description
                    activitiesCards=__SELF__.getActivitiesCards()
                %}
            </div>
        </div>
    </div>

    <div id="special-offers" class="tabcontent">
        <h3 class="tab-title">Special offers</h3>
        <p>{% placeholder special_offers_block default %}@TODO: special-offers{% endplaceholder %}</p>
    </div>

    <div id="things-to-do" class="tabcontent">
        <h3 class="tab-title">Things to do</h3>
        <p>{% placeholder things_to_do_block default %}@TODO: things-to-do{% endplaceholder %}</p>
    </div>

    <div id="where-to-stay" class="tabcontent">
        <h3 class="tab-title">Where to stay</h3>
        <p>
            {% for property in __SELF__.getHotels() %}
                <div class="property">
                    <div class="row pb-48 list-grid-item">
                        <div class="col-md-5">
                            <div class="list-imgs">
                                <img src="{{ property.images[0] }}"
                                     alt="{{ card.name }}"
                                     class="img-fluid">
                            </div>
                        </div>
                        <div class="col-md-7 row-align-center">
                            <div class="row">
                                <div class="col-md-9">
                                    <div class="list-block-full">
                                        <h6 class="list-grid-item-title">
                                            {{ property.name }}
                                        </h6>
                                        <p class="list-grid-item-description">{{ property.short_description }}</p>
                                        <!--                               <star-rating value="5" :disabled="true"></star-rating>-->
                                        <ul class="discover package-price-book">
                                            <li><a href="/hotel/{{ property.url_alias }}"
                                                   class="book-now">DISCOVER</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </p>
    </div>

    <div id="gallery" class="tabcontent">
        <h3 class="tab-title">Gallery</h3>
        <div style="position: relative"
           class="popup-gallery popup-gallery-slider">
            {% for image in islandPage.images %}
                <div><a class="img gallery-image" href="{{ image }}"
                   target="_blank" style="margin: 8px">
                    <img src="{{ image }}"/>
                </a></div>
            {% endfor %}
            
            <style>
                #gallery .gallery-image {
                    float: left;
                    width: 48%;
                }

                #gallery .gallery-image img {
                    width: 100%;
                }
            </style>
        </div>
        <div style="clear:both"></div>
    </div>

    <div id="faqs" class="tabcontent">
        <h3 class="tab-title">FAQs</h3>
        <div>
            {% for faq in faqs %}
                <h5>
                    <b>Question: </b>
                    <span>{{ faq.q }}</span>
                </h5>
                <p>
                    <b>Answer: </b>
                    <br>
                    <span>{{ faq.a }}</span>
                </p>
            {% endfor %}
        </div>
    </div>

    {% partial "inner-page/you-may-like" %}
</div>