@extends('frontpage.layout.default')

@section('content')

<div class="main" role="main">
    <div id="content" class="content full">
        
        <header class="page-header parallax parallax1" style="background-image:url(/gfx/header001a.jpg);">
            <section>
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                        </div>
                    </div>
                </div>
            </section>
        </header>


        <div class="container">
            <div class="row"> 
                <aside class="col-md-3 sidebar right-sidebar">
                    @include('frontpage.layout.sidebar')
                </aside>
                <div class="col-md-9">
                    
                    <h1>{{$table->headline}}</h1>
                    {!!$table->content!!}          


                    <div class="container margin-40">
                        <hr>
                    </div>

                        <div class="grid">
                            @foreach($gallery as $row)
                            <div class="col-md-4 grid-item">
                                <div class="portfolio-item">
                                    <div class="portfolio-image">
                                        <a title="{{$table->headline or null}}" 
                                           data-rel="prettyPhoto[galname]" 
                                           href="/files/galerija/novice/{{$nid}}/{{$id}}/{{$row->diskname}}">
                                            <img src="/files/galerija/novice/{{$nid}}/{{$id}}/thumb_{{$row->diskname}}" 
                                                 alt="ddd"> 
                                        </a>
                                    </div>
                                </div>
                                <br>
                            </div>
                            @endforeach
                        </div> <!-- end .masonry -->
                        <br><br>

                </div> <!-- end .col-md-9 -->
          </div> <!-- end .row -->
        </div> <!-- end .container -->
    </div> <!-- end .content -->
</div> <!-- end .main -->
@endsection

@section('custom_footer')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>

<script>
$(document).ready(function () {
    var $container = $(".grid");

    $container.imagesLoaded(function () {
        $container.masonry();
    });
});


</script>
@append