@extends('layouts.master')

@section('styles')

@endsection

@section('content')

    <div class="page-header">
        <h1 class="page-title">Graphs</h1>
    </div>

    <!-- GALLERY DEMO OPEN -->
    <div class="demo-gallery card">
        <div class="card-header">
            <div class="card-title">{{$description}}</div>
        </div>
        <div class="card-body">
            <ul id="lightgallery" class="list-unstyled row">
                @foreach ($svgFiles as $svgFile)
                    <li class="col-xs-6 col-sm-4 col-md-4 col-xl-3 mb-5 border-bottom-0"
                        data-responsive="{{$svgFile['path']}}"
                        data-src="{{$svgFile['path']}}"
                        data-sub-html="<h4>{{$svgFile['name']}}</h4><p></p>">
                        <a href="">
                            <img class="img-responsive br-5" src="{{$svgFile['path']}}" alt="Thumb-1">
                            {{$svgFile['name']}}
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>

@endsection

@section('scripts')

    <!-- GALLERY JS -->
    <script src="{{asset('build/assets/plugins/gallery/picturefill.js')}}"></script>
    <script src="{{asset('build/assets/plugins/gallery/lightgallery.js')}}"></script>
    <script src="{{asset('build/assets/plugins/gallery/lightgallery-1.js')}}"></script>
    <script src="{{asset('build/assets/plugins/gallery/lg-pager.js')}}"></script>
    <script src="{{asset('build/assets/plugins/gallery/lg-autoplay.js')}}"></script>
    <script src="{{asset('build/assets/plugins/gallery/lg-fullscreen.js')}}"></script>
    <script src="{{asset('build/assets/plugins/gallery/lg-zoom.js')}}"></script>
    <script src="{{asset('build/assets/plugins/gallery/lg-hash.js')}}"></script>
    <script src="{{asset('build/assets/plugins/gallery/lg-share.js')}}"></script>

@endsection