@extends('front.layouts.app')
@section('content')

<div class="campus-view on-demand-sec">
    <!--// START LEFT VIEW //-->
    <div class="campus-view-left">
        <div class="row header-row">
            <div class="col-xxl-12 col-xl-12 col-lg-4 mb-xxl-0">
                <h3 class="view-title">On-Demand Library</h3>
            </div>
        </div>
        <!-- End Title Row -->
        @if($ministries->count() > 0)
        <!-- Start On Demand Library Sec -->
        <div class="row on-demand-cards-row">
            @foreach($ministries as $ministry)
            <div class="col-xxl-3 col-xl-3 col-lg-4 col-sm-6 mb-3">
                <div class="odl-card readMoreContent">
                    <a href="{!! $ministry->page_url !!}" class="odl-card-img">
                        <img src="{!! $ministry->avatar_url !!}" class="img-fluid" alt="{!! $ministry->image_alt !!}" />
                    </a>
                    <a href="{!! $ministry->page_url !!}"><h4>{!! $ministry->name !!}</h4></a>
                    <p>{!! displayShortDescriptionInCmsBox($ministry->description,200) !!}</p>
                    <div class="modal fade historyParaModal" id="details_{!! $ministry->id !!}" tabindex="-1" aria-labelledby="historyModal" aria-hidden="true">
                        <div class="modal-dialog modal-lg modal-dialog modal-dialog-centered modal-dialog-scrollable">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">{!! $ministry->name !!}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <p>{!! $ministry->description !!}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @endforeach
        </div>
        <!-- End On Demand Library Sec -->
        @endif
    </div>
    <!--// END LEFT VIEW //-->
</div>
@endsection