@extends('front.layouts.app')
@section('title','Nos Institutions')

@section('content')
    <!--== Start Page Title Area ==-->
    <x-title image="assets/img/banner/etab.jpg" page="Nos Institutions"/>
    <!--== End Page Title Area ==-->

    <!-- Start Popular Causes
    ============================================= -->
    <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>Listes des institutions du diocèse</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="popular-causes-items">
                    @foreach($institutions as $institution)
                    <div class="col-md-4 col-sm-6 equal-height">
                        <div class="item">
                            <div class="thumb">
                                <img src="{{$institution->getFirstMediaUrl('institution')}}" alt="Thumb">
                            </div>
                            <div class="info">
                                <a class="btn btn-theme btn-block effect btn-sm" href="{{route('institutions.show',$institution->id)}}">{{$institution['name']}} ({{$institution->institutes->count()}})</a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    <!-- End Popular Causes -->

@endsection