<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
    {# locale #}
<meta http-equiv="Content-Language" content="{{ config('app.locale') }}">

<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{{ news.summary }}"/>

{% block ogdata %}
    <meta property="og:site_name" content="{{ template.get('og_site_name', setting_value('streams::name', config_get('streams::distribution.name'))) }}"/>
    <meta property="og:description" content="{{ news.summary }}"/>
    <meta property="og:title" content="{{ news.title }}"/>
    <meta property="og:url" content="{{ template.get('og_url', url_current()) }}"/>
    <meta property="og:image" content="{{ template.get('og_image') }}"/>
    <meta property="og:type" content="website"/>
    <meta name="google-site-verification" content="ucjZQSD9B1l_m9A8Deu9BhD0dYf0Tcnzo9OXokkRjJQ" />
{% endblock %}

{{ favicons("theme::img/favicon-32x32.png") }}

<title>
    {{ setting_value('streams::name', config_get('streams::distribution.name')) }}
    &#8250;
    {{ news.title }}
</title>

{# CDN Stuff #}
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,900|Nunito:300,400,600,700, 800|Oswald:300,400,500|Open+Sans:300,400,600,700" rel="stylesheet">

{# Base CSS Component #}
{{ asset_add("theme.css", "theme::scss/font-awesome/font-awesome.scss") }}
{{ asset_add("theme.css", "theme::css/foundation.css") }}


{# Main CSS #}
{{ asset_add("fujifilm.css", "theme::css/fujifilm.css") }}


{# Include Asset Collections #}
{{ asset_style("theme.css", ["min"]) }}
{{ asset_style("fujifilm.css", ["min"]) }}

{{ template.includes.render('head')|raw }}

{# Important!! #}
{{ constants() }}

    {{ 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="small-12 medium-12 mainContent cell">

                      {{ news.content.render|raw }}

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

            {# include template product related article #}
            {% include "templates::product-landing/related-article-news" %}

            {% 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() {
           var checkWidth = $(window).width();
           if (checkWidth < 641) {
            $('.fuji-carousel').owlCarousel({
             // stagePadding: 120,
                 items:2,
                 loop:false,
                 margin:25,
                 smartSpeed: 1000,
                 nav:false,
                 dots:false,
                 lazyLoad: true
           });
          } else if (checkWidth > 640) {
            $('.fuji-carousel').owlCarousel({
             // stagePadding: 120,
                 items:3,
                 loop:false,
                 margin:25,
                 smartSpeed: 1000,
                 nav:true,
                 dots:false,
                 lazyLoad: true
           });
          }
         });
       </script>
   </body>
</html>
