@extends('front.app')
@section('content')
    <section class="wrapper">
        <div class="container pt-6 pb-14 pb-md-0">
            <h1 class="display-5 mx-md-n5 mx-lg-0 mb-3 text-center">
                {{ @$page->title }}
            </h1>
            @if($page->articles && $page->articles->isNotEmpty())
            <div class="row mt-17">
                <div class="col-lg-12">
                    <div class="blog grid grid-view">
                        <div class="row isotope gx-md-8 gy-8 mb-8">
                            @foreach($page->articles as $article)
                                <article class="item post col-md-4">
                                    <div class="card shadow-lg">
                                        <figure class="card-img-top overlay overlay-1">
                                            @if($article->files->isNotEmpty())
                                                @foreach($article->files as $file)
                                                    <img style="height: 300px !important;object-fit: contain;" src="{{ asset('storage/uploads/articles/' . $file->name) }}" alt=""/>
                                                @endforeach
                                            @endif
                                        </figure>
                                        <div class="card-body card-body-fixed-height-1">
                                            <div class="post-header">
                                                <h2 class="post-title h3 mt-1 mb-3">{{$article->title}}</h2>
                                            </div>
                                            <div class="post-content">
                                                <p>{!! \Illuminate\Support\Str::words($article->content, 30) !!} </p>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </section>
@endsection