@extends('front.layouts.app')
@section('title','Détails secteur')

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

    <div class="event-area default-padding">
        <div class="container">
            <div class="row">
                <div class="site-heading text-center">
                    <div class="col-md-8 col-md-offset-2">
                        <h2>Liste des départements du diocèse </h2>
                        <p style="font-size: 16px; font-weight: bold" >
                            Le Diocèse compte <strong style="color: #b40f15">{{$members->count()}}</strong> départements
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="event-items event-list-full inner-cell">
                    @foreach($members as $member)
                    <div class="col-md-12 single-item">
                        <div class="item">
                            <div class="thumb col-md-2 bg-cover" style="background-image: url({{asset($member->getFirstMediaUrl('departments'))}});"></div>
                            <div class="info col-md-12">
                                <h2 class="text-uppercase">{{$member->name}}</h2>
                                <div class="meta">
                                    <ul>
                                        <li>
                                        </li>
                                        <li>
                                        </li>
                                    </ul>
                                </div>
                                <p>{{$member->description}}</p>
                                <p class="btn btn-theme effect btn-sm btn-block">Responsable : {{$member->leader}} <br> {{$member->office}} </p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection