@extends('frontend.slices.main')
@section('content')
<div class="section banner-page about">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="title-page" style="background-color: #083472; padding: 5px 5px 5px 5px; border-radius: 5px;">Gallery</div>
            </div>
        </div>
    </div>
</div>
<div class="section why overlap">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-12">
                <nav class="categories">
					<ul class="portfolio_filter dark">
                        <li><a href="" class="active" data-filter="*">all</a></li>
                        @foreach ($albums as $album )
                        <li><a href="" data-filter=".{{ str_replace(' ', '', $album->category ) ?? ''}}">{{ $album->category ?? '' }}</a></li>
                        @endforeach
                    </ul>
                </nav>
            </div>
        </div>
        <div class="row grid-services">
            @foreach ($galleries as $gallery )
            <div class="col-sm-6 col-md-4 {{ str_replace(' ', '', $gallery->category ) ?? ''}}">
                <div class="box-image-4">
                    <a href="{{ $gallery->image ?? '' }}" title="{{ $gallery->name ?? '' }}">
                        <div class="media">
                            <img src="{{ url($gallery->image ?? '') }}" alt="" class="img-responsive">
                        </div>
                        <div class="body">
                            <div class="content">
                                <h4 class="title">{{ $gallery->name ?? '' }}</h4>
                                <span class="category">{{ $gallery->category ?? '' }}</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endsection