@extends('frontend.template.index')

@section('content')
    <!-- SECTION1 -->
    <section id="sectino-1" class="container mt-5">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item "><a href="#" class="text-dark text-decoration-none">INFORMASI</a></li>
                <li class="breadcrumb-item text-uppercase active" aria-current="page">SEMUA {{ @$nav }}</li>
            </ol>
        </nav>
        <img src="{{ url('templates/frontend') }}/images/news.png" class="rounded-4" width="100%" height="400vh"
            alt="">
    </section>
    <!-- END SECTION1 -->

    <!-- SECTION 2 -->
    <section id="section-2" class="container mt-5">
        <div class="d-flex align-items-center justify-content-between">
            <h4 class="mb-0 fw-bold text-dark">{{ @$nav }}</h4>
        </div>

        <div class="row">
            @foreach ($posts as $post)
                <div class="col-12 col-md-4 ">
                    <a href="{{ route('f.post.show', [$office->subdomain, 'berita', $post->uuid]) }}" data-aos="zoom-out-up"
                        data-aos-duration="1500" class="card mt-4 border-0 rounded-4 text-decoration-none">
                        <div class="card-body">
                            <img src="{{ url('storage') . '/' . $post->thumb }}" class="rounded-4" height="200vh"
                                width="100%" alt="">
                            <h5 class="mt-3 fw-bold text-dark">
                                {{ Str::limit($post->title, 47) }}
                            </h5>
                            <span class="text-secondary">{{ date_ID($post->created_at, 'd F Y') }}</span>
                            <p class="mt-3 text-dark">
                                {{ $post->excercept }}
                            </p>
                        </div>
                    </a>
                </div>
            @endforeach
            <div class="mt-4">
                {!! $posts->links() !!}
            </div>
        </div>
    </section>
    <!-- END SECTION 2 -->
@endsection