<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
    {% include "theme::partials/metadata" %}
    {{ asset_add("xstories.css", "theme::css/scroll.css") }}
    {{ asset_add("xstories.css", "theme::css/slider.css") }}
    {{ asset_style("xstories.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>

{% include "theme::partials/navigation" %}
<section class="grid-container full columns">
    <section class="grid-x">
        <section class="cell slideContent columns no-padding">
            <div class="slideHighlight columns no-padding">
                <ul class="slides">

                    {% for banner in entries('posts').type('x_stories').where('is_banner', true).live().get() %}
                        <li>
                            <div class="image-highlight columns no-padding">
                                <img src="{{ image(banner.x_stories_banner_image.cropped()).resize(1600,1015).quality(100).url() }}"
                                     alt="{{ banner.title }}"/>
                            </div>
                            <div class="captionhighlight columns no-padding">
                                <div class="midleheight">
                                    <span class="titlehighlight">{{ trans('theme::x-stories.highlight') }}</span>
                                    <h2 class="namehighlight">
                                        {{ banner.title }}
                                    </h2>
                                    <p>{{ banner.summary }}</p>
                                    <a href="{{ url('x-stories/' ~ banner.slug )}}" class="link">{{ trans('theme::page.see-detail') }}</a>
                                </div>
                            </div>
                        </li>
                    {% endfor %}

                </ul>
            </div>
        </section>
    </section>
    {# <section class="cell fujiInspiring no-padding columns">
        <section class="grid-x">

            {% for feature in entries('posts').type('x_stories').live().take(2).orderBy('publish_at', 'desc').get() %}
                <div class="small-6 cell">
                    <div class="storiesBanner specialHighlight">
                        <img src="{{ image(feature.x_stories_cover_image.cropped()).resize(683,683).url() }}" alt="{{ feature.title }}"/>
                        <div class="caption">
                            <a href="{{ url('x-stories/' ~ feature.slug) }}">
                                <h2 class="titleCaption">
                                    {{ feature.title }}
                                </h2></a>
                            <p>
                                {{ feature.summary }}
                            </p>
                        </div>
                    </div>
                </div>
            {% endfor %}

        </section>
    </section><!-- END fujiInspiring --> #}

    {% set highlight = entries('x-photographer', 'highlights').first() %}
    <section class="grid-x">
        <div class="small-12 medium-12 large-4 cell xPhotographStories">
            <div class="midleheight">
                <p>
                    {{ highlight.caption }}
                </p>
                <h2 class="titleHomeCategory">
                    {{ highlight.title }}
                </h2>
                <a href="{{ url('x-photographer') }}" class="link">{{ trans('theme::page.view-more') }}</a>
            </div>
        </div>
        <div class="small-12 medium-12 large-8 cell">
            <div class="slideXphotographer columns no-padding">
                <ul class="slides">
                    {% for photographer in entries('x-photographer', 'profiles')
                        .where('is_highlight', true)
                        .where('is_enabled', true)
                        .orderBy('id', 'desc')
                        .get() %}
                        <li>
                            <img src="{{ image(photographer.profile_highlight_image.cropped()).fit(794, 683).url() }}" alt="" class="backgroundNya" /><!-- 794 × 683 -->
                            <div class="captionnya">
                                <img src="{{ image(photographer.profile_image.cropped()).fit(133, 133).url() }}" alt="{{ profile.name }}" class="profilePhotonya" />
                                <h2>{{ photographer.name }}</h2>
                                <p>
                                    {{ photographer.profile_summary }}
                                </p>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </section>

    <section class="contentGallery whtShadow cell">
        <div class="sizeCenterElm">
            <div class="grid-x grid-margin-x">
                <div class="gallery small-12 cell">
                    <h2 class="titleHomeCategory">{{ trans('theme::x-stories.fujifilm_photography') }}</h2>
                    <ul class="categoryList">
                        <li><a ajaxUrlCat="view-all">{# class="selected" #}{{ trans('theme::page.view-all') }}</a></li>
                        <li><a ajaxUrlCat="blog">blog</a></li>
                        <li><a ajaxUrlCat="tips-trick">{{ trans('theme::x-stories.tips') }}</a></li>
                        {# <li><a href="#">X Photographer</a></li> #}
                    </ul>
                </div>
                <div class="detailFil small-12 cell">
                    <ul class="grid" id="ajax-content">
                        {% include "templates::stories/view-all" %}
                    </ul>
                </div>
            </div>
        </div>
    </section><!-- END homeNewsEvent -->

</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">
    $(document).ready(function () {
        global();

        $('#ajax-content').html('<div class="loader loadernya"> <img src="{{ image('theme::img/loader_seq.gif').url() }}" width="200" height="200" id="loader-img" align="center"></div>');
        $.ajax({
            url: '{{ url("stories/view-all?page=1") }}',
            type: 'get',
            success: function (data) {
                $('#ajax-content').html(data);
                $('#ajax-content').after($('<a ajaxUrlMore="0" siAjaxUrl="view-all" class="morePage">+ more</a>'));
                $('#ajax-content').removeClass('loader');
            },
            error: function () {
                alert("Please try again");
            },
            complete: function () {
                $('.loadingAnim').fadeIn();
            }
        });

        var clicks = 1;

        $('.categoryList li a').click(function () {
            clicks = 1;
            var siurl = $(this).attr('ajaxUrlCat');
            $('#ajax-content').html('<div class="loader loadernya"> <img src="{{ image('theme::img/loader_seq.gif').url() }}" width="200" height="200" id="loader-img" align="center"></div>');
            $.ajax({
                url: '{{ url("stories") }}/' + siurl + '/',
                type: 'get',
                success: function (data) {
                    $('#ajax-content').html(data);
                    $('.morePage').remove();
                    $('#ajax-content').after($('<a ajaxUrlMore="0" siAjaxUrl="'+ siurl +'" class="morePage">+ more</a>'));
                    $('#ajax-content').removeClass('loader');
                    if ($('.grid li').length == 0) {
                        $('#ajax-content').html('<div class=""> <h3>Data yang anda cari tidak dapat ditemukan</h3></div>');
                    }
                },
                error: function () {
                    alert("Please try again");
                },
                complete: function () {
                    $('.loadingAnim').fadeIn();
                }
            });
        });


        

        $('.detailFil').on('click','.morePage', function () {

            clicks++;

            var siurl = $(this).attr('siAjaxUrl');
            $.ajax({

                url: '{{ url("stories") }}/'+ siurl +'/?page=' + clicks,
                type: 'get',
                success: function (data) {
                    if (data.trim() == ''){
                        $('.morePage').remove();
                    }

                    $('#ajax-content').append(data);
                    $('#ajax-content').removeClass('loader');
                },
                error: function () {
                    alert("Please try again");
                },
                complete: function () {
                    $('.loadingAnim').fadeIn();
                }
            });
        });
    });

    function mobileViewUpdate() {
        var viewportWidth = $(window).width();
        if (viewportWidth > 860) {
            $('.heightMid').each(function (i) {
                var imageProfile = $(this);
                var sizeImageProfile = (imageProfile.height());
                $(this).find('.midleheight').css({
                    'height': sizeImageProfile + 'px'
                });
            });
            var imageProfile = $(".image-highlight");
            var sizeImageProfile = (imageProfile.height());
            $('.captionhighlight .midleheight').css({
                'height': sizeImageProfile + 'px'
            });
        }
    }

    $(window).load(mobileViewUpdate);
    $(window).resize(mobileViewUpdate);
    $(window).load(function () {
        $('.slideHighlight').fujifilm({
            animation: "fade",
            controlNav: false,
            animationLoop: true,
            slideshow: false,
            directionNav: true,
        });
        $('.slideXphotographer').fujifilm({
            animation: "slide",
            controlNav: true,
            animationLoop: true,
            slideshow: false,
            directionNav: false,
        });
    });
</script>
</body>
</html>
