@extends('layouts.default')

@section('title', 'Galerie')

@section('content')
    <div class="breadcumb-wrapper " data-bg-src="{{ asset('/img/breadcumb.jpg') }}" data-overlay="black"
         data-opacity="8">
        <div class="container">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">Galerie</h1>
            </div>
        </div>
    </div>

    <section class="space">
        <div class="container">
            <div class="text-center">
                <div class="portfolio-filter-btn filter-menu filter-menu-active mb-30">
                    <button data-filter="*" class="tab-btn active" style="border-radius: 50px" type="button">Tout</button>
                    @foreach($categories as $category)
                        <button data-filter=".{{ $category->slug }}" class="tab-btn" style="border-radius: 50px" type="button">{{ $category->name }}
                        </button>
                    @endforeach
                </div>
            </div>
            <div class="row gy-4 filter-active">
                @foreach($gallery as $g)
                    <div class="col-md-6 col-lg-4 {{ $g->category->slug }} filter-item">
                        <div class="project-card style-2">
                            <div class="project-img">
                                <img src="{{ asset('/s/' . $g->path) }}" alt="{{ $g->title }} - JLP Sécurité" style="border-radius: 50px">
                            </div>
                            <div class="project-content">
                                <a href="{{ asset('/s/' . $g->path) }}" class="icon-btn popup-image"
                                   tabindex="-1"><i
                                        class="fa-light fa-arrow-up-right"></i></a>
                                <h4 class="project-title">
                                    <a href="#">{{ $g->title }}</a>
                                </h4>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>
    </section>
@endsection