@extends('layouts.app')

@section('title', 'Gallery | Your Website')

@section('content')
	@include('layouts._breadcrumb',['pageName'=>['Photos']])
		<div class="wrap-width">
			<div class="widget widget-gallery-main">
			   <div class="widget widget-category-dropdown mb-2">
			        <label for="gallery-sport" class="form-select-label">Sport</label>
			        <div class="form-select">
			            <select name="" id="gallery-sport">
			                <option value="">All</option>
			                <option value="">Football</option>
			                <option value="">Tennis</option>
			                <option value="">Basketball</option>
			            </select>
			        </div>
			    </div>
			    <!-- carousel -->

			    <header class="gallery-title clearfix">
			        <h1 class="title heading-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</h1>
			        <em class="time">23 November 2018 | 18:18</em>

			        <div class="gallery-counter">
			            <span class="current">1</span>
			            <span class="divider">/</span>
			            <span class="total">10</span>
			            <i class="icon icon-photo"></i>
			        </div>
			    </header>
			    <div class="carousel-gallery-main">
			        <div class="content">
			            <div class="entry">
			                <img src="../resources/image/temp/gallery-1.jpg" alt="" class="photo">
			            </div>
			        </div> <!-- content -->

			        <nav class="arrows">
			            <a href="" title="" class="prev"></a>
			            <a href="" title="" class="next"></a>
			        </nav>
			    </div>
			    <div class="widget widget-news-article-share">
			        <strong class="share-count">1.4k</strong>
			        <span class="share-divider"></span>
			        <ul class="share-media">
			            <li class="share-media-item">
			                <a href="" title="" target="_blank" class="share-media-like"></a>
			            </li>
			            <li class="share-media-item">
			                <a href="" title="" target="_blank" class="share-media-facebook"></a>
			            </li>
			            <li class="share-media-item">
			                <a href="" title="" target="_blank" class="share-media-twitter"></a>
			            </li>
			            <li class="share-media-item">
			                <a href="" title="" target="_blank" class="share-media-whatsapp"></a>
			            </li>
			            <li class="share-media-item">
			                <a href="" title="" target="_blank" class="share-media-google"></a>
			            </li>
			            <li class="share-media-item">
			                <a href="" title="" target="_blank" class="share-media-mail"></a>
			            </li>
			        </ul>
			        
			        <span class="gallery-author">© Image Bank | Photographer</span>
			    </div>
			    <div class="gallery-item-text">
			        Text about selected picture. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
			    </div>

			   <div class="carousel-gallery-thumbs">
				    <div class="wrap">
				        <div class="content">
				            <a href="" class="entry">
				                <img src="../resources/image/temp/gallery-thumb-1.jpg" alt="">
				            </a>
				            <a href="" class="entry">
				                <img src="../resources/image/temp/gallery-thumb-2.jpg" alt="">
				            </a>
				            <a href="" class="entry">
				                <img src="../resources/image/temp/gallery-thumb-3.jpg" alt="">
				            </a>
				            <a href="" class="entry">
				                <img src="../resources/image/temp/gallery-thumb-4.jpg" alt="">
				            </a>
				            <a href="" class="entry">
				                <img src="../resources/image/temp/gallery-thumb-1.jpg" alt="">
				            </a>
				            <a href="" class="entry">
				                <img src="../resources/image/temp/gallery-thumb-2.jpg" alt="">
				            </a>
				            <a href="" class="entry">
				                <img src="../resources/image/temp/gallery-thumb-3.jpg" alt="">
				            </a>
				            <a href="" class="entry">
				                <img src="../resources/image/temp/gallery-thumb-4.jpg" alt="">
				            </a>
				            <a href="" class="entry">
				                <img src="../resources/image/temp/gallery-thumb-1.jpg" alt="">
				            </a>
				            <a href="" class="entry">
				                <img src="../resources/image/temp/gallery-thumb-2.jpg" alt="">
				            </a>
				        </div>
				        <nav class="arrows">
				            <a href="" title="" class="prev"></a>
				            <a href="" title="" class="next"></a>
				        </nav>
				    </div>

				    <a href="" title="" class="widget widget-view-more-load">
				        <i class="icon icon-more-down"></i>
				        <p class="label">View More</p>
				    </a>
				</div>
			</div>
			<div class="grid">
				{{-- More photos --}}
				@include('gallery._more-photos',['photos'=>['10','11','12','13','14','15','16']])

				@include('layouts.sidebars._gallery-side-bar')
			</div>
		</div>
@endsection