@extends($user_shop ?'web.user.layouts.layout' : 'web.layouts.layout')


@section('content')

    <section class="page-header page-header-xlg parallax parallax-3 hidden-xs"
             style="background-image:url('/assets/images/vision-min.jpg')">
        <div class="overlay dark-1"><!-- dark overlay [1 to 9 opacity] --></div>

        <div class="container">
        </div>
    </section>
    <!-- /PAGE HEADER -->

    <style>
        div.shop-item {
            margin-bottom: 30px;
            border: 1px solid #ddd;
        }

        div.shop-item > .thumbnail, .thumbnail {
            border: none;
        }

        div.shop-item-summary {
            padding: 8px;
        }

        div.shop-item-summary h2 a {
            color: #9aa983;
            font-size: 1.2em;
            margin: 0 0 10px 0;
        }

        div.shop-item-buttons {
            padding: 0 8px 10px 8px;
        }

        div.shop-item-buttons .btn-xs {
            padding: 4px;
        }
    </style>
    <!-- -->
    <section>
        <div class="container">

            <div class="row">

                <div class="col-md-3 col-sm-3">
                    @include('web.templates._categories')
                </div>

                <div class="col-md-9 col-sm-9">
                    <h1>{{$headline}}  @if($headline_image) <img src="{{ route('iq_image', [$headline_image->slug]) }}" class="img-responsive" alt=""/> @endif</h1>
                    <ul class="shop-item-list row list-inline nomargin">
                    @foreach($products as $product)
                        <!-- ITEM -->
                            <li class="col-lg-4 col-sm-4">
                                @include('web.templates.produkte-item')
                            </li>
                            <!-- /ITEM -->
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <!-- / -->
@endsection