[viewBag]
==
<link rel="stylesheet" href="/themes/ketikidis-octobercms-success/assets/css/magnific-popup.css">

<div class="gallery gallery-with-vertical">
<button class="book-button" onclick="goBack()"><span>&#8592;</span> Go Back</button><br>
    <div class="main-image"
         style="background-image: url('{{ mainImage }}');">
        <div class="main-image-info-part">
            <div class="gallery-breadcrumbs">
                {% for name, url in breadcrumbs %}
                    {% if url %}
                        <a href="{{url}}">{{name}}</a>
                    {% else %}
                        <span>{{name}}</span>
                    {% endif %}
                {% endfor %}
            </div>
            <h2>{{ name }}</h2>

            {% if reviews_count %}
                {% partial "helpers/reviews" %}
            {% endif %}
        </div>
        {% if reviews_count %}
            <div class="main-image-info-part second">
                <div class="reviews-wrapper">
                    <div class="reviews-label">Reviews</div>
                    <div class="reviews-count">{{ reviews_count }}</div>
                </div>
                
                {% if from_price %}
                    <div class="price-label">
                        From <b>{{from_price}}{{currency_symbol}}</b> / night
                    </div>
                {% endif %}
            </div>
        {% endif %}

        <div style="clear:both"></div>
    </div>
    <div class="vertical-carousel">
        <div class="popup-gallery vertical-center-4 slider">
            {% for galleryImage in galleryImages %}
                <a class="img" href="{{ galleryImage }}" target="_blank">
                    <img src="{{ galleryImage }}"/>
                </a>
            {% endfor %}
        </div>
    </div>

    <div class="popup-gallery-bottom-indicator hidden">
        <i class="fa fa-angle-down"></i>
    </div>
    
    <div style="clear:both"></div>
</div>
<div id="{{ galleryImage }}" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content" width="600px !important">
        <img src="{{ galleryImage }}" Style="600px !important"/>
    </div>
  </div>
</div>

<style>
.gallery-with-vertical {
    position: relative;
}

.popup-gallery-bottom-indicator {
    width: 60px;
    height: 60px;
    background-color: #fff;
    position: absolute;
    margin-top: -80px;
    margin-left: calc(50% - 30px);
    border-radius: 50%;
    bottom: 30px;
    padding: 5px 20px;
    font-size: 36px;
    right: 13%;
    color: #ff0168;
}
.popup-gallery-bottom-indicator.hidden {
    display: none;
}

.modal-content {
    margin: 0;
    border: None;
    width: 100%;
    padding:0;
}

.modal-backdrop.show {
    opacity: .1 !important;
}
.mfp-s-loading .mfp-arrow { 
   display: none;
}
.slick-list.draggable{
    padding: 0px !important;
}

</style>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="/themes/ketikidis-octobercms-success/assets/js/jquery.magnific-popup.js"></script>
<script>
    (function() {
        $(document).ready(function($) {
            $('.popup-gallery').magnificPopup({
                delegate: 'a',
                type: 'image',
                tLoading: 'Loading image #%curr%...',
                gallery: {
                    enabled: true,
                    navigateByImgClick: true,
                    preload: [0,1]
                },
            });
        });
        
        var verticalCarousel = $('.vertical-carousel');
        
        function recalc() {
            let wrap = verticalCarousel[0],
                inner = verticalCarousel.find('.popup-gallery')[0],
                delta = inner.getBoundingClientRect().bottom
                    - wrap.getBoundingClientRect().bottom;

            if (delta < 150) {
                $('.popup-gallery-bottom-indicator').addClass('hidden');
            } else {
                $('.popup-gallery-bottom-indicator').removeClass('hidden');
            }
        }

        recalc();
        
        verticalCarousel.on('scroll', recalc)
    })();
</script>