@extends('front.layouts.app')
@section('title','Notre Clergé')

@section('content')
    <!--== Start Page Title Area ==-->
    <x-title image="assets/img/sector.jpg" page="Notre Clergé"/>
    <!--== End Page Title Area ==-->

    <div class="popular-causes-area default-padding bottom-less">
        <div class="container">
            <div class="row">
                <div class="site-heading text-center">
                    <div class="col-md-8 col-md-offset-2">
                        <h2>Clergé du Diocèse de Grand-Bassam</h2>
                        <p>
                            Le clergé du Diocèse est composé d'une équipe presbiterales, d'institutions dynamique. Retrouvez ci-dessous les listes des membres qui la constitue
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="popular-causes-items">
                    @foreach($clergies as $clergy)
                    <div class="col-md-6 col-sm-6 equal-height" style="height: 775px;">
                        <div class="item">
                            <div class="thumb">
                                <img src="{{$clergy->getFirstMediaUrl('clergy-img')}}" alt="Thumb">
                            </div>
                            <div class="info" style="background-color: #b40f15">
                                <h4 class="text-center" style="color: #ffffff">{{$clergy->name}}</h4>
                                <div class="progress-box">
                                    <div class="progress" style="opacity: 1; left: 0px;">
                                        <div class="progress-bar" role="progressbar" data-width="0" style="width: 22%;"></div>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <a class="btn btn-theme2 effect btn-sm" href="{{$clergy->getFirstMediaUrl('clergy-file')}}" target="_blank">Plus details</a>
                                </div>

                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>



@endsection