title = "Travel Category"
url = "/travel/:catslug"
layout = "default"
is_hidden = 0
lazy_load = 1
meta_title = "{{ categoryDetails.record.name }}"
meta_description = "{{ categoryDetails.record.description|striptags }}"
enabled_in_sitemap = 0
model_class = "Webmors\Catalog\Models\Category"
model_all_posts = 0
model_include_default = 0
use_updated_at = 0
changefreq = "always"
priority = 0.1
og_title = "{{ productDetails.record.title }} island"
og_description = "{{ productDetails.record.preview_text }}"
og_ref_image = "{{ productDetails.record.cover }}"

[builderDetails productDetails]
modelClass = "Webmors\Catalog\Models\Product"
identifierValue = "{{ :slug }}"
modelKeyColumn = "slug"
displayColumn = "title"
notFoundMessage = "Record not found"

[builderDetails categoryDetails]
modelClass = "Webmors\Catalog\Models\Category"
identifierValue = "{{ :catslug }}"
modelKeyColumn = "catslug"
displayColumn = "id"
notFoundMessage = "Record not found"
==
<?php
use \Webmors\Catalog\Models\Product;

function onStart()
{

}
?>
==
{% set productDetail = productDetails.record %}
{% set categoryDetail = categoryDetails.record %}
{% put styles %}
<style>
.slider__main__content {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: end;
    padding-left: 25px;
    padding-right: 100px;
    /*padding-top: 110px;*/
}
.back__btn__blk {
    padding-top: 0px;
    margin-bottom: 10px;
    margin-right: 20px;
}
.tab__area {
    padding-top: 20px;
    padding-bottom: 0px;
}
.tab__topbar {
    text-align: center;
    padding-bottom: 10px;
}
</style>
{% endput %}
{% put styles %}
<style>
.divimage {
  display: inline-block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.bgdivimg {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
</style>
{% endput %}
{#
<div class="main overflow-hidden">
#}
{% set mainurl = "" %}
<div class="main">
        <!-- =================== Slider AREA START ===================== -->
        <div class="slider__area">
            <div class="slider__left__blk divimage">
            <img src="{{ productDetail.cover|media }}" class="bgdivimg">
                <div class="slider__main__content">
                    <div class="slider__pages">
                        <div class="back__btn__blk">
                            <a href="#" onclick="history.back()"><i class="fal fa-long-arrow-left"></i>Go Back</a>
                        </div>
                        <a href="/">Home</a>
                        {% if this.param['slug'] %}
                        <a href="{{ 'travel-cat'|page({ catslug:this.param['catslug'] }) }}">{{productDetail.category.name}}</a>
                        <span>Information</span>
                        {% else %}
                        <span>{{ categoryDetail.name }}</span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        <!-- =================== Slider AREA START ===================== -->

        {% if this.param['slug'] %}
        <!-- =================== SERVICE AREA START ===================== -->
        <section class="date__area">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="date__main__blk">
                            <div class="date__title">
                                <p><i class="fas fa-map-marker-alt"></i>{{ productDetail.title }}</p>
                            </div>
                            <div class="">
                             <label for="#" style="color: white">Select your dates:</label>
                             <input type="text" name="daterange"
                                 value="{{ now|date("m/d/Y") }} - {{ now|date_modify("+1 day")|date("m/d/Y") }}" style="min-width: 190px;"/>
                            </div>
                            <div class="date__select__blk">
                                <select name="" id="">
                                    <option value="">Accomodation</option>
                                    <option value="">Hotel</option>
                                </select>
                            </div>
                            <div class="date__btn__blk">
                                <button type="button">SEARCH NOW</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- =================== SERVICE AREA END ===================== -->


        <!-- =================== TAB AREA START ===================== -->
        <section class="tab__area">
            {% if backendLoggedIn and editMode %}
                <a style="position:relative;top:0;left:0;border-radius:0;z-index:10000000;width:150px;" class="btn btn-success btn-sm" href="{{ url('/') }}{{ backendUri }}/webmors/catalog/products/update/{{ productDetail.id }}" role="button" target="_blank">Edit item</a>
            {% endif %}
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="tab__topbar">
                            <h2>{{ productDetail.title }} Information</h2>
                            {#
                            <p><i class="fas fa-map-marker-alt"></i>20+ Beaches</p>
                            #}
                        </div>
                    </div>
                </div>
                <div class="row d-block d-md-none d-lg-none">
                    <div class="col-lg-12">
                        <div class="tab__main__wrap tab__main__blk">
                            <ul class="nav nav-tabs tab_main" id="myTab" role="tablist">
                                {% for tabname in tabs %}
                                {% if loop.first %}
                                {% set mainurl = tabname.url %}
                                {% endif %}
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link tab_main {% if tabname.active %}active{% endif %}" id="{{ tabname.slug }}accord" data-bs-toggle="tab"
                                        data-bs-target="#{{ tabname.slug }}accord" type="button" role="tab" aria-controls="{{ tabname.slug }}accord"
                                        aria-selected="true" onclick="location.href='{{ tabname.url }}';">{{ tabname.name }}</button>
                                </li>
                                {% endfor %}
                            </ul>
                            <div class="tab-content" id="myTabContent">
                                {% for tabname in tabs %}
                                <div class="tab-pane fade show {% if tabname.active %}active{%endif%}" id="{{ tabname.slug }}tabaccord" role="tabpanel"
                                    aria-labelledby="{{ tabname.slug }}accord">                             
                                    <div class="tab__inner__one">
                                        <div class="accordion" id="{{ tabname.slug }}tabaccord">
                                        {% for section in tabname.sections if not section.active %}
                                            <div class="accordion-item">
                                                {% if tabname.sections|length > 1 %}
                                                <h2 class="accordion-header" id="heading-{{ section.slug }}">
                                                    <button class="accordion-button {% if not section.active %}collapsed{% endif %}" type="button"
                                                        data-bs-toggle="collapse" {% if section.active %}data-bs-target="#collapse-{{ section.slug }}"{% endif %}
                                                        aria-expanded="{% if not section.active %}false{% else %}true{% endif %}" aria-controls="collapse-{{ section.slug }}" {% if not section.active %}onclick="location.href='{{ section.url }}';"{%endif%}>
                                                        {{ section.name }}
                                                    </button>
                                                </h2>
                                                {% endif %}
                                                <div id="collapse-{{ section.slug }}" class="accordion-collapse collapse {% if section.active %}show{%endif%}"
                                                    aria-labelledby="heading-{{ section.slug }}" data-bs-parent="#{{ tabname.slug }}tabaccord">
                                                    <div class="accordion-body">
                                                        {% if section.active %}
                                                        <div class="tab__content__blk">
                                                            <div class="tab__topbar__1">
                                                                <div class="tab__social__1">
                                                                {% partial 'island/share' mainurl=mainurl %}
                                                                </div>
                                                                <h1>{{ section.content.title }}</h1>
                                                            </div>
                                                            <div class="tab__content__1">
                                                                <!-- Content -->
                                                                {% if section.content.gallery %}
                                                                {% partial 'island/gallery' gallery=section.content.gallery %}
                                                                <br><br>
                                                                {% endif %}
                                                                {% if section.content.description %}
                                                                {{ section.content.description|raw }}
                                                                {% endif %}
                                                                {% if section.content.listitems %}
                                                                {% partial 'island/list' list=section.content.listitems %}
                                                                {% endif %}
                                                                {% if section.content.accorditems %}
                                                                {% partial 'island/accordion' accorditems=section.content.accorditems title=section.slug~"mob" %}
                                                                {% endif %}
                                                            </div>
                                                        </div>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </div>                                            
                                        {% endfor %}
                                        {% for section in tabname.sections if section.active %}
                                            <div class="accordion-item">
                                                {% if tabname.sections|length > 1 %}
                                                <h2 class="accordion-header" id="heading-{{ section.slug }}">
                                                    <button class="accordion-button {% if not section.active %}collapsed{% endif %}" type="button"
                                                        data-bs-toggle="collapse" data-bs-target="#collapse-{{ section.slug }}"
                                                        aria-expanded="{% if not section.active %}false{% else %}true{% endif %}" aria-controls="collapse-{{ section.slug }}" {% if not section.active %}onclick="location.href='{{ section.url }}';"{%endif%}>
                                                        {{ section.name }}
                                                    </button>
                                                </h2>
                                                {% endif %}
                                                <div id="collapse-{{ section.slug }}" class="accordion-collapse collapse {% if section.active %}show{%endif%}"
                                                    aria-labelledby="heading-{{ section.slug }}" data-bs-parent="#{{ tabname.slug }}tabaccord">
                                                    <div class="accordion-body">
                                                        {% if section.active %}
                                                        <div class="tab__content__blk">
                                                            <div class="tab__topbar__1">
                                                                <div class="tab__social__1">
                                                                {% partial 'island/share' mainurl=mainurl description=productDetail.preview_text title=productDetail.title %}
                                                                </div>
                                                                <h1>{{ section.content.title }}</h1>
                                                            </div>
                                                            <div class="tab__content__1">
                                                                <!-- Content -->
                                                                {% if section.content.gallery %}
                                                                {% partial 'island/gallery' gallery=section.content.gallery %}
                                                                <br><br>
                                                                {% endif %}
                                                                {% if section.content.description %}
                                                                {{ section.content.description|raw }}
                                                                {% endif %}
                                                                {% if section.content.listitems %}
                                                                {% partial 'island/list' list=section.content.listitems %}
                                                                {% endif %}
                                                                {% if section.content.accorditems %}
                                                                {% partial 'island/accordion' accorditems=section.content.accorditems title=section.slug~"mob" %}
                                                                {% endif %}
                                                            </div>
                                                        </div>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </div>                                            
                                        {% endfor %}                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row d-none d-md-block d-lg-block">
                    <div class="col-lg-12">
                        <div class="tab__main__wrap tab__main__blk">
                            <ul class="nav nav-tabs tab_main" id="myTab" role="tablist">
                                {% for tabname in tabs %}
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link tab_main {% if tabname.active %}active{% endif %}" id="{{ tabname.slug }}" data-bs-toggle="tab"
                                        data-bs-target="#{{ tabname.slug }}" type="button" role="tab" aria-controls="{{ tabname.slug }}"
                                        aria-selected="true" onclick="location.href='{{ tabname.url }}';">{{ tabname.name }}</button>
                                </li>
                                {% endfor %}
                            </ul>
                            <div class="tab-content" id="myTabContent">
                                {% for tabname in tabs %}
                                <div class="tab-pane fade show {% if tabname.active %}active{%endif%}" id="{{ tabname.slug }}tab" role="tabpanel"
                                    aria-labelledby="{{ tabname.slug }}">
                                    <div class="tab__inner__one">
                                        <div class="d-flex align-items-start">
                                            {% if tabname.sections|length > 1 %}
                                            <div class="nav flex-column nav-pills me-3 sticky-top" id="v-pills-tab" role="tablist"
                                                aria-orientation="vertical" style="top: 50px">
                                                {% for section in tabname.sections %}
                                                <button class="nav-link {% if section.active %}active{%endif%}" id="v-pills-{{ section.slug }}-tab"
                                                    data-bs-toggle="pill" {% if section.active %}data-bs-target="#v-pills-{{ section.slug }}"{%endif%} type="button"
                                                    role="tab" aria-controls="v-pills-{{ section.slug }}"
                                                    aria-selected="true" onclick="location.href='{{ section.url }}';">{{ section.name }}</button>
                                                {% endfor %}
                                            </div>
                                            {% endif %}
                                            <div class="tab-content" id="v-pills-tabContent">
                                                {% for section in tabname.sections %}
                                                <div class="tab-pane fade show {% if section.active %}active{%endif%}" id="v-pills-{{ section.slug }}" role="tabpanel"
                                                    aria-labelledby="v-pills-{{ section.slug }}-tab">
                                                    <div class="tab__content__blk">
                                                        {% if section.active %}
                                                        <div class="tab__topbar__1">
                                                            <div class="tab__social__1">
                                                                {% partial 'island/share' mainurl=mainurl description=productDetail.preview_text title=productDetail.title %}
                                                            </div>
                                                            <h1>{{ section.content.title }}</h1>
                                                        </div>
                                                        <div class="tab__content__{{ section.slug }}">
                                                            <!-- Content -->
                                                            {% if section.content.gallery %}
                                                            {% partial 'island/gallery' gallery=section.content.gallery %}
                                                            <br><br>
                                                            {% endif %}
                                                            {% if section.content.description %}
                                                            {{ section.content.description|raw }}
                                                            {% endif %}
                                                            {% if section.content.listitems %}
                                                            {% partial 'island/list' list=section.content.listitems %}
                                                            {% endif %}
                                                            {% if section.content.accorditems %}
                                                            {% partial 'island/accordion' accorditems=section.content.accorditems title=section.slug%}
                                                            {% endif %}
                                                        </div>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <br><br>        
        {% else %}
        <div class="container" style="align-items:center; max-width: 960px;">
        <br><br>
        <h1>Discover our {{categoryDetail.name}} </h1>
        {% for productrow in categoryDetail.products|batch(1) %}
         <div class="island__slider  owl-carousel">
            {% for product in productrow %}
             <div class="discover__single__slide__blk">
        {% if backendLoggedIn and editMode %}
            <a style="position:absolute;top:0;left:0;border-radius:0;z-index:10000000;width:150px;" class="btn btn-success btn-sm" href="{{ url('/') }}{{ backendUri }}/webmors/catalog/products/update/{{ product.id }}" role="button" target="_blank">Edit Item</a>
        {% endif %}
                 <div class="discover__slide__thumb">
                     <img src="{{ product.preview_image|media }}" alt="">
                 </div>
                 <div class="discover__slide__content">
                     <h2 style="color:#fff">{{ product.title }}</h2>
                 </div>
                 <div class="discover__overlay">
                     <h2 style="color:#fff">{{ product.title }}</h2>
                     {% set sectionFirst = product.sections|first %}
                     {% for section in product.sections if section.tabsection.sectionslug == 'overview' %}
                         {% set sectionFirst = section %}
                     {% endfor %}                                     
                     <a href="{{ 'travel-new'|page( {catslug:product.category.catslug, slug:product.slug, contentslug:sectionFirst.contentslug} ) }}">Discover</a>
                 </div>
             </div>
                 <span>{{ product.preview_text }} </span>
        {% endfor %}
        </div>
        {% endfor %}
        <br><br>
        </div>
        {% endif %}
        <!-- =================== TAB AREA END ===================== -->
{% put scripts %}
    <script>
    $( document ).ready(function() {
        $('.slider__main__blk').slick({
            slidesToShow: 2,
            slidesToScroll: 1,
            items: 3,
            arrows: true,
            dots: false,
            vertical: true,
            verticalSwiping: true,
            autoplay: true,
            autoplaySpeed: 2500
        });
    });
    </script>
    <script>
    $( document ).ready(function() {
        //--- Venobox -----
        new VenoBox({
            selector: '.my-image-links',
            numeration: true,
            infinigall: true,
            share: true,
            spinner: 'rotating-plane'
        });
    });
    </script>        
{% endput %}