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

    {% set camera = entries('products', 'camera').where('slug', request_segment(3)).first() %}
    {% include "templates::product-detail/sub-menu-banner" %}
    
    <section class="grid-container full columns">
        <section class="cell studio-event storeBanner aksesoris-banner fujiInspiring no-padding columns">
            <section class="grid-x">
               <div class="specialBanner nopaci heightMid columns small-12 cell">
                  
                  <img src="{{ image(camera.kit_accesories_banner_image.cropped()).resize(1920,703).quality(100).url() }}"
                       alt="{{ camera.title }} Kit &amp; Accesories"
                       class="right" />{# .resize(1366,500) #}
                  
                  <div class="caption">
                     <div class="sizeCenterElm" style="margin-top:200px;">
                        <div class="boxSize">
                           <h1 class="titleCaption">{{ trans("theme::page.accesories")}}</h1>
                        </div>
                     </div>
                  </div>
               </div><!-- END specialBanner // satu Banner Besar -->
            </section>
        </section>
        <section class="grid-x">
            <section class="aksesoris-section cell heightImg">
                <div class="sizeCenterElm grid-x">
                    {% set categories = entries('products', 'kit_accesories')
                        .groupBy('kit_accesories_category_id', 'camera_name_id')
                        .having('camera_name_id', camera.id).get() %}

                    {% for category in categories %}

                        {% set accesories = entries('products', 'kit_accesories')
                            .where('camera_name_id', camera.id)
                            .where('kit_accesories_category_id', category.kit_accesories_category.id)
                            .where('is_enabled', true)
                            .get()
                        %}
                        {% if accesories.count() > 0 %}

                            <div class="small-12 cell">
                                <div class="boxtabs">
                                    <div class="aksesori-padding">
                                        <h3>{{ category.kit_accesories_category.title}}</h3>
                                        <ul class="cell">

                                            {% for kit in accesories %}

                                                <li>
                                                    <div class="boxImage">
                                                        <img src="{{ image(kit.kit_accesories_image.cropped()).resize(218,117).url() }}"
                                                             alt="{{ kit.kit_accesories_name }}">
                                                    </div>
                                                    <div class="nameImage">
                                                        <p>{{ kit.kit_accesories_name }}</p>
                                                    </div>
                                                </li>

                                            {% endfor %}

                                        </ul>
                                    </div>
                                </div>
                            </div>

                        {% endif %}
                    {% endfor %}
                    <p style="text-align:center;margin:1em 0;width:100%;color:#868f96;">{{ trans('theme::product.acc.availability') }}</p>
                </div>
            </section>

            {# include templates product spec related article #}
            {% include "templates::product-detail/related-product" %}

        </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();
        spesifikasi();
    </script>
    </body>
</html>