@extends('layout')
@section('content')
    <div class="my-3">
        <div class="container">
            <div class="theme-border-radius theme-box-shadow card-body p-3 theme-bg-white">
                <section class="news py-0 py-lg-5" id="news">
                    <div class="container">
                        <div class="row">
                            <div class="col-12 text-center">
                                <h2 class="fs-4 fw-bold text-uppercase theme-text-secondary mb-3">
                                    @translate('homePage', 'application_title')
                                </h2>
                            </div>
                        </div>
                        <div class="row mt-5">
                            @foreach ($news as $newsItem)
                                @if ($newsItem->langs->isNotEmpty())
                                    @php $lang = $newsItem->langs->first(); @endphp
                                    <div class="col-12 col-lg-12 mb-4">
                                        <div class="news-card row g-0 h-100">
                                            <div class="overflow-hidden position-relative left col-12 col-lg-6">
                                                <a href="{{ $localeUrl }}/news/{{ $newsItem->id }}">
                                                    <figure class="mb-0 img-effect">
                                                        @if ($newsItem->image)
                                                            <img src="{{ $newsItem->image }}" class="img-fluid"
                                                                style="max-height: 350px; object-fit: cover;"
                                                                alt="news articles">
                                                        @endif
                                                    </figure>
                                                    <div class="tags position-absolute">
                                                        <div class="flood-effect">
                                                            <a href="{{ $localeUrl }}/news/{{ $newsItem->id }}"
                                                                class="font-small">
                                                                <i
                                                                    class="bi bi-calendar4-week me-2"></i>{{ $newsItem->date }}
                                                            </a>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                            <div
                                                class="right col-12 col-lg-6 theme-box-shadow p-4 p-lg-2 p-xl-4 d-flex flex-column">
                                                <h2 class="fs-6 mb-2">{{ $lang->title }}</h2>
                                                <p class="theme-text-accent-one font-small mb-2 flex-grow-1">
                                                    {!! \Illuminate\Support\Str::limit($lang->content, 300) !!}
                                                </p>
                                                <div class="custom-button mt-auto text-end">
                                                    <a href="{{ $localeUrl }}/news/{{ $newsItem->id }}"
                                                        class="custom-btn-secondary theme-border font-small button-effect">
                                                        @translate('homePage', 'application_read_more')
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
@endsection