@extends('web.themes.shella.layouts.app', [
    'page_name' => 'gallery'
])

@section('content')
<main id="MainContent">

    <div class="breadcrumbs mt-15">
        <div class="container">
            <ul class="list-unstyled d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
                <li><a href="index.html">Home</a></li>
                <li><span>Gallery</span></li>
            </ul>
        </div>
    </div>
    <div id="theme-section-gallery" class="theme-section">
        <div data-section-id="gallery" data-section-type="gallery" data-boxed-without-paddings="true">
            <div class="gallery align-items-start pb-60 mt-30 mb-60 overflow-hidden">
                <div class="gallery__content row">
                    
                    @foreach($galleries as $gallery)
                        <div class="col-sm-4 px-5 mb-10">
                            <div class="gallery__item position-relative cursor-pointer" data-index="{{ $loop->first }}">

                                <div class="rimage" style="padding-top:72.99180327868854%;">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
                                        class="rimage__img rimage__img--fade-in lazyload"
                                        data-master="{{ $gallery->thumbnail() }}"
                                        data-aspect-ratio="1.3700168444693992"

                                        data-srcset="{{ $gallery->thumbnail() }} 1x, {{ $gallery->thumbnail() }} 2x"

                                        alt="">
                                </div>
                                <div class="gallery__item-layer absolute-stretch d-flex flex-center">
                                    <div class="gallery__item-bg absolute-stretch"></div>
                                    <div class="gallery__item-text position-relative text-center">
                                        <h3 class="h6 mb-0 font-italic">{{ $gallery->title }}</h3>
                                        <h4 class="mb-0 mt-15">{{ $gallery->description }}</h4></div>
                                </div>
                            </div>
                        </div>    
                    @endforeach
                    
                </div>
                <div class="gallery__fotorama fotorama d-flex justify-content-center invisible position-absolute"
                     data-nav="thumbs" data-thumbheight="100" data-thumbwidth="137" data-allowfullscreen="true"
                     data-keyboard="true">
                    <div class="d-flex flex-column flex-center h-100"
                         data-thumb="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/05_71b806d5-702b-4498-ae48-14c229dcaaa9_medium.progressive.png.jpg?v=1538751038">
                        <div class="gallery__item-text w-100 pb-35 text-center"><h3 class="h6 mb-0 font-italic">
                            FASHION</h3><h4 class="mb-0 mt-10">Lorem ipsum dolor sit amet</h4></div>
                        <img src="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/05_71b806d5-702b-4498-ae48-14c229dcaaa9_1000x.progressive.png.jpg?v=1538751038" alt="title">
                    </div>
                    <div class="d-flex flex-column flex-center h-100"
                         data-thumb="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/15_b04f22c2-f16c-4ac3-aec6-f48d86fb3efa_medium.progressive.png.jpg?v=1538751353">
                        <div class="gallery__item-text w-100 pb-35 text-center"><h3 class="h6 mb-0 font-italic">TEXT
                            LINE #1</h3><h4 class="mb-0 mt-10">Text line #2</h4></div>
                        <img src="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/15_b04f22c2-f16c-4ac3-aec6-f48d86fb3efa_1000x.progressive.png.jpg?v=1538751353" alt="title">
                    </div>
                    <div class="d-flex flex-column flex-center h-100"
                         data-thumb="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/11_0ab758d9-cc13-462a-a3fe-37ef80a6f112_medium.progressive.png.jpg?v=1538751264">
                        <div class="gallery__item-text w-100 pb-35 text-center"><h3 class="h6 mb-0 font-italic">
                            VINTAGE</h3><h4 class="mb-0 mt-10">Lorem ipsum dolor sit amet</h4></div>
                        <img src="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/11_0ab758d9-cc13-462a-a3fe-37ef80a6f112_1000x.progressive.png.jpg?v=1538751264" alt="title">
                    </div>
                    <div class="d-flex flex-column flex-center h-100"
                         data-thumb="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/06_f14921e9-cd6e-4c9b-a320-08bb8e4d0ecd_medium.progressive.png.jpg?v=1538753564">
                        <div class="gallery__item-text w-100 pb-35 text-center"><h3 class="h6 mb-0 font-italic">
                            SUMMER</h3><h4 class="mb-0 mt-10">Lorem ipsum dolor sit amet</h4></div>
                        <img src="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/06_f14921e9-cd6e-4c9b-a320-08bb8e4d0ecd_1000x.progressive.png.jpg?v=1538753564" alt="title">
                    </div>
                    <div class="d-flex flex-column flex-center h-100"
                         data-thumb="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/07_7c8cdcee-f0b4-4bd6-8f99-0e1b55d144da_medium.progressive.png.jpg?v=1538751488">
                        <div class="gallery__item-text w-100 pb-35 text-center"><h3 class="h6 mb-0 font-italic">
                            BEACHWEAR</h3><h4 class="mb-0 mt-10">Lorem ipsum dolor sit amet</h4></div>
                        <img src="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/07_7c8cdcee-f0b4-4bd6-8f99-0e1b55d144da_1000x.progressive.png.jpg?v=1538751488" alt="title">
                    </div>
                    <div class="d-flex flex-column flex-center h-100"
                         data-thumb="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/09_4efe625d-9d5b-4f1e-a111-53c058b6204c_medium.progressive.png.jpg?v=1538751443">
                        <div class="gallery__item-text w-100 pb-35 text-center"><h3 class="h6 mb-0 font-italic">
                            SUNGLASSES</h3><h4 class="mb-0 mt-10">Lorem ipsum dolor sit amet</h4></div>
                        <img src="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/09_4efe625d-9d5b-4f1e-a111-53c058b6204c_1000x.progressive.png.jpg?v=1538751443" alt="title">
                    </div>
                    <div class="d-flex flex-column flex-center h-100"
                         data-thumb="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/13_e1e31bd8-2cef-4bd4-84c1-5330cd63ee87_medium.progressive.png.jpg?v=1538753297">
                        <div class="gallery__item-text w-100 pb-35 text-center"><h3 class="h6 mb-0 font-italic">
                            WINTER</h3><h4 class="mb-0 mt-10">Lorem ipsum dolor sit amet</h4></div>
                        <img src="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/13_e1e31bd8-2cef-4bd4-84c1-5330cd63ee87_1000x.progressive.png.jpg?v=1538753297" alt="title">
                    </div>
                    <div class="d-flex flex-column flex-center h-100"
                         data-thumb="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/12_3c61e7a4-f168-488d-b90d-377a1dc0923d_medium.progressive.png.jpg?v=1538754416">
                        <div class="gallery__item-text w-100 pb-35 text-center"><h3 class="h6 mb-0 font-italic">
                            SHORTS</h3><h4 class="mb-0 mt-10">Lorem ipsum dolor sit amet</h4></div>
                        <img src="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/12_3c61e7a4-f168-488d-b90d-377a1dc0923d_1000x.progressive.png.jpg?v=1538754416" alt="title">
                    </div>
                    <div class="d-flex flex-column flex-center h-100"
                         data-thumb="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/14_755cc23d-f510-418d-9b91-1b7cf1efa4c0_medium.progressive.png.jpg?v=1538753159">
                        <div class="gallery__item-text w-100 pb-35 text-center"><h3 class="h6 mb-0 font-italic">
                            ACCESSORIES</h3><h4 class="mb-0 mt-10">Lorem ipsum dolor sit amet</h4></div>
                        <img src="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/14_755cc23d-f510-418d-9b91-1b7cf1efa4c0_1000x.progressive.png.jpg?v=1538753159" alt="title">
                    </div>
                    <div class="d-flex flex-column flex-center h-100"
                         data-thumb="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/10_f4996b15-ddc0-4056-8c8a-95fc0abebd66_medium.progressive.png.jpg?v=1538754441">
                        <div class="gallery__item-text w-100 pb-35 text-center"><h3 class="h6 mb-0 font-italic">
                            DENIM</h3><h4 class="mb-0 mt-10">Lorem ipsum dolor sit amet</h4></div>
                        <img src="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/10_f4996b15-ddc0-4056-8c8a-95fc0abebd66_1000x.progressive.png.jpg?v=1538754441" alt="title">
                    </div>
                    <div class="d-flex flex-column flex-center h-100"
                         data-thumb="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/08_e990066b-a215-4aed-b16e-5daf52477927_medium.progressive.png.jpg?v=1538754454">
                        <div class="gallery__item-text w-100 pb-35 text-center"><h3 class="h6 mb-0 font-italic">
                            SUNGLASSES</h3><h4 class="mb-0 mt-10">Lorem ipsum dolor sit amet</h4></div>
                        <img src="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/08_e990066b-a215-4aed-b16e-5daf52477927_1000x.progressive.png.jpg?v=1538754454" alt="title">
                    </div>
                    <div class="d-flex flex-column flex-center h-100"
                         data-thumb="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/04_d25a2e69-0024-416a-b984-61617949c8e8_medium.progressive.png.jpg?v=1538754468">
                        <div class="gallery__item-text w-100 pb-35 text-center"><h3 class="h6 mb-0 font-italic">
                            LOUNGEWEAR</h3><h4 class="mb-0 mt-10">Lorem ipsum dolor sit amet</h4></div>
                        <img src="https://cdn.shopify.com/s/files/1/0026/2910/7764/files/04_d25a2e69-0024-416a-b984-61617949c8e8_1000x.progressive.png.jpg?v=1538754468" alt="title">
                    </div>
                </div>
            </div>
        </div>

        <script>

            Loader.require({
                type: "style",
                name: "plugin_fotorama"
            });
            Loader.require({
                type: "script",
                name: "plugin_fotorama"
            });
            Loader.require({
                type: "script",
                name: "gallery"
            });
        </script>

    </div>
</main>
@stop