@extends('website.layouts.app')

@section('content')

    <!-- Hero and nav -->
    <div class="hero is-cover is-relative is-fullheight is-default is-bold">
    
        <!-- Hero Wallop Slider -->
        <div class="Wallop Wallop--v2 Wallop--fade page_header">
            <div class="Wallop-list">
                <div class="has-background-image" @if($page->cover) data-background="{{ asset('storage/'.$page->cover) }}" @endif>
                    <div class="Wallop-overlay"></div>
                    <div class="Wallop-caption-wrapper">
                        <div class="container">
                            <div class="columns is-gapless is-vcentered" style="width: 100%">
                                <div class="column is-12">
                                    <div class="caption-inner has-text-centered">
                                        <h1>{{ $page->name }}</h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="section">
        <div class="container pt-50 pb-50">
            @foreach($sections as $section)
                <div class="page_section mb-20">
                    {!! $section->description !!}
                </div>
            @endforeach

            @if(count($products) > 0)
                <div class="products-list">
                    @foreach($products as $product)
                        <div class="columns is-vcentered is-multiline has-text-centered product">
                            <div class="column is-6 pl-20 pr-20">
                                <a href="{{ route('product_details', ['product' => $product->id]) }}">
                                    <div class="image-wrapper">
                                        <img src="{{ asset('storage/'.$product->image) }}"
                                        data-demo-src="{{ asset('storage/'.$product->image) }}"/>
                                    </div>
                                </a>
                            </div>
                            <div class="column is-6 pl-20 pr-20 mb-0">
                                <div>
                                    <div class="title">
                                        <a href="{{ route('product_details', ['product' => $product->id]) }}">
                                            {{ $product->name }}
                                        </a>
                                    </div>
                                    <div class="desc mb-30">{{ $product->description }}</div>
                                    <div class="has-text-centered">
                                        <a href="{{ route('product_details', ['product' => $product->id]) }}" class="button button-cta primary-btn rounded slide_link">
                                            More Details
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>

@endsection