@extends('front.layouts.app')
@section('title','Gouvernement du Diocèse')

@section('content')
    <!--== Start Page Title Area ==-->
    <x-title image="assets/img/sector.jpg" page="Gouvernement du Diocèse"/>
    <!--== End Page Title Area ==-->

    <!-- Start Portfolio
 ============================================= -->
    <div class="portfolio-area bg-gray default-padding">
        <div class="container">
{{--            <div class="row">--}}
{{--                <div class="site-heading text-center">--}}
{{--                    <div class="col-md-8 col-md-offset-2">--}}
{{--                        <h2>Notre Equipe</h2>--}}
{{--                        <p></p>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
            <div class="portfolio-items-area inner-title text-center">
                <div class="row">
                    <div class="col-md-12 portfolio-content">
                        <div class="mix-item-menu active-theme text-center">
                            <button class="active" data-filter="*">Découvrez toute notre équipe Diocesaine</button>
                        </div>
                        <!-- End Mixitup Nav-->

                        <div class="row magnific-mix-gallery masonary">
                            <div id="portfolio-grid" class="portfolio-items col-3">
                                @foreach($governments as $government)
                                <div class="pf-item branding {{$government->name}}">
                                    <div class="item-inner">
                                        <img src="{{$government->getFirstMediaUrl('gouv-img')}}" alt="Thumb"/>
                                        <div class="overlay">
                                            <div class="view-list">
                                                <h4>{{$government->name}}</h4>
                                                <a href="{{$government->getFirstMediaUrl('gouv-file')}}" target="_blank"><i class="fa fa-download"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Portfolio -->

@endsection