@section('intro')
<div id="loader">
</div>
@stop

@section('content')
    <div id="category-image">
        <div class="overflow">
            <div class="thumb">
            @foreach ($photos as $photo)<picture data-src1600="{{asset('images/1600/'.$photo->file)}}"
                        data-src1000="{{asset('images/1000/'.$photo->file)}}"
                        data-src800="{{asset('images/800/'.$photo->file)}}"
                        data-src600="{{asset('images/600/'.$photo->file)}}"
                        data-src500="{{asset('images/500/'.$photo->file)}}"
                        data-src300="{{asset('images/300/'.$photo->file)}}"
                        data-alt="{{$photo->title}}" data-position="{{$photo->order}}"></picture>@endforeach
            </div>
        </div>

        <div class="big-background"></div>

        <div class="big">
            <div class="arrow left"></div>
            <div class="slider">
                @for ($i = 0; $i < count($photos); $i++)<figure id="big_picture_{{$i}}" class="slide-item lazy-load" position="{{$i}}">
                    <picture class="picture-ld">{{--
                        <source srcset="{{asset('images/1600/'.$photo->file)}}" media="(-webkit-min-device-pixel-ratio: 2),(min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi)">
                        <source srcset="{{asset('images/600/'.$photo->file)}}" media="(max-width : 480px)">
                        <source srcset="{{asset('images/800/'.$photo->file)}}">
                        <img srcset="{{asset('images/300/'.$photo->file)}}" alt="{{$photo->title}}">--}}
                    </picture>
                    {{--<div class="over"><div class="close"><a href=""></a></div><div class="download-text">download the photo in low res.</div><div class="download"><a href="{{asset('images/1600/'.$photo->file)}}" target="_blank" download></a></div></div><figcaption>{{$photo->title}}</figcaption></figure>--}}
                </figure>@endfor
            </div>
            <div class="arrow right"></div>
        </div>
    </div>

@stop