@isset($data)
    <div class="{{$bgcolor}}">
        <div class="container @if ($bgcolor == 'bg-dark')text-white @endif">
            @foreach ($data as $item)

                <div id="Article{{$loop->index}}" class="border-top @if ($bgcolor == 'bg-dark') border-white @else border-dark @endif
                {{$loop->index < 5 ? 'active' : 'd-none'}}
                ">
                    <div class="row py-5">
                        <div class="col-md-2">
                            @if ($section == 'eventos')
                                <img src="{{ Storage::disk('uploads')->exists($item["img"]) ? asset('/uploads/'.$item["img"]) : asset('images/capita-logo.svg') }}" alt="{{$item["evento"]}}" class="img-fluid">
                            @else
                                <span class="fs-6 fw-100">{{  \Carbon\Carbon::parse($item["fecha"])->format('m/d/Y')}}</span>
                            @endif
                        </div>
                        <div class="col-md-5 d-grid">
                            @if($section == 'eventos')
                                <p class="fs-5 font-weight-bold mb-0">{!!$item["evento"]!!}</p>
                                <span class="fs-6 fw-100">{{  \Carbon\Carbon::parse($item["fecha"])->format('m/d/Y')}}</span>
                            @else
                                <p class="fs-5 font-weight-bold">{!!$item["titulo"]!!}</p>
                                <p class="fs-6 fw-300 align-self-end py-3">{!!$item["autor"]!!}</p>
                            @endif
                                
                        </div>
                        <div class="col-md-5 d-grid">
                            @if ($section == 'eventos')
                                <span class="fs-6 fw-100">{!!$item["ciudad"]!!}</span>
                            @else
                                <span class="fs-6 fw-100">{!!$item["descripcion"]!!}</span>
                            @endif
                            <div class="row py-3 align-self-end justify-content-center justify-content-md-start">
                                <div class="col-5 col-md-6">
                                    <a class="btn btn-block rounded-pill fs-6
                                    @if ($bgcolor == 'bg-dark')btn-outline-light 
                                    @else btn-outline-dark 
                                    @endif"
                                    @if ($section == 'stories')
                                        href="{{route('resources.downloadpdf', $item["titulo"])}}"
                                    @elseif($section == 'articles')
                                        href="{{route('resources.article',['id' => $item["id_articulo"], 'slug' => Str::slug($item["titulo"]) ]) }}"
                                    @elseif($section == 'blogs')
                                        href="{{route('resources.blog',['id' => $item["id_blog"], 'slug' => Str::slug($item["titulo"]) ]) }}"
                                    @elseif($section == 'eventos')
                                        href="//{{$item["url_registro"]}}"
                                    @endif>
                                    @if ($section == 'stories') Download
                                    @elseif ($section == 'eventos') Sign Up  
                                    @else Read more 
                                    @endif</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
            @if($section == 'articles')
                <div id="see_moreDiv" class="row d-flex justify-content-center">
                    <button id="showArticles" class="col-lg-3 col-md-8 btn btn-block rounded-pill fs-6 d-flex align-items-center justify-content-center @if ($bgcolor == 'bg-dark')btn-outline-light  @else btn-outline-dark @endif"                    
                    >See more <i class="fas fa-plus ml-2"></i></button>
                </div>          
            @endif
        </div>
    </div>

@endisset