@extends('layouts.front.app')

@section('og')
<meta property="og:title" content="{{ config('app.name') }}-{{ $title }}" />
<meta property="og:description" content="{{ config('app.description') }}-{{ $title }}" />
@endsection
@section('css')
<style type="text/css">
	html,
	body {
		height: 40vh;
	}
	
	/*.carousel
	height: 400px;
}*/

@media (max-width: 740px) {
	
	html,
	body,
	.carousel {
		height: 100vh;
	}
}

@media (min-width: 800px) and (max-width: 850px) {
	
	html,
	body,
	header,
	.carousel {
		height: 100vh;
	}
}
</style>
<link href="https://fonts.googleapis.com/css?family=Changa" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=ABeeZee" rel="stylesheet">
@endsection

@section('content')
<section class="container-fluid w-100">
	<div class="col-lg px-0">
		<div class="view banner-4" style="background-image: url('storage/images/strobeletro/banner-3.jpg')">
			<div class="mask d-flex rgba-black-strong justify-content-center align-items-center">
				<div class="container">
					<div class="text-center white-text">
						<h1 class="py-3 font-h1">
							<strong>Strob<span class="red-strob-text font-weight-bold">eletro</span></strong>
						</h1>
						<h2>Resultado da busca por: {{ request()->input('search')}}</h2>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<section>
	<div class="container">
		<nav>
			<ol class="breadcrumb transparent mt-3">
				<li class="breadcrumb-item font-weight-bold"><a href="{{ route('home') }}" class="black-text"><i class="fas fa-home"></i> Home</a></li>
				<li class="breadcrumb-item active font-weight-bold black-text">Busca</li>
			</ol>
		</nav>
	</div>
</section>
@if ($products)
@include(config('site.domain').'.front.products.product-list-search', $products)
@else
<p class="alert alert-danger">Não temos produtos para esta busca</p>
@endif
@endsection