@extends('master')

@section('head')
    <title>Camper huren? Camperverhuur aan particulieren | {{config('app.name')}}</title>
    <meta name="description" content="Wil je een camper huren? GoSharing is het platform die camper huurders en verhuurders samen brengt!  ✓ Eenvoudig ✓ Veilig ✓ Betrouwbaar | Bekijk ons aanbod">
@endsection

@section('content')
    <section id="overview" class="article">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb">
                        <a href="/">Home</a>
                        <div class="active">Inspiratie</div>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-12 col-sm-3 order-2 order-sm-1">
                    <div class="sidebar">
	                    <div class="box">
		                    <h3 class="box-title">Huur een camper <i class="fal fa-key fa-lg"></i></h3>
		                    <div class="box-content">
		                        <ul class="rent">
		                            <li>Een zeer uitgebreide verhuurvloot</li>
		                            <li>Caravan en campers voor elk type kampeerder</li>
		                            <li>Altijd de nieuwste modellen, elk jaar opnieuw</li>
		                            <li>Zeer complete accessoire- en inventarispakketten</li>
		                        </ul>
		                        <div class="d-flex justify-content-center mt-4">
		                            <a href="/huren" class="btn btn-orange btn-icon"><i class="fas fa-key"></i>Aanmelden</a>
		                        </div>
		                    </div>
		                </div>
                    </div>
                </div>
                <div class="col-12 col-sm-9 order-1 order-sm-2">
                	<section id="camper-overzicht" class="py-5">
						<div class="container">
                            <div class="row">
                                <div class="col-12">
                                    <h1 class="mb-4">Inspiratie</h1>
                                    <hr class="mb-4" />
                                </div>
                            </div>
                            
				            <div class="row">
				            	@foreach($blogs as $blog)
				                <div class="col-xl-4 col-md-6 col-sm-6">
				                    <div class="camper-box">
									    <div class="camper-image">
									        @if($blog->getFirstMediaUrl('header_image', 'thumb'))
		                                    <a href="{{ url($blog->slug) }}">
									            <img src="{{ $blog->getFirstMediaUrl('header_image', 'thumb') }}" alt="{{ $blog->title }}" class="img-fluid">
									        </a>
		                                    @endif
									    </div>
									    <div class="camper-content bg-white">
									        <a href="{{ url($blog->slug) }}" class="description font-lighter">{{ $blog->title }}</a>
									    </div>
									</div>
				                </div>
								@endforeach
			                </div>
			                
				            <div class="row">
				                <div class="col-12 mt-4">
				                   {{$blogs->links()}}
				                </div>
				            </div>
				        </div>
				    </section>
				</div>
            </div>
        </div>
    </section>
@endsection