<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
    {% include "theme::partials/metadata" %}
    {{ asset_add("productLens.css", "theme::css/slider.css") }}
    {{ asset_add("productLens.css", "theme::css/owlc.css") }}
    {{ asset_add("productLens.css", "theme::css/tooltip.min.css") }}
    {{ asset_style("productLens.css", ["min"]) }}

    <link rel="stylesheet" media="screen and (min-device-width: 320px) and (max-device-width: 860px)" href="{{ asset_url("theme::css/hamburgers.css") }}">

</head>
<body class="mobileStickynav">

{% include "theme::partials/navigation" %}

<section class="menuDetail columns no-padding">
    <div class="sizeCenterElm">
        <a href="{{ url('product/' ~ request_segment(2)) }}" class="thumbsShowPdt left-top">
            <span class="fa"></span>
            <h1 class="logoTitlenya">{{ data.lens_category.title }} |<strong> {{ data.title|striptags  }}</strong></h1>
        </a>
        <div class="navDetail">
            <ul class="">
                <li class="current"><a data-scroll="#overview">{{ trans('theme::product.overview') }}</a></li>
                <li><a data-scroll="#specification">{{ trans('theme::product.specification') }}</a></li>
                <li><a data-scroll="#gallery">{{ trans('theme::page.gallery') }}</a></li>
                <li><a href="{{ url_current() ~ '/accesories'}}">{{ trans('theme::product.accessories') }}</a></li>
            </ul>
        </div>
    </div>
</section>
<section class="grid-container productLens full columns">
    <section class="grid-x">
        <section class="imageContent cell heightImg">
            <div class="grid-x contentProd">
                <div class="large-4 medium-12 small-12 columns no-padding">
                    <div class="midleheight mainEditor">
                        <span class="feature">{{ data.lens_category.title }}</span>
                        <h2>{{ data.title|raw }}</h2>
                        <p>
                            {{ data.lens_short_description }}
                        </p>
                        <img src="{{ image(data.lens_content_image.cropped()).quality(100).url() }}"
                             alt="{{ data.title }}" style="width:279px;">{# .resize(279,245) #}
                    </div>
                </div>
            </div>
            <div class="grid-x">
                <div class="large-8 medium-12 small-12 columns no-padding imgDec">
                    <img src="{{ image(data.lens_banner_image.cropped()).quality(100).url() }}"
                         alt="{{ data.title }}"/>{# .resize(813,774) #}
                </div>
            </div>
        </section>
        <section id="overview" class="specialPage cell columns">
            <section class="sizeCenterElm mainContent contentProd">
                <div class="grid-x grid-margin-x">
                    <div class="headlineProduct wordCenter gridCenter medium-5 small-12">

                        <h2 class="headline">
                            {{ trans('theme::product.product_overview') }}
                        </h2>
                        <br/>
                        {{ data.lens_overview.render()|raw }}
                    </div>
                </div>
                <div class="grid-x">
                    <div class="bannerImg cell">
                        <img src="{{ image(data.lens_content_image.cropped()).quality(100).url() }}"
                             alt="{{ data.title }}" style="width:513px;" />{# .resize(513,483) #}
                    </div>
                </div>
            </section>
        </section><!-- END specialPage -->
        <section id="specification" class="specialPage cell columns">
            <section class="sizeCenterElm mainContent contentProd">
                <div class="grid-x grid-margin-x">
                    <div class="headlineProduct boxTabLens wordCenter gridCenter medium-12 small-12">

                        <h2 class="headline">
                            {{ trans('theme::product.specification') }}
                        </h2>
                        <div class="grid-x">
                            <div class="small-12 medium-4 lensSpecLeft columns">
                                <span>{{ trans('theme::product.lens_config') }}</span>
                                <ul class="tabSelection">
                                    {% for spec in data.lens_specification %}
                                        <li><a>{{ spec.lens_specification_title }}</a></li>
                                    {% endfor %}
                                </ul>
                                <a class="lensSpecTrig">{{ trans('theme::product.see_full_spec') }}<i class="fa fa-chevron-left"
                                                                                  aria-hidden="true"></i></a>
                            </div>
                            <div class="small-12 medium-8 lensSpecRight tabDetail columns">
                                {% for specImage in data.lens_specification %}
                                    <div class="detailTabs cell">
                                        <img src="{{ image(specImage.lens_specification_image.cropped()).url() }}" alt="">
                                    </div>
                                {% endfor %}
                            </div>
                        </div>

                    </div>
                </div>
            </section>
        </section><!-- END specialPage -->

        <section id="specLensContent" class="cell columns">
            <section class="specLens sizeCenterElm mainContent contentProd">
                <div class="grid-x">
                    <div class="small-12 columns  no-padding">
                        {{ data.lens_full_specification.render()|raw }}
                    </div>
                </div>
            </section>
        </section>

        <section id="gallery" class="cell productSlide no-padding columns">
            <ul class="slides">
                {% for gallery in data.lens_gallery_image %}
                    <li>
                        <section class="mainslide">
                            <div class="layerimg">
                                <img src="{{ image(gallery.lens_gallery_image.cropped()).quality(100).url() }}"
                                     alt="">
                            </div>
                            <div class="captionSlidernye">
                                <span class="titleGallery">{{ gallery.gallery_image_title }}</span>
                                <span class="descGallery">{{ gallery.gallery_image_description }}</span>
                            </div>
                        </section>
                    </li>
                {% endfor %}
            </ul>
        </section>

        {% include "templates::product-detail/related-product" %}

    </section>
</section>

{% include "theme::partials/footer" %}
{% include "theme::partials/scripts" %}
<script src="{{ asset_url("theme::js/tooltip.js") }}"></script>
<script src="{{ asset_url("theme::js/slider.js") }}"></script>
<script src="{{ asset_url("theme::js/owlc.js") }}"></script>
<script src="{{ asset_url("theme::js/fujivideopopup.jquery.js") }}"></script>
<script type="text/javascript">
    global();
    product();
    tabbed($('.tabSelection li'), $('.tabDetail .detailTabs'))

    $(document).ready(function () {
        $('.lensSpecTrig').click(function () {
            $('#specLensContent').slideToggle("slow");
        });
    });


</script>