@extends('frontEnd.layout-ex')

@section('content')

    <section class="pager-section overlay">
        <div class="container">
            <div class="main-banner-content p-relative">
                <div class="social-links">
                    <ul>
                        <li><a href="https://www.facebook.com/theblackstoryproject" title=""><i class="fab fa-facebook-f"></i></a></li>
                        <li><a href="https://www.instagram.com/theblackstoryproject/" title=""><i class="fab fa-instagram"></i></a></li>
                    </ul>
                </div><!--social-links end-->
                <div class="pager-content">
                    <ul class="breadcrumb-list">
                        <li><a href="#" title="">Home</a></li>
                        <li><span>Resources</span></li>
                    </ul><!--breadcrumb end-->
                    <h2 class="page-title">Resources</h2><br>
                    <small>Proceeds from the Black Story project will go towards BIPOC-CA <br>(Black & Indigenous People of Colour Creative Association) <a href="https://www.bipoc-ca.org/" target="_blank" class="bipoc">https://www.bipoc-ca.org/</a> </small>

                </div><!--pager-content end-->
            </div><!--main-banner-content end-->
        </div>
    </section><!--pager-section end-->


    <section class="block">
        <div class="container">
            @if($media_count>0)
            <div class="posts">
                <div class="row">
                    @foreach($media_list as $media)
                    <div class="col-lg-4 col-md-6 col-sm-6">
                        <div class="post">
                            <div class="post-thumbnail">
                                <img src="@if($media->photo_file){{asset('uploads/topics/').'/'.$media->photo_file}}@else{{'https://via.placeholder.com/444x344'}} @endif" alt="" class="w-100">
                            </div>
                            <div class="post-info">
                                <h4><a href="{{url($media->webmasterSection->name.'/details/'.$media->id)}}" title="">{{$media->title_en}}</a></h4>
                                <p>
                                    @php
                                    $string = strip_tags($media->details_en);
                                    if (strlen($media->details_en) > 230) {
                                        // truncate string
                                        $stringCut = substr($string, 0, 230);
                                        $endPoint = strrpos($stringCut, ' ');
                                        //if the string doesn't contain any space then it will cut without word basis.
                                        $string = $endPoint? substr($stringCut, 0, $endPoint) : substr($stringCut, 0);
                                    }
                                    @endphp
                                        {!! $string !!}
                                    </p>
                                <a href="{{url($media->webmasterSection->name.'/details/'.$media->id)}}" title="" class="btn-default">See more</a>
                            </div>
                        </div><!--post end-->
                    </div>
                    @endforeach

                </div>
            </div><!--posts end-->
            @include('frontEnd.includes.paginator', ['paginator' => $media_list, 'link_limit' => 4])
            @else
                <div class="about-section">
                    <div class="row align-items-center">
                        <div class="col-lg-2"></div>

                        <div class="col-lg-8">
                            <div class="about-text style2">
                                <h2 class="resource-title">
                                    Please visit us throughout the month for unique content, as resources will be posted over the course of the next several weeks.                                </h2>
                            </div><!--about-text end-->
                        </div>
                        <div class="col-lg-2"></div>

                    </div>

                </div><!--about-section end-->

            @endif
        </div>
    </section>


@endsection