<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
    {% include "theme::partials/metadata" %}
    {{ asset_add("newsDetail.css", "theme::css/scroll.css") }}
    {{ asset_add("newsDetail.css", "theme::css/slider.css") }}
    {{ asset_add("newsDetail.css", "theme::css/owlc.css") }}
    {{ asset_style("newsDetail.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="pullUp">

{% include "theme::partials/navigation" %}

<section class="cell bannerNewsDetail no-padding columns">
    <img src="{{ image('theme::img/remove/banner-news.jpg').url() }}" class="imgbnr" alt="FUJI FILM"><!-- 1366 x 855 -->
    <div class="caption">
        <div class="sizeCenterElm">
            <div class="sizeCaption">
                <span class="date">{{ news.publish_at.format('d M Y') }}</span>
                <h2 class="titleCaption">{{ news.title }}</h2>
                <p>
                    {{ news.summary }}
                </p>
            </div>
        </div>
    </div>
</section><!-- END bannerProduct -->
<section class="grid-container full columns">
    <section class="grid-x">


        <section class="descNews transBG cell">
            <div class="sizeCenterElm grid-x">
                <div class="medium-12 mainContent cell">

                    {{ news.content.render|raw }}

                </div>
            </div>
        </section>

        {# Related articles #}
        {% set posts = entries('posts')
            .type('x_stories')
            .recent()
            .where('category_id', news.category.id)
            .where('slug', '!=', news.slug)
            .take(3)
            .get()
        %}

        {% if posts.count() > 0 %}

            <section class="relatedArticle cell">
                <div class="sizeCenterElm columns">
                    <h2 class="titleCategory">
                        {{ trans('theme::page.related-article') }}
                    </h2>
                    <a href="{{ url('x-stories') }}" class="viewall">
                        {{ trans('theme::page.view-all') }}
                    </a>
                </div>
                <div class="cell columns">
                    <div class="sizeCenterElm grid-x">
                        <div class="fuji-carousel owl-theme">

                            {% for articles in posts if articles.slug != request_segment(2) %}
                                <div class="item">
                                    <a href="{{ url('x-stories/' ~ articles.slug) }}">
                                        <img src="{{ image(articles.x_stories_banner_image.cropped()).fit(350,340, null, 'top-left').url() }}"
                                             alt="{{ articles.title }}"/>
                                    </a>
                                    <div class="caption">
                                        <div class="posBot">
                                            <a href="{{ url('x-stories/' ~ articles.slug) }}">
                                                <h4 class="title">{{ articles.title }}</h4>
                                            </a>
                                        </div>
                                        <span class="category">{{ articles.category.name }}</span>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </section>

        {% endif %}

        {% include "templates::campaign/featured-products" %}


    </section>
</section>


{% include "theme::partials/footer" %}
{% include "theme::partials/scripts" %}

<script src="{{ asset_url("theme::js/slider.js") }}"></script>
<script src="{{ asset_url("theme::js/owlc.js") }}"></script>
<script type="text/javascript">
    global();
    readw();
    $(document).ready(function () {
        news();
    });
    $(window).load(function () {
        $('.fuji-carousel').owlCarousel({
            // stagePadding: 120,
            loop: false,
            margin: 25,
            smartSpeed: 1000,
            nav: true,
            dots: false,
            lazyLoad: true,
             responsive:{
                0:{
                    items:2,
                    nav:false
                },
                640:{
                    items:3
                }
            }
        });
    });
</script>
</body>
</html>
